まず、インターネットの黎明期には、より良いページをどのように構築することを中心に立ち上げ
HTML- HTMLベースのWeb開発を始めインターネットはNetscapeが最初のグラフィックブラウザを作成したときに、世界の目は、このウィンドウに焦点を当てている、すべての普通の人の注目を引き付けるために始めています。ネットワークのIPアドレスによりWebページの様々なアクセスすることは、インターネットの関心をサーフィンする最初の人です。
しかし、人間の本性はすぐに軽蔑したIPアドレスの人間性に対して、怠惰に染み付いています。されて入ってきたドメイン名の技術を覚えやすいので、その本質は使いやすく、覚えやすいを解決することです。ドメインは、アクセスを達成するために、対応するIPアドレスをバインドする必要があるので、ドメインネームサーバ（DNS）の必要性は、これらすべての非道な事は単純で行うこと。
一見賑やかな穏やかな、実際には、単に錯覚をくすぶっ。このインターネットのプロパティは、関係者全員が、それは各開発者の習慣がある、非常に異なっていることを意味していることであるなぜこれほど多くの放棄されたラベルが理由で、HTML言語 - 人々は単に彼らの効果を達成したいです、ラベルのスタイルプロパティは、狂気の人々の要求を満たすことができませんでした。したがって、<センター> <FONT> <カラー> <S>の<strong>ラベルのシリーズを解決する必要性を押します。この傾向は、人々がこの問題を解決するためにCSS-カスケーディング・スタイル・シートを発明したので、後半の維持・拡大に資するだけではない続けば。スタイルのコード複数のページを書き、維持することによって、統一された効果を達成するために。
その後、ユーザが提出された情報を入力した後、サーバー、結果から結果を返すまでに長い時間を待つために、（キロバイト単位）が悪いの速度だった、人々は検索しましたか最初のユーザーとの対話の行動で、需要のシナリオを記録しますエラーが返され、このインタラクティブな経験は非常に悪いです。Netscapeが最初にこの考え、ブランドンは、インタラクティブな体験を最適化するために情報を送信する前に、言語が作成され、このわずか10日後に、ユーザの入力をチェックすることで、ブラウザのスクリプト言語での実行を開発してみましょうLiveScriptは、原因の背景に一度SunのJava言語は非常に暑いですので、言語はNetscapeのホメオパシーjavascript--改名されたのJavaを行うにはjavascriptの何もないではないが、二つの言語はそれぞれ他の部分から学ぶ持っていること。注意してください
この時点で、三つの基本的な成形技術のフロントエンド。文書とブラウザの操作ページを達成するために提供されるオブジェクトは、APIのインタフェースと、MicrosoftはIEにも機能がDOMおよびBOMを操作-JScript実現解放、より多くのブラウザでは、主要な開発者が、表示されるようになったjavascriptのDOMおよびBOMプロジェクトは維持が困難になったなりの互換性のコードを書きます。ティム・バーナーズ=リー、インターネット技術を開発するW3Cの組織を設立し、インターネット関連の技術基準の創設者は、最初のブラウザ戦争は終わりに来ました。
優れたインタラクティブな体験の拡張を構築する方法の周りのインターネットの第二に、開発、
フロントターニングポイントに持参-Ajax-非同期JavaScriptとXML非同期通信技術です。Ajaxの非同期要求として、我々は、ページ全体を更新せず、データ・ページを更新することができ、第二のブラウザ戦争が開始されます。Netscapeが今1に注意を集中することがあります：1ペアFireFoxのECMA標準の実装で、IEは4-6をリリース、SafariとChromeはまたで参加し、同様に5×5の主要ブラウザとブラウザでオペラ、カーネルの起源。
アヤックスは、フロントエンドの開発のために、この過程で繁栄様々なJavaScriptのライブラリを相互作用の新しい方法やよりユーザーフレンドリーな経験をもたらしました。プロトタイプ、DOJO、YahooのYUI、内線JS、MooToolsは、だけでなく、jQueryの。しかし、固有の利点のjQueryの美徳 - 軽量ボリューム、互換性、強力なセレクタ、チェーンオペレーション、イベント処理メカニズムを改善し、アヤックスを向上させる、あまりを書くために、設計のための複数の操作を行いますがすぐにJavaScriptのコアになりましたリーダーライブラリー。
ブラウザの生成元ポリシーは、セキュリティを強化するためのメカニズムですが、マルチサーバの配備、非常に頭痛を開発することができます。、クロスドメイン機能を持つスクリプトタグを使用することにより、他のサーバリソースへの参照を--JSONPを生成し、コールバックコールバックメソッドを介してデータの相互作用を達成するために、他のファイルサーバリソースの使用、新しい技術に対処するために。
クロスドメインは非常に友好的な方法だったかもしれないが、その安全性が繰り返しテストを受けた、XSSのクロスサイトスクリプティングは、煙の時間を攻撃します。このセキュリティ問題に対処するために - クロスサイトリソース共有方式が登場し、サーバ側で受信できるアクセス方法を設定することで、XSSやネットワーク攻撃の他の種類のを防ぐために、リクエストヘッダを設定します。もちろん、頻繁に使用されるIFRAMEはもはや存在し、似たような経験を持っていました。
APIの互換性の問題を解決すると、フロントエンドは、モバイルデバイスの登場により、2007年の急速な発展期に入った - モバイルインターネットの時代が開かれました。モバイルデバイス用のトラフィックは、モバイル端末のプロジェクトの最初のタスクは、問題解決のためのアプリケーションのボリュームだけでなく、ページのパフォーマンスで、彼らの関心の中心です。Zeptoは、ライブラリが正確に携帯端末の機種で表示され、携帯端末の軽量標準が人気を集め始めました。携帯端末のより多くの画面サイズとして、別の疑問が生じる - 複数の移動端末を適合させるためのコードを開発する方法？ - 応答レイアウト方式が登場しました。メンテナンスコストの低減のために適合され、携帯端末装置によって書かれたコードとを備えます。
この期間中、示されるUIフレームワークをブートストラップするために登場するだけでなく、ブームにフロントエンドを表します。メディアクエリのAPIを使用することにより、動的に異なる移動端末で完璧なレイアウトとの相互作用を提示エフェクトの設定ページを表示することができます。
第三に、技術は、より成熟になり、インターネットの成熟度、より速く、よりユーザーフレンドリーなアプリケーションが構築することが可能になります
現在の終了後、急速に大量のツールプロジェクトの量を減らすために、圧縮することで、アプリケーションの音量、および合併を増やします。UglifyJS、一息、grountは代表ツールです。そして、ページ数の不足が共通のコードの形でそれを抽出することにより、減少していない、このプロジェクトは、異なるページ構造に分割 - コントラストアセンブリファジー概念に。別のページの構造を組み合わせることで、メンテナンスコストの多くは、だけでなく、開発の量を減らすことができます。現在、市場に我々はまだこのような方法で実装されたプロジェクトの多くを見ることができます。さて、WebPACKのすべてのエンジニアリング開発作業は、習得が容易、かつ強力な設定するために統合されています。
最初の到着は、seajs requirejsモジュール化され、この期間のかなりの代表者は、ビジネスやビュー層のソリューションを実現するために、異なるモジュールのページ噴射における分割機能コードによって、異なる2つのライブラリ、ですデカップリング。後半commonjs含め遠く遠くデカップリングの道路上です。AMD CMDの規範や仕様はモジュラー実装の両方のために開発され、それらはデカップリングが発生した達成するために意図されています。倍のフレームワークにフロントエンドを表すながら角は、フロントエンドの出現のためのランドマークに従いました。これはピットに問題の数を減らすことによって、共通ライブラリモジュールにカプセル化されたJavaの春ブーツフレームに似ています。開発者は、もはや環境制約を投影する細心の注意を払う必要がありませんできます。
フロントエンドのために、それはすべてのピークにフロントエンドの開発および統合技術開発のnodejsの誕生に感謝です。データ層、制御層に抽象化チップによってangularjsは、ビュー層は、単一ページのアプリケーションの時代を開きました。このようMVCの開発思考の完全な練習。操作指示DOMの使用によって達成angularjs、結合事象、ルーティング制御、および対応するビジネスロジックネイティブJS書き込み - のコース実施一方向のデータフローを開発することが考えられます。angularjsは、開発者がフロントに、よりリラックスした方法になることを可能にすること、次のフレームの多くはその利点を引く作るので、それもあります。
Facebookはプロジェクト開発の同じ問題に直面したとき、我々はすべての方法の開発は彼らの期待を満たしていないことを発見しました。だから、Facebookはすぐに、新しい機能、優れた性能と経験のJSによって、オープンソースのフロントエンドフレームワーク--reactのセットを開発し、開発者の支持を得ています。DOMは、性能を向上させるために、仮想と現実のDOMに対応するノードの変更と比較することによって、仮想DOMから来た性能の革新に反応します。一方向のデータの流れとその後のフラックスのアイデアはangularjs実装を描いているReduxの。状態管理モジュールを使用して、データを予測し、集中管理とデータ状態の分布されてもよいです。
国は開発段階ベースのフロントエンドにまだある場合には、国内の開発者のためのフロントエンドフレームワークは--vuejs生まれ。その角上での描画と反応し、枠組み指令のこれら2つのコアアイデア、仮想DOMを継承し、前方に運びます。学習難しさとコストの開発者に対処するのに最適なパッケージによってvuejs。より軽量なファイルサイズ、より優れた性能、および直感的な開発アプローチ、開発者はすぐにオープンで爆発させました。以下のコードを記述することで、より豊かな、よりインタラクティブを実現しています。
これまでのところ、フロントフレームの三本柱は、同じ時間に別の問題が浮上しました。だから、多くのプロジェクトの技術スタックは、どのように迅速な開発環境を構築するには？ - これはすぐに任意の圧力なしに任意のフレームですぐに開始するために、単純な命令の数行でプロジェクトをビルド、足場ツールの原点です。足場やツールのほとんどは、コンフィギュレーションと優れた性能を説明するのに十分に簡単で、WebPACKの最も基本的な構成を選択しています。
2009年には、大画面スマートフォンが表示されるようになった、と4Gモバイルネットワークの後に人気。単一のブラウザベースのPCディスプレイからフロントエンドのWebアプリケーションは、携帯電話、タブレットカバーに始まったように（HTML、CSS、JavaScriptはまた、独自の新しい標準を開始しました）。クロスのフロントエンド開発の需要のフロントエンドビューは、もはや単なるPCのWebに関しては、電話機の設定、hybird開発やアプリではありません、それが当たり前になりました。でも、Facebookのが反応-ネイティブ、国内のマイクロチャンネルを立ち上げ、アリペイは、Web、ネイティブ開発を統合しようとしている、小さなプログラムを開始しました。なぜこのような状況は、スピードより速く、より速く、起こり良く、ハードウェアのパフォーマンスを得る、ネイティブ開発を実行する機能でjsのギャップ（IOS、アンドロイド）各端末がますます小さくなっている、のは、何かをやらせます（怠け者のような）の子供たちは、プログラマはコードの1セットを書き、その後、4それを実行すると考えることができます。
後に、開発者は、JavaScriptのデスクトップアプリケーションは、（VSCode）が可能となっている使用できるように、電子が登場するようなエネルギーは、これは持っている、、、小さなプログラムネイティブを反応させることができます。Googleはまた、開発言語の2年近くフラッターを導入し、あなたは、コードのセット、多くの実行（ウェブ、アプリ）を達成することができます。フロントはもはや本当に唯一のカットプラン、フロントエンドの静的なページの開発ではありません。バックエンドが行うことができ、爬虫類は（ノード）を従事することができ、アプリを書き込むことができます（Weex、RN、フラッター）、デスクトップアプリケーションを開発することができる（エレクトロン）、アルゴリズムと厳し少しショートボードの言語が、活字体の出現、などのフォローアップECMA標準を改善するために一歩前進を取って、フロントエンドはまた、複数のセグメントの仕事を発生することがあり、全能の多くを行います。