フロントエンド エンジニアリングについてのチャット_html/css_WEB-ITnose

バックエンドとサーバーに重点を置くプログラマーとして、私は偶然フロントエンド開発に目を向けたところ、自分が書いたフロントエンド コードが単に古代の産物であることに気づきました。

フロントエンドも mvc フレームワークを使用する必要があります

長い間、バックエンドは mvc フレームワークを使用して開発されてきました。ただし、フロントエンド開発には、ページ、html ファイル、css ファイル、および js ファイルが直接関係します。このようにメンテナンスも問題ないようで、開発プロセスも比較的明確です。

しかし、vue のフロントエンド フレームワークに出会ってからは、フロントエンド ページの作成が非常に便利であることがわかり、dom 要素を操作するための大量のコードを手動で記述する必要がなくなりました。 vue はテンプレート エンジンとして機能し、レンダリングをフロントエンドに引き渡すことでサーバーの負荷を軽減できるため、 html を出力するにはバックグラウンド言語でテンプレート エンジンを使用する必要があります。

フロントエンド ファイルを圧縮してマージしましたか?

フレームワークを使用するのは非常に素晴らしいことですが、ページがますます複雑になるため、問題が発生します。サーバーの帯域幅を節約するために、通常は複数のファイルを 1 つのファイルに結合して使用することを選択しますが、開発のために複数のファイルに分割した方が管理が容易な場合は、いくつかの補助ツールを使用してそれらを自動的にマージします。今回はこれらのファイルが 1 つのファイルになります。 js ファイルの場合、ソース コードを他の人に見られたくない場合があるため、難読化します。

フロントエンド開発の将来のトレンドはコンポーネント化である可能性があります

現在のアプリおよびデスクトップ ソフトウェア開発では、各インターフェイスは無数のコンポーネントで構成されています。しかし、Web 開発についてはどうでしょうか?以前は各ページに重複したコードを記述し、重複したコンテンツを抽出して、それを導入することで完全な HTML ページにまとめていました (この種のテンプレート レンダリングはバックグラウンド エンジンを使用することもできます)。フロントエンド テンプレート エンジン)。

しかし、よく使うものをコンポーネントとして扱う場合、この部分のhtml、css、jsを分離する必要があります。詳細については、vue チュートリアル コンポーネントのセクションを参照してください。

導入された js および css のキャッシュの問題にどのように対処しますか?

PC側でページをデバッグする際、jsやcssを変更した後、ブラウザは最新版にアクセスするようです。しかし、携帯電話を使用してデバッグする場合、読み取るデータはほとんどすべて古いデータであるため、変更のたびに次のような乱数を導入部分に追加する必要があります。

多くのページをインポートしてすべて書き込むと、嘔吐するほどの変更が加えられると思いますので、物事にはやはりツールが必要です。

公開するときに、HTML リソースと静的リソースのどちらを最初に更新するかを考えたことはありますか?

もしかしたら、これは何か影響があるのか​​と疑問に思っているかもしれません。 Web サイトに常に人々がアクセスしている場合、Web サイトを公開すると、人々が Web サイトにアクセスするようになります。

シナリオ 1: 最初に HTML ページを公開します。HTML ページが公開され、静的リソース ファイルが公開されていない場合、ユーザーは古い静的リソースを取得してキャッシュし、次にアクセスしたときに (静的リソース ファイルの公開後)、現時点では公開しても意味がありません。

シナリオ 2: 静的リソースが最初に解放されますが、HTML ファイルは解放されません。この時点では、新しいユーザーがアクセスすると、新しい静的リソースと古い HTML ページが混在します。ページが崩れる可能性があります。

解決策: 静的リソース ファイルの更新では古いファイルは上書きされません。最初に静的リソースを公開してから、HTML ページを公開します。

フロントエンド フレームワーク

jquery だけで十分という時代ではなくなり、vue.js、Angular、React などの新しいフロントエンド mvc フレームワークが多数使用されています。

フロントエンドパッケージングツール

webpack や grunt など。

私はフロントエンド開発に長い間触れていないので、まったく感覚がなくなっています。ところで、フロントエンドのパッケージ化、圧縮とマージ、静的リソースの自動バージョン番号付けのために作成した小さなホイールを共有したいと思います:

https://github.com/yubang/modular_front

どなたでもコメントを投稿できます