フロントエンドのDaquanWeChatパブリックアカウントのバックエンドで、次のようなフィードバックをたくさん受け取りました。
-
フロントエンドの開発レベルをどのように学習して改善できますか？
-
フロントエンド開発にはどのようなスキルポイントが関係していますか？
-
古典的なフロントエンド開発テクノロジーの本をお勧めできますか？
- ……
同様の混乱がある場合は、このWebフロントエンド開発スキルスタックが最適です。その目標は、フロントエンド開発を開始および進めるためのリファレンスガイドを作成することです。現在、概要部分がリリースされており、フロントエンド開発スキルのリストとさまざまな拡張読み物が将来追加される予定です。このリファレンスガイドについてご意見がございましたら、コメントでお知らせください。ありがとうございました！
以下はテキストです
この記事では、フロントエンド開発に関係するテクノロジースタックをリストするだけでなく、これらの「秘密」を理解したい初心者や読者に適した、これらのテクノロジースタックの背後にある「秘密」を探ります。フロントエンド開発テクノロジースタックのみを知りたい場合は、引き続きフロントエンドスキルスタックに注意を払ってくださいhttps://github.com/jobbole/web-skill-set
オープニング：
工欲善其事，必先利其器。
出自：《论语·卫灵公》
序文：
JavaScriptの構文は非常に単純なので、簡単に始めることができます。基本的に、プロジェクトは数週間で開発できますが、それがすべてJavaScriptですか？明らかに違います！JavaScript開発に不慣れな多くのプログラマーは、grunt / gulp、npm、requre.js / seajs、その他の補助テクノロジー、プロトタイプ/プロト、その他のよりあいまいなテクノロジーなど、他のテクノロジースタックを多かれ少なかれ学び続けます。文法知識、MVC / MVP / MVVMなどのマスターデザインパターン、Backbone.js / Vue.js / React / AngularJSなどのフレームワーク、jQuery / Protorype / lodashなどのライブラリ。
疑問に思う：
一部の初心者は、ほとんどこの考えを持っています。JavaScriptでプログラムを作成できるようになり、プログラムは正常にオンラインになり、正常に実行されています。なぜこれらのテクノロジースタックの学習に余分な時間を費やす必要があるのでしょうか。
回答：
上記のテクノロジースタックは、大規模なプロジェクトを開発する際のJavaScriptの欠点を補うためのものです。
疑問に思う：
フロントエンド開発の分野で最も重要な言語として、JavaScriptは今日の大規模プロジェクトの開発に適していませんか？この答えを見つけたいのであれば、JavaScriptの過去と現在を再理解する必要があります。
過去の人生：
JavaScriptは、作成初期のWeb開発の欠点を補うために（スクリプト形式で）使用されました。その時代、JavaScriptはASP / JSPなどの開発言語の補助機能として存在し、頻繁に使用されるシナリオ（そのうちの1つ）は「フォーム検証」でした。JavaScriptの作成者であるBrendanEichは、すでに未来を「知っています」が、JavaScriptの作成に10日しかかからなかったという事実を止めることはできません。（初版）当時、JavaScript開発を専門とする立場はありませんでした。フロントエンド開発のパイオニアは、「ブラウザウォーズ」後の互換性の問題に力を注いでいます。
開発：
ブラウザ戦争後のもう1つの影響は、JavaScriptを国際標準、つまりECMAScript（European Computer Manufacturers Association）に昇格させることです。これは、JavaScriptの文法構造を記述し、その開発を促進するために使用されます。前者は後者の実現に過ぎません。（注：別のECMAScript実装スキームはActionScript 3.0です）
この人生：
Chromeのような最新のブラウザの出現により、その背後にあるJavaScriptパーサー（V8）は、JavaScriptの実行速度/効率を大幅に向上させました。（V8に基づいて、別の偉大な神であるRyan DahlがNode.jsを発明し、元々はバックエンド開発のブラウザー側でのみ実行されていた言語を開発しました。）jQueryの誕生により、フロントエンド開発のパイオニアは「ブラウザー」を離れることができました。互換性の問題の泥沼」、私はJavaScriptの将来について考えるためのより多くのエネルギーを持っています。ネットワーク帯域幅の増加とAjaxテクノロジーの出現により、Webページの非同期更新が可能になり、従来のB / SアーキテクチャからC / Sアーキテクチャへの探索が大幅に加速しました。GoogleGmailの成功により、このテクノロジーはさらに主要プロジェクトになりました。可能性。やがて、SPA（Single Page Application）が登場し、JavaScriptを使用して大規模なプロジェクトを開発することがトレンドと標準になりました。
弱点：
ECMAScriptはJavaScriptの開発を促進するため、JavaScriptは前世紀の製品ですが、それを使用して小さなフロントエンドプロジェクトを開発することは難しくありません。ただし、大規模なSPAプロジェクトには、多くの場合、n個の外部参照ライブラリ、数十（またはそれ以上）のjs / html / css / picturesおよびその他のリソース、複数人の参加/長期メンテナンス、数千行のコードがあります。専門。明らかに、これらはJavaScriptが最初は考慮していなかった状況です。
フロントエンドプロジェクトの機能：
上記のように、テクノロジースタックは、大規模プロジェクトの開発におけるJavaScriptの欠点を補うため、テクノロジースタックの特性をより明確に分析するために、次の問題から始めます。
一个大型的 JavaScript 项目通常需要解决哪些问题？
-
外部参照パッケージの管理。
-
コードが多すぎるために発生するプロジェクトの更新、反復、およびリファクタリングの問題。
-
多くの人が参加し、開発責任を区別することは困難です。
-
ネットワーク帯域幅は大幅に改善されましたが、ページの読み込み速度は依然として問題です。
- 過剰な静的リソース（html / js / css / pictureリソースなど）は、オンラインになるときの反復的なワークロードの増加につながります。
外部参照パッケージの管理：
JavaScriptには本質的に他の言語のパッケージ管理機能はありませんが、これは当社の優れたフロントエンド開発パイオニアの探索を妨げるものではありません。npmやbowerなどのテクノロジースタックは、パッケージ管理の問題を解決します。
コードが多すぎるために発生するプロジェクトの更新、反復、およびリファクタリングの問題：
コードが多すぎるため、カプセル化、継承、その他の最新のプログラミング言語など、オブジェクト指向のプログラミング方法を使用する必要があります。JavaScriptは、作成当初はこれらの問題を解決するようには設計されていませんでしたが、Brendan Eichは明らかに将来を予見していました。つまり、元のJavaScript言語にはOOのアイデアが含まれていました。言い換えれば、JavaScriptはオブジェクトベースの開発言語です。
これらはすべてオブジェクト指向ですが、JavaScriptは従来のオブジェクト指向と同じではなく、より高度でありながらあいまいな継承チェーン方式を使用します。そのため、プロトタイプ/プロトテクノロジースタックを理解する必要があります。
多くの人が参加し、開発の責任を区別するのは困難です。
大規模なSPAプロジェクトの出現により、ページはユーザーの行動を伝えるだけでなく、バックエンド主導のロジック開発をフロントエンドにもたらします。もともと、MVCの「M」はかつてないほど「重かった」ため、「M」層で新しいフレームワーク理論が形成されました。そのため、MVC / MVP / MVVMなどの設計パターンを理解して習得することが必要な手段となり、フロントエンドフレームワークが普及しました。他の言語と同様に、既製のフロントエンドフレームワークの選択は当然のことながらトレンドになっています。これらの最新のフレームワークの「設計アイデア」には、次のようなフロントエンド開発の新しい概念が含まれています。仮想DOMの操作（仮想DOM）、MVC理論の実践。 Backbone.js; MVMスタイルのAngularJSなど。フロントエンドフレームワークを学習して習得することで、責任をより明確に区別できます。フレームワークの統合APIは、複数の人による長期的な開発/保守の可能性を実現します。
ネットワーク帯域幅は大幅に改善されましたが、ページの読み込み速度は依然として問題です。
SPAは単一ページのアプリケーションであるため、ページはロード時にほとんどすべての機能を含みますが、ユーザーはそれらの一部しか使用しないことがよくあります。したがって、ネットワーク速度の制限、帯域幅の浪費、およびユーザーの待機は別の問題です。「モジュラー開発」はこれらの問題を解決するための特効薬であり、AMD / CMDの理論は当然フロントエンド開発者にとって必要な知識になり、requre.js / seajsはこれらの理論の特定の実装です。Httpの特性（分散した小さな静的リソースのロードは遅い）により、マージ/圧縮は別の解決策であり、新しい問題、つまり4番目の問題が発生します。
過剰な静的リソース（html / js / css / picturesおよびその他のリソース）は、オンラインになるときに反復的なワークロードの増加につながります。
そのような静的リソースが少ない場合、手動でのマージ/圧縮は問題ではありませんが、逆に、これらのリソースが指数関数的に増加している場合、手動ソリューションはそれが良い方法ではないことを示しています。自動化ソリューションの導入は不可欠であり、実践者：うなり声/一口/ウェブパックを習得する必要があります。
考え：
上記のほとんどは「非公式の組織/開発者コミュニティ」によって作成されたテクノロジースタックです。JavaScript開発を促進する公式のECMAScript組織は何をしていますか？現在の「最もイン」なJavaScriptは実際には時代遅れの製品ですか？
答えはもちろん間違っています。ECMAScriptはすでに6番目のバージョンであるECMAScript6（2015年6月に正式にリリース）を発表しています。
ECMAScript 6：
その最も重要な機能（の1つ）には、クラス（ネイティブOOP）およびモジュール（ネイティブモジュラー）ソリューションが含まれます。
結論として：
JavaScriptの開発は、これらのテクノロジーを習得しなくても実現できますが、これらのテクノロジースタックを習得することで、「重くて面倒な」問題から切り離され、「ビジネスロジックに焦点を合わせる」ことができます。
上記のテクノロジーを習得することで、最新のフロントエンド開発への統合を改善できます。
結論：
ここをご覧になりましたら、おめでとうございます。新しい世界へようこそ！！！
イースターエッグ1：
上記のナレッジポイントは、デバッグ/テスト、パフォーマンスの最適化、CSSの事前コンパイル方法、コーディングルール、SEO、モバイルWeb開発などに加えて、フロントエンドテクノロジスタックの一部にすぎません。
イースターエッグ2：
これらの技術を習得した後、すべてが心配なくなりますか？もちろんそうではありません。フロントエンド開発の開発では、いつの日かこれらのテクノロジーは開発を満足させることができなくなります。したがって、これらのテクノロジースタックの背後にある理論的ロジックを理解する必要があります。
イースターエッグ3：
-
同様のテクノロジースタックを選択するにはどうすればよいですか？
-
大規模なプロジェクトにこれらのテクノロジースタックが必要ですか？
-
フレームワークを使用した後でも、開発が遅いと感じるのはなぜですか？
- xxxを使用した後、実際に問題を解決しませんでしたか？
それらを理解したいですか？、フロントエンドのスキルスタックをフォローしてくださいhttps://github.com/jobbole/web-skill-set
参照：
-
ECMAScriptはオブジェクト指向です
-
ECMAScript6の言語の説明
-
ECMAScript6ブラウザ互換性テーブル
-
ブラウザの互換性の問題リンクとブラウザの戦争
- ChromeV8パーサー