🤼

JSにおけるBackEnd(NodeJS)とFrontEnd(React等)の考え方違い

2021/03/24に公開

こんにちはハトです。業務でフロントエンドはReact、バックエンドはNodeJS(Express)を使って開発しています。TypeScriptなどを導入する際にそれぞれの環境の考え方の違いに気づかずにハマったので、共有。

FrontEnd(React)

DIライブラリは必要ない(Angularとかはデフォルトでついてる？)
Object指向てきなモデルを作るやり方もあれば、単純に関数型的な感じでデータは生のままstoreに保存し、利用時にヘルパースクリプトをたくさん適用するやり方もある。
基本的にバンドルサイズを小さくすることが求められる。lodashなどは大きいので全部インポートすることはまれ。またtree-shakingという技術も利用される。
webpackによって複数のモジュールは合体される(そしてそれを分割される)。実行時には合体された(あとに分割された)JSを実行することになる。
- このため、package.jsonでdependencyとdevDependencyに分ける意味はあまりない？
TypeScript利用時buildは基本webpackコマンド。
ステートレスなので特にdockerやdocker-composeを利用するメリットがあまりない(改善されたのかわかりませんがコンテナ内でjestを実行するとかなり遅くなりました。そういう点でも環境はdockerではなく直接PC上に作ったほうがいいという結論になりました)。

フレームワークになければDIライブラリがほしいところ。
Object指向、よくモデルを作成する。
フロントエンドほどサイズを小さくすることに厳しくはない(lodashの分割インポートも結局node_modulesを持っている時点で意味がない)。ただし、DockerHubやAWSのECRなどにイメージを保存するにあたってnode_modulesのサイズが大きくなればその分料金も高くなる。
モジュールは統合しない。実行時に各モジュールを読み込む。
TypeScript利用時 buildは基本tscコマンド。
統合しないのでwebpack利用しない？
DBなどの状態に依存することが多いのでテストはdocker-compose上でおこなうと楽(CIの構築も楽。AWSなどではクラウド環境をmockできるdockerイメージがある)
イメージを作成するときに、production用に必要最低限のライブラリだけを一緒に入れる。そのため、dependencyとdevDependencyを注意深く管理する必要がある