BT

Your opinion matters! あなたのご意見でInfoQが変わる!

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

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

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

原文(投稿日: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