「製品の最初のバージョンを恥じていない場合、市場参入に遅れています」
これらの言葉は、2010年以来、最初からリンガレオフロントエンドの開発を正当化します。 5年の歴史を持つ複雑なマルチプラットフォーム製品では、コードは考古学的なトリポリ文化の土壌層よりも少し厚い層になっています。 そして今、この日が来ました。私たちは、ウェブクライアントプラットフォームを更新して、散らばってジャンプすることにしました。 以下に、基準点から可能な限り着陸するために行ったことを説明します。
このすべての理解を無謀に掘り下げようとしたPRの女性は、Lingualeoフロントエンドの基盤となっている主要な技術は松葉杖と自転車であると言わなければなりませんでした。 彼女がこれをHabrに書かないほど賢いことを願っています。
最初のステップ。 PRを掘る
Lingualeoフロントエンドは、多くの異なるライブラリで実行され、コードは悲しみがピカルな場所から最先端も悲しみ-ピカルな場所に配布されます:-D。 古くは、Lingualeoサイトでは、すべてがjQueryが散在したjsファイルから始まりました。 それからそれを壊すことが必要になり、ある種の「小道具」が現れ、それにグローバルなイベントバスがねじ込まれました。 ウィジェットシステム自体は、いわゆるコンポーネントアプローチに進むことを決定するまで、何度か反復されました。 少しためらい、検索した後、 Reactのh騒にエントロピーを追加しました。
ステップ2 盲目で、何だったのか、自分から少し追加
したがって、トピックから遠く離れていて、上記のリンクをたどるのが面倒な人のために、以下のことをお知らせします。Reactは、ユーザーインターフェイスを構築するためのJSライブラリです。 実験が始まるまでに、Reactはバージョン0.13でリリースされました。 彼と一緒に仕事を始めました。 いくつかの理由により、Reactと直接友達を作ることはできませんでした。
- 以前のコードとReactコードを何らかの方法でサポートし、クロスする必要がありました。
- 最初は、通常のテキストテンプレートを放棄したくありませんでした。
- もっと深く掘り下げて自分のことを書くのは面白かったです。
- 私たちのコレクター（長年も）はjsxの操作方法を学びませんでした。
そこで、独自の「ラッパー」を作成し、既製のシステムを使用してVirtual DOMを作成および操作することにしました。
- https://github.com/Matt-Esch/virtual-domで仮想DOMを構築し、以前の仮想DOMと比較します。
- https://github.com/marcelklehr/vdom-virtualize-htmlを仮想DOMに変換するには、
- https://github.com/nthtran/vdom-to-html-仮想DOMをhtmlに変換します（これは便利だと思いましたが、いいえ、主にデバッグに使用します）。
ちなみに、 新しい文法トレーニングについての投稿でこれについて既に言及しました。
彼らは、ReactコンポーネントとのAPI互換性を持つラッパーを作成しようとしました。 次のフックを使用して同じライフサイクルを実行します。
（componentWillMount、componentDidMount、componentWillUnmount、
componentWillUpdate、componentDidUpdate、
componentWillReceiveProps）
したがって、Reactで作業しているようにいくつかの一般的なケースを探すことができ、すべてのコンポーネントを書き換えることなく、Reactに簡単に移行するための基盤があります。
ステップ3 地球に降りて、再び人生を愛する
データストリームとユーザーイベントの処理をどのように処理するかという問題が成熟したとき、Virtual DOMを使用して構想された計画に切り替えることによる幸福感は少し鈍くなってきました。 Fluxのアーキテクチャアプローチは、私たちにとって非常に抽象的なソリューションのように思えました。 彼の助けを借りて新しい文法トレーニングの最初のバージョンを書いた後、私たちは戻ってReduxに向かった。 このアプローチは、より直接的かつ簡潔であると考えています。単一のデータウェアハウス、ミドルウェアの存在、およびイベントハンドラーとしてのお気に入りのクリーンハンドラー関数です。 しかし、このアプローチを実装するための独自のレイヤーを作成しないと、私たちは存在しません。そのため、いくつかの異なる理由がありました。 後者は、基本的にはコレクターに依存しています。Reduxが記述されているES6をサポートしていません。
開発者から見た Redux
ステップ4 夢と体現
その結果、次のような明るい未来に向けてゆっくりと手を伸ばしています。
- 最小限のビジネスロジックのコンポーネントでは、単純に状態を反映し、ユーザーからのイベントをリッスンします。
- すべてのビジネスロジック（イベントへの反応）はストア内に蓄積され、Reducerは古い状態とアクションに基づいてストアの新しい状態を返します。
- 一部の非同期アクションは、アクション作成者またはミドルウェアで使用されます。
- アニメーション-私たちのつまずき、すべてのフロントエンドの恐怖-は、コンポーネントに詰め込まれています（誰もがこのアプローチの正確さに自信を持っているわけではありません）。
実際、このアプローチについてはまだ検討が進められており、たとえばアニメーションの場合のように、すべての質問が明らかな答えであるわけではありませんが、一般的にこのアプローチが好きで、実装された場所での生活が楽になります。
将来の計画には、サイト全体でVirtual DOMに切り替えることと、現在
ところで、Reactでアニメーションを操作する方法に関するコメントをHabrovskの人々に非常に感謝します：彼らは、いくつかの相互作用するアニメーションが発生する場合や、アニメーション中にコンポーネントと相互作用する場合の難しいケースに興味を持っています）。 そして、あるアーキテクチャから別のアーキテクチャへの移行がどのように行われたかという質問もあなたにとって興味深いものです;-)
本当に、Lingualeoフロントエンドチーム。
Twitter 、 Facebook 、 vkontakte 、 Instagramでニュースをフォローしてください。
トピック外： LingualeoはiOSおよびAndroid開発者のランクで待っています。 lingualeo.comのブログですべての空席についてお読みください。 履歴書を待っています！