BT

新しい あなたは、アーリーアダプター?それともイノベーター?そんな皆様に、InfoQの新機能をご案内しています。詳細はこちら

TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する

| 作者: David Iffland フォローする 3 人のフォロワー , 翻訳者 sasai フォローする 0 人のフォロワー 投稿日 2017年2月23日. 推定読書時間: 3 分 |

原文(投稿日:2017/02/17)へのリンク

Twitterは最近、すべてのモバイルWebフロントエンドをモダンなJavaScriptベースのWebスタックに切り替えた。そうすることで、彼らはモバイルWeb技術の進歩がどれだけネイティブアプリに匹敵するのか実証した。

TwitterエンジニアのNicolas Gallagher氏は、移行が完了したことをTwitterの投稿でカジュアルに報告した。

このややあいまいなツイートに対し、ネットではたくさんの質問が返ってきた。なにより、彼らは「これまで何を動かしていたのだろうか?」。そうしたギャップを埋めるため、Ghallagher氏はツイートを続けた。

「新しい」Webスタックは、実際には9ヶ月にわたり、ログイン状態のユーザー向けに提供されてきた。ログアウト状態のユーザーに対するサービスは、ScalaとClosure Templatesで構成された別のスタックで提供された。ログイン状態のユーザー体験が変わったのは、React開発者らがそれを認めたときにまでさかのぼる。

新しいブラウザベースのUIはReact上に作られ、Node.jsとExpressでサーバーサイドを処理している。アプリはProgressive Web Appとして構築されており、Service Workerを使った即時ページローディング、オフライン機能、プッシュ通知が実現されている。まだすべての機能がサポートされているわけではないが、別のTwitterエンジニアのPaul Armstrong氏によるとまもなくサポートされるようだ。

バックエンドがReactをサーバー上で動かしているわけではない。TwitterエンジニアのJames Bellenger氏は次のように言っている。バックエンドサービスは「Reactレンダリングをしておらず、ルーティング処理ももほとんどしていません」「サービスがやっているもっとも難しいことは、JSONのパースです」。Bellenger氏は一連のツイートで、サービスがどのように動いているのか、たくさんのヒントを提供している。まず、最新のNode.js LTSバージョンで動いているという。そして、Reactレンダリングの代わりにHandlebarsを使っているそうだ。

大量のトラフィックを持つサイトをどのように扱っているのか、コミュニティはもっと多くの情報を求めている。Stuart Langridge氏は「どうやってこうなったのか、ぶつかった課題など、詳しい投稿(あるいは、もっとたくさんの投稿)を期待してます」とリプライした

Ryan Johnson氏は独自にTwitterのReduxストアを解析して、興味深い知見を得た。Johnson氏はInfoQとの会話で、Twitterの実装を見て、このテクニックに自信を持ったと語っている。

Reduxで私がいつも懸念しているのは、ストアにとってデータが多すぎやしないかということです。Twitterはスクロールしているあいだ、あるいは新しいツイートがやってくると、たえずツイートデータをストアに追加しています。Twitterのデータを扱えるのであれば、どんなものを投げ込んでも処理できるでしょう。私は自信が持てました。

モバイルサイトのパフォーマンスは最高だ。「モバイルサイトは信じられないくらいスムーズに反応します。私見ですが、ネイティブアプリは簡単に置き換えられると思います」とJohnson氏は述べている。

新しいWebアプリはhttps://mobile.twitter.comから利用できる。

 
 

Rate this Article

Relevance
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT