Clever Geek Handbook

ブログa la Habr、プラットフォームの選択

前のシリーズ（ Habrを素早く非難する方法 ）では、 React Appの作成 （CRA）に基づいたプロジェクトを立ち上げました。 ただし、これはSPAです 。これは、検索エンジンでのインデックス作成が必要な場合にはあまり適していません。 サーバー側レンダリング （SSR）が必要です。 できれば、膝の上ではなく、箱から出してください。 基本技術の独立した開発にリソースを費やすのは非常に無駄です。 SSRをサポートするプラットフォームを選択する方法は？ 実際には、もちろんPOCです。 React Starter Kit （RSK）、 NEXT.js 、 Electrode （ Electronと混同しないでください ）の候補を考慮して、 Material-UIの入力フォームでCRUDを実装しようとします。







GitHubのソース 。







ルーティング



RSKには独自の自転車（ universal-router



。 Express （またはkoa、またはhapi）構成によるサーバーレンダリング中に、外部データをReduxにロードすることをお勧めします。







NEXT.jsはルーティングの問題に独自の方法でアプローチし、ページフォルダー内のファイル名を使用することを提案しました。 静的メソッドgetInitialProps



使用した通常のReactコンポーネント内では、サーバーレンダリング中に外部データをロードすることが提案されています。 リクエストの処理をカスタマイズする必要がある場合、これは最も自然な方法で行われます -express（またはkoa、またはhapi） の設定を介して 。







電極は、他の考慮されているプラ​​ットフォームとは異なり、 redux-router



を拒否することを強制しません。 そしてこれは、フロントエンドの実装時に、CRAの開発に戻ることができることを意味します。 electrode-redux-router-engine



内のサーバーレンダリングのすべての魔法。







性能



NEXT.jsで実行されるzeit.coがどのようにロードされるかを見るのは非常に興味深いです。 投稿のリストのページを開くと、15 MBのトラフィックが発生しますが、投稿のページへの遷移はすぐに発生します。すべてがブラウザーにキャッシュされます。 ただし、この混乱は、 Link



コンポーネントのprefetch



プロパティを使用して無効にできます。 オフライン優先はNEXT.js（ 予約あり ）で約束されていますが、既にElectrodeで実装されています。 SSRキャッシング：NEXT.js には例がありますが、電極ではソリューションが実稼働しています。







RSKでは、それほど興味深い動作は確認されていません。 ChromeでURL入力行の履歴のリストアイテムを切り替えると、まだ選択を確認していませんが、サーバー上のルートの実行を観察します。 その結果、完成したページはサーバーからより高速に発行されます。







ビルドのセットアップ



NEXT.jsとElectrodeは実装を隠しますが、アセンブリを構成できます。 CRAは、イジェクト（SCSSをねじ込む権利のために6か月間苦労した）のみを介してアセンブリを構成することを禁止していますが、解決策があります。 RSKにはフォークしかありません。プロジェクトの更新をフォローし、それらを手で保持する必要があります-プラットフォームのソースコードへのフルアクセスの料金。







組み立てと展開



RSK（CRAなど）は、初期ビルド中に新しいブラウザーページを読み込むことで強制終了します。NEXT.jsとElectrodeにはこの欠点はありません。







電極は最初の組み立てを非常にゆっくり実行します。







NEXT.jsは、 今すぐデプロイするための素晴らしいサービスを提供します。これはプラットフォーム固有ではありません。







エラー処理



RSKにはひどいエラー出力があります。さらに、ソースマップのデバッグが正しく機能せず、カーソルが数行下に移動します。 Electrodeでは、エラーがサーバー側にある場合、何が問題になったかを理解することは不可能です。 NEXT.jsでは状況はずっと良く、近い将来に最終決定することを約束しています。 ここではCRAが標準であり、プロジェクトでの作業中にコンソールにESLintメッセージを出力してくれたことに特に感謝します。 ちなみに、RSKはESLintチェックを均一な拷問に変えたため、事前コミットは省略しました。







サポート



NEXT.jsはさまざまなレシピに魅了されますが、いくつかの重要な質問にはまだ答えがありませんが、プロジェクトの開発のダイナミクスは勇気づけられます。 RSKと電極は、セット全体をうまく補完します。 CSRFの例：NEXT.js、電極の休日 、RSKにはcsurfへの参照が見つかりませんでした 。







昨日、3月27日、開始から6か月後にNEXT.js 2.0がリリースされました。 NEXT.jsの動機は、RSKやElectrodeと比較するとはるかに大きいです。 GitHubの星から判断すると、年齢の違いを考えると、NEXT.jsはCRAに追いつきます。







テクノロジーの背後には特定の人々がいます。 これも重要な選択ポイントです。 NEXT.jsはZEITを開発します-創設者のGuillermo RauchはLearnBoostのCTOおよび共同設立者でした、TJ Holowaychukを覚えていますか？







PS途中で見つけた



コンポーネントとコンテナの分離が不要であること

多くのプロジェクトはPresentationalおよびContainer Componentsの推奨事項に基づいていますが、著名な著者は脚注で分離の概念が議論の余地があり、コンポーネントを混在させることができることを認めています。 もしそうなら、なぜハンドルなしでスーツケースをドラッグしますか？ すべてのプロジェクトコンポーネントを1つの共有フォルダーに保存する方が便利です。 長所は何ですか：







  • 簡単なファイルシステムナビゲーション。
  • プロジェクトコンポーネントの一意の名前。
  • 苦労せずにインポート（ '../../../../../ ..'）。


プロジェクトが大きくなったら、実装をカプセル化してプライベートnpmパッケージに分割する必要があります。 ただし、コンポーネントフォルダー内のサブフォルダーのツリーを成長させないでください。これを開発および維持することは非常に困難です。 確認済み。







さらにもっと。 CSSモジュールを試しました-BEMを拒否しましたが、 styled-jsxの後、CSSモジュールを見ることができなくなりました。 classNameを介してコンポーネントの各ルート要素をバインドする理由。ファイル間でアテンションのコンテキストを切り替える方法が明確ではありません。







アクションとレデューサーを組み合わせることができるもの

コンポーネントの共有フォルダーで啓発を達成した後、私はducks-patternを適用しました。 しかし、それだけではありません。今すぐ電話することで、 redux-actパッケージを使用して、action-reducerをバインドするための定数を拒否する絶対に無料の機会が得られます。 







 // Create an action creator (description is optional) const add = createAction('add some stuff'); const increment = createAction('increment the state'); const decrement = createAction('decrement the state'); // Create a reducer const counterReducer = createReducer({ [increment]: (state) => state + 1, [decrement]: (state) => state - 1, [add]: (state, payload) => state + payload, }, 0); // <-- This is the default state


モジュールをAtomにインポートするための絶対パスを構成する最も簡単な方法

js-hyperclickプラグインを追加します 。







パッケージをプロジェクトに追加： 







 $ yarn add babel-plugin-module-resolver -D


.babelrc 







 { "presets": [ "next/babel" ], "plugins": [ ["module-resolver", { "root": [""] }] ] }


package.json 







 { "moduleRoots": [ "" }


例： 







 import MyComponent from 'components/MyComponent' import MyPage from 'pages/MyPage'


ところで、NEXT.jsはプロジェクト内の無意味なsrcフォルダーを削除します。 私は以前は注意を払っていませんでしたが、それなしでどれだけ良いことでしょう！







redux-formパッケージが不要であること

そして、フォームフィールドを検証したかっただけです。 しかし、462件の未解決の問題が示唆されています。 私は無理をすることができませんでした。 redux-formを使用しない場合よりもメンテナンス用のコードが多くなります。 また、フォームの動作だけでなく、この美しいラッパーを使用してフォームを機能させる方法について考える必要があります。 遺体安置所へ。 誰もがすべてを喜ばせることは不可能です。 すべてのアプリケーションにソリューションを提供する必要があります。 Meteor AutoFormバイクでも同様の悲しい経験をしました。 一見-素晴らしい。 構成を記述すると、フォーム自体が提供されます！ 2つのフィールドの場合、これは機能します。 しかし、フォームが大きいが、関連フィールドがある場合。 神々。 それはひどくブレーキをかけます。 バギーです。 そして再び、ハンマーでボンネットの下に登ることを強制します。 著者はプルリクエストを獲得しました。 分岐点が残っています-サポートに「ユニバーサル」コードの束をかけます。 必要ですか？







Material-UIについて

これは、小さくても誇り高いWebスタジオの技術者との長年の論争であり、UIフレームワークは私たちの肉体労働に取って代わることはできません。 インターフェースの開発がパンとバターであ​​ることは明らかです。 しかし、私はターンキーソリューションの使用の堅実なサポーターです。 UI / UXデザインの第一人者である大人のTKにプロジェクトを最初から実装した経験があり、詳細をどのように解決できるかについての良いアイデアがあります。 ガイドライン材料設計-2番目の宇宙速度。 しかし、その実装はどこにありますか？ 私が見たもの-スラグ。 Material-UIを除く。 ねじ回し、ファイルで仕上げ。 ええ、はい、いくつかの欠陥があります。 より正確には、647件の未解決の問題。 しかし、患者は死んでいるよりも生きている可能性が高いです。 デモ -ブログ投稿を追加/編集するためのフォーム。







更新



私は輪になってレースを行いましたが、SSRをSPAにオプションでねじ込むための提案された方法が最も正しいと自信を持って言うことができます（ ウィッシュリストは長い間策定されてきました ）。







CRAに座ったときは嬉しかったです。 それまでは、「 Reactアプリケーションの基礎となるもの 」を読むまで。 そして、環境の複雑さとの継続的な闘争。 読み取りの問題-頭が腫れます。







調査対象のすべてのソリューションは、ルーティング用に自転車を提供していますが、すでに廃棄することができます。React-Routerの最新バージョンは、SSRの機能を実装しています 。







More articles:


All Articles