『Webコンポーネント実戦』翻訳者序文_html/css_WEB-ITnose

「大規模なアプリケーションを作成する秘訣は、大規模なアプリケーションを作成することではなく、アプリケーションをコンポーネントに分割することです。その後、アセンブルしてテストし、複数のコンポーネントを組み合わせてアプリケーションを形成します。」 -- JavaScriptMVC 作者、Justin Meyer

JavaScript は、仕様が完璧ではなく、コミュニティが十分に強力ではなかった野生の時代には、開発者によって書かれたコードも不均等でした。 、確立された仕様はなく、コードの可読性は低く、ソフトウェア工学が提唱する再利用性、保守性、拡張性はさらに不可能です。テクノロジーが製品開発を促進するのか、それとも急速に変化するインターネットがフロントエンドテクノロジーの進歩をもたらすのかを判断するのは困難です。しかしその結果、フロントエンドテクノロジーは驚くべき速度で反復されています。 JSConf 2015 開発者カンファレンスでフロントエンドのムーアの法則が有名になったように、「18 ～ 24 か月ごとに、フロントエンドの難易度は 2 倍になります。」フロントエンドのモジュール化ソリューションは、わずかにパターン化された名前空間から JavaScript の AMD および CommonJS モジュール定義まで、ブラウザ側のモジュール化ソリューションから、コンパイルに依存する webpack およびbrowserify ビルド ツールまで、ゼロから始まります。その過程で、オープンソース コミュニティが多大な貢献をしてきたことは疑いの余地がなく、時代の要求に応じて多くの新しい標準が登場しました。 ES6 のモジュール システムは主に Node.js モジュールから影響を受けており、HTML5 Web API によって導入された querySelectorAll も jQuery セレクターから影響を受けていると言わざるを得ません。

Web コンポーネントは、UI コンポーネント化の新しい標準をもたらします。これは、開発者が開発プロセス中に安定した再利用可能なコンポーネントを作成するのに役立ちます。 Web コンポーネントには、テンプレート要素、HTML インポート、Shadow DOM、カスタム要素が含まれます。テンプレート要素には、従来のキャラクター作成テンプレートを置き換えることができる HTML、CSS、および JS が含まれます。HTML インポートは、外部 HTML ドキュメントを現在のページに導入し、スタイルとスクリプトの範囲を提供します。 ; 一方、カスタム要素は HTML 要素を拡張するという目的を達成できます。つまり、要素を開発した後はどこでも使用できます。 Web コンポーネントは、関心の分離を実現し、コードの保守コストを削減し、開発効率を向上させる唯一の方法であると言えます。

現時点では、Web コンポーネントはまだ新しいテクノロジーであり、多くのブラウザーはそれをネイティブに実装していないことに注意してください。 Google が実装した PolymerJS、Mozilla が実装した X-Tag、Facebook が実装した React など、多くの大手企業もこの新しい標準セットを独自の方法で実装しています。これら 3 つの実装は、ポリフィルを介して標準を実装するか、仮想 DOM を介して別のアプローチを作成します。この本では、各フレームワークの周囲のクラス ライブラリと構築ツールも詳しく紹介され、詳細なコード例も示されています。 。現在、React は明るく輝いており、国内外で React に基づくプロジェクトが春の雨後のキノコのように湧き出ています。これは主に、React が提案する UI ステート マシン、仮想 DOM、および一方向によるものです。データの流れ。もちろん、他の 2 つのフレームワークの設計上の工夫や概念も、すべての開発者が学ぶ価値があります。

本書では、著者が Web コンポーネントの細部まで詳しく紹介し、Web コンポーネント仕様に基づいた 3 つのフロントエンド フレームワークとその構築ツールを例を挙げてわかりやすく説明します。 。読者はこの本を読んだ後に何かを得て、独自の Web コンポーネント プロジェクトを開発したり、そのアイデアを既存のプロジェクトに適用したりできるようになると信じています。この本の翻訳チームは 4 人の第一線の Web 開発者で構成されています:

• Fan Honchun 、Alibaba データ技術および製品部門に勤務し、フロントエンド アーキテクチャのディレクションを担当
• Shao Feng、Splunk China R&D Center に勤務、現在ビッグデータ視覚化の開発と研究に従事
• He Yuxuan、Tencent に勤務ISUX は UI エンジニア
• Jiang Tianyi、アリババ国際事業部で主に Node.js サーバーの研究開発業務に従事しています

さらに、 Yuxuan、私、Tianyi はいずれも Zhihu コラム「フロントエンド外国ジャーナルレビュー」の管理者として、この本の試用版の章もできるだけ早くこのコラムに投稿する予定です。つまり、この本を読んで翻訳の問題が発生した場合は、コラムを通じて連絡してください。

最後に、この本を紹介し、翻訳する機会を与えてくれた Bowen Viewpoint に感謝します。より多くの開発者がこの新しい標準を理解できるように、この本を執筆した Sandeep Kumar Patel に感謝します。この間、お互いに助け合い、励まし合ってくれた4人に感謝します。 BlogView の編集者の皆様、私たちを信頼してくださってありがとうございます。私がこの本の翻訳を担当していた間、理解とサポートをしてくれたアリババのフロントエンド チームの 2 人の同僚に感謝します。両親の優しさについては説明する必要はありません。

裏表紙

Web コンポーネントは、HTML と CSS をカプセル化および拡張することで強力で再利用可能なコンポーネントを可能にする、すべての開発者にとってエキサイティングな新しい標準です。 Web コンポーネントは間もなく登場し、ブラウザーでデビューする予定です。

この本は、Web コンポーネントの中心的な概念から始まり、この本の例に従ってデジタル表示時計の開発を完了できます。 Shadow DOM、HTML インポート、およびテンプレート要素の概念を習得すると、純粋な JavaScript を使用して独自のコンポーネントを作成できるようになります。次に、Polymer、Bosonic、Mozilla Brick、ReactJS など、Web コンポーネントの開発に使用されるコア ツールとライブラリを調べ、実際のプロジェクトでそれらを柔軟に使用する方法を学びます。この本では、すべてのアーキテクチャと構成を詳細に説明し、読者が学習して使用できる適切な開発ツールを選択します。

読者向け

この本は、新しいツールやテクノロジーを使用して Web コンポーネントを作成したいすべての Web 開発者に適しています。

この本から何を学ぶことができます

• ネイティブ JavaScript を使用して Web コンポーネントを作成する実践的な経験
• Polymer の核心を発見し、それを使って Web を構築しますコンポーネント
• Mozilla を使用してカスタム Web コンポーネントを作成します
• ReactJS を使用して別の Web コンポーネントを作成します
• 適切な方法を使用して Web コンポーネントを作成します
• マスター Bosonic フレームワーク、Web コンポーネントの設計

PS: この本は初心者向けに販売されており、Amazon、Tmall、JD.com などで購入できます。

新浪微博のフォローへようこそ: フロントエンド外部ジャーナル コメント