Webフロントエンドとフロントエンドの違いは何ですか

フロントエンドはより広い範囲の総称です。Web フロントエンドは Web 開発のフロントエンドに属します。範囲が明確で方向性も明確です。フロントエンド開発にはモバイル フロントも含まれます。 -エンド開発とWebフロントエンド開発には、端末開発やモバイル端末のPC開発も含まれますが、Webフロントエンド開発は主に従来のPC側のWeb開発を指します。これが両者の最大の違いです。

このチュートリアルの動作環境: Windows 7 システム、Dell G3 コンピューター。

フロントエンドはより広い範囲の総称であり、Web フロントエンドは Web 開発のフロントエンドに属し、範囲が明確で方向性がより明確です。製品デザイン/UIに基づいてユーザー側のアプリケーションコーディングを実装するフロントエンド作業は、フロントエンド開発のカテゴリに属します（Web、アプリ、小さなプログラム、デスクトップなどのさまざまなアプリケーション形式を含みます）。ユーザー向けインターフェイス、一般的に言えば、フロントエンドには Web フロントエンドが含まれます。

簡単に言うと、フロントエンド開発には、モバイル フロントエンド開発と、PC 側開発とモバイル側分野の開発を含む Web フロントエンド開発が含まれます。Web フロントエンド開発は、主に従来型の開発を指します。 PC側のWebページ開発、これが両者の最大の違いです。

モバイル フロントエンド開発と Web フロントエンド開発はどちらもフロントエンド開発に属しますが、次のような違いがあります。

1. ビジネス アプリケーション シナリオ

Web フロントエンド開発とは、主に従来の PC 側の Web ページ開発を指します。ページは主に PC 側のブラウザーで実行されます。ページはモバイル フロントエンドによって開発されます。主にモバイル上で実行されます。

直感的にはPCページが大きく、モバイルページが小さく感じられると思いますが、開発経験上、ページが大きいからといってコードが複雑になるわけではなく、ページが小さいからコードが複雑になるわけでもありません。トランザクションの処理は主に特定のビジネス ニーズに依存します。

2. 新しいテクノロジーの使用

モバイル端末は主に Webkit カーネルに基づいているため、HTML5 などの新しいテクノロジーのサポートが強化されており、新しいテクノロジーをより広範囲で使用できます。 PC 側の開発では、多くのシナリオで IE などの古いバージョンのブラウザとの互換性が必要となるため、ブラウザの互換性を考慮して新しいテクノロジの使用が制限される場合があります。

3. ページの適応性

従来の PC 側のページ開発では、通常、ページに固定幅を設定し、両側に空白を設けることが選択されますが、モバイル側のページにはモバイル携帯電話の画面をキャリアとして使用します。PC よりもはるかに小さいため、一般に携帯電話の画面にできるだけ多くのコンテンツを表示することを選択します。これには、モバイル ページがさまざまな画面サイズの携帯電話に完全に適応し、最大限のパフォーマンスを発揮できる必要があります。使用。

この観点から見ると、モバイル ページの適応はさらに困難になります。

4. ページのパフォーマンス

PC 側のネットワーク状態は一般に比較的安定しており、ネットワーク ケーブルまたは Wi-Fi を介してネットワークに接続されていますが、モバイル側はより不安定です。 Wi-Fi に加えて、2G、3G、4G 間の切り替え、さらには複数の異なるネットワーク接続間の切り替えが頻繁に発生します。

不安定なネットワーク接続がページのパフォーマンスにもたらす課題は、モバイル側のページ リソースが大きすぎないことです。大きすぎると、ネットワーク状態が悪い場合はページにアクセスできなくなり、ユーザー エクスペリエンスに重大な影響を及ぼします。

5. フレームの選択

モバイル ネットワークが不安定であるため、モバイル ページのフレームワークを選択するときは、通常、zepto.js などの小さくて美しいフレームワークのみを考慮します。わずか 9.6K で、一般的なビジネスのニーズを満たすことができます。より複雑な単一ページのアプリケーションを構築したい場合は、強力な vue.js のようなフレームワークを選択できますが、圧縮後のボリュームは 100 を超えるだけです。 20K。

Web 側には比較的広い範囲の選択肢があり、プロジェクトのニーズに基づいて、より重いフレームワークも検討できます。たとえば、古くても巨大な ext.js は、多くの UI を備え、一部の企業で今でも使用されています。コンポーネント: バックグラウンド管理システム プロジェクト内。

詳細情報

Web フロントエンド開発に必要な技術:

1. フロントエンド開発技術 (HTML5、JS、JSON) に精通していること、XHTML、CSS3）、さまざまなテクノロジーの関連標準を理解します。

2. Ajax 非同期プログラミングをマスターし、高性能で再利用可能なフロントエンド コンポーネントを作成できるようになります。

3. プログラミングの考え方と、OO、MVC、MVVM などのフロントエンド フレームワークを深く理解し、フロントエンド フレームワーク (一般的に使用されるフロントエンド フレームワーク Vuejs、AngularJS、React) に習熟していること、Bootstrap、QUICK UI、およびモバイル端末には、Frozen UI、weUI、SUI、MUI、AUI）の原理を理解するため（多くのフレームワークがあり、主流のフレームワークを 2 つまたは 3 つ選択し、習熟し、深く理解する必要があります）。

4. Web パフォーマンスの最適化、アクセシビリティ、SEO などの経験が豊富で、プレゼンテーション層とデータ層の分離、Web セマンティクスの概念を理解している (これらは、仕事を探すときにも非常に役立ちます) ) サブオプション)。

5. フロントエンドのセキュリティ メカニズムを理解し、HTTP プロトコルとブラウザのキャッシュ戦略に精通します。

6. 一般的な JS 開発フレームワーク (プロトタイプ、jQuery、Mootools、Ext、Dojo、アンダースコア、YUI、Kissy など) のソース コード実装に精通しており、少なくとも 1 つのことに習熟していること (もちろん、 、それを使用する人を選ばないでください）フレームワークはほとんどありません。大規模なプロジェクトはチームによって実行され、自分で構築することはできないことを理解する必要があります）。

7. コード作成と設計ドキュメント作成の経験が豊富で、Git やその他のバージョン管理ツールの使用に習熟していること。

8. IE6/7/8/9、Firefox、Safari、Chrome などのブラウザの互換性に関する一般的な問題を明確に理解し、信頼できる解決策を用意します。

9. 高い美意識を持つ (これは非常に重要です。より多くのテンプレートやハイエンドのプロジェクトを見ると、大きなギャップを感じることができます)。

(学習ビデオ共有: Web フロントエンドの入門 )

以上がWebフロントエンドとフロントエンドの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。