Twitterは最近、すべてのモバイルWebフロントエンドをモダンなJavaScriptベースのWebスタックに切り替えた。そうすることで、彼らはモバイルWeb技術の進歩がどれだけネイティブアプリに匹敵するのか実証した。
TwitterエンジニアのNicolas Gallagher氏は、移行が完了したことをTwitterの投稿でカジュアルに報告した。
本日、TwitterのモバイルWebトラフィックすべて(これは膨大なものです)を新しいWebスタック – Node.js、Express、React PWA、に移行しました。
— Nicolas (@necolas) February 8, 2017
このややあいまいなツイートに対し、ネットではたくさんの質問が返ってきた。なにより、彼らは「これまで何を動かしていたのだろうか?」。そうしたギャップを埋めるため、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
- Editor Review
- Chief Editor Action