Webコンポーネント101 :歴史


Webコンポーネントは、今日大規模な使用をお楽しみください.YouTubeからGithubと他の多くの主要組織において、彼らが一般的なフロントエンド開発実践に彼らのやり方をしたと言うのは安全です.
それは必ずしもそうではなかった.結局のところ、Webコンポーネントはどこかに開始しなければならなかった.そして、ウェブ開発は、何が成功するか、そして、そうでないもので、特にピカピカでありえます.
では、Webコンポーネントはどのように成功しましたか?広い養子縁組への彼らの道は、何でしたか?そして、現代のウェブ・コンポーネントのために使われるAPIの後の起源は、何ですか?
Webコンポーネントと関連する生態系の短い歴史を通して、これらの質問に答えましょう.

2010年:JSのMVCの初期の時代


概念の間“Model View Controller”, also commonly called MVC , いくつかの時間のために、JavaScript自体はそれが初期に保持することができなかったの周りされています.
しかし、2010年に、MVCのまわりで爆発がありました、そして、それは関連いとこです:Model View View Controller(MVVC).この爆発は、新たなフレームワークのスルーの好意によって来ました.
Knockout was one of the first to introduce strict MVC patterns inside of JavaScript in July 2010 . ノックアウトサポート可観測UIベース結合ここでは、モデルを宣言し、モデルに直接データをバインドすることができます.
<!-- Demo of KnockoutJS -->
<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>Subject</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr><td data-bind="text: subject"></td></tr>
    </tbody>
</table>
<script>
function WebmailViewModel() {
    // Data
    var self = this;
    self.chosenFolderData = ko.observable();

    $.get('/mail', { folder: 'Inbox'}, self.chosenFolderData)
};

ko.applyBindings(new WebmailViewModel());
</script>

これはUIのバインドに最適ですが、現代のフレームワークから期待してきたコンポーネント化の側面が欠けています.
これは生態系で改善されたときBackbone saw its first release in October 2010 . それは View , コンポーネントが今日のようになることを期待しているかもしれません.
var DocumentRow = Backbone.View.extend({
  tagName: "li",
  className: "document-row",
  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },
  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },
  render: function() {
    ...
  }
});
ここでは、イベント、クラス、および単一のタグにもっとバインドすることができます.これは、我々が見ているコンポーネントのタイプとよりよく、言う、反応するか、点灯します.
しかし、それは、我々がその年10月に見たすべてでありません.私たちもinitial release of Angular.js バックボーンのリリースのわずか10日後に.
ここで、私たちは、それがModel sのノックアウト.UIからの双方向バインドをデータとバックに許可しました.
<div ng-controller="TodoListController as todoList">
  <ul>
    <li ng-repeat="todo in todoList.todos">{{todo.text}}</li>
  </ul>
  <form ng-submit="todoList.addTodo()">
    <input
      type="text"
      ng-model="todoList.todoText"
    />
    <input class="btn-primary" type="submit" value="add" />
  </form>
</div>
<script>
  angular
    .module("todoApp", [])
    .controller("TodoListController", function () {
      var todoList = this;
      todoList.todos = [
        { text: "learn AngularJS" },
        { text: "build an AngularJS app" },
      ];

      todoList.addTodo = function () {
        todoList.todos.push({ text: todoList.todoText });
        todoList.todoText = "";
      };
    });
</script>
角はここで言及された3の最後でしたが、それは大きな衝撃を与えました.Googleが野生にJavaScriptベースのMVCベースのライブラリをリリースしたのは初めてだった.
彼らは、ライブラリを構築しただけでなく、これはほとんどすべてのGoogleの製品を今日力.これは、以前のJavaベースからのシフトを表しましたGoogle Web Toolkit” (GWT) それは以前広く使われていた.
後にacquisition of DoubleClick , で働いていたチーム.

2011年W 3 C標準眼のグリマー


角で.Googleの中で成長し続けているJSは、JavaScriptのHTMLバインディングで研究を続けていることは驚くべきことではない.
このトピックでは、アレックスラッセル-その後、Googleのシニアスタッフエンジニア、Webプラットフォームチームに取り組んで-gave a talk at the Fronteers conference .
この話では、彼は実験的な新しいAPIでカスタム要素を構築することができるライブラリのホストを紹介します.
<script>
class Comment extends HTMLElement {

  constructor(attrs = {}) {
    super(attrs);
    this.textContent = attrs.text || lorem;
    this.shadow = new ShadowRoot(this);
    this.buildUI();
  }

  buildUI() { ... }
}

HTMLElement.register('x-comment', Comment);

var c = new Comment("Howdy, pardner!");
document.body.appendChild(c);
</script>

<x-comment>...</x-comment>
ここでは、彼はTraceUR compiler (バベルへの先駆者)クラスを追加する class wouldn’t land in JavaScript stable until ES6 in 2015 ) 新しい「カスタム要素」を構築するには
これは彼らと結合したnew MDV library 私たちがブラウザAPIで今日持っているものに類似した開発環境を作成するために.
この段階で、何も仕様の内部で定式化されなかったことに注意するのは重要です-それはAPIのための遊び場として機能するすべての実験的なライブラリでした.
それはすぐ後に変わります.

2013:暖房が始まる


2013年初期にGoogleチームはWorking Draft of a specification for Custom Elements . シャドウドムAPIのための同様の作業ドラフトと並んで、彼らは口頭で呼ばれていたCustom Elements v0 ”.
With Google Chrome’s release in 2008 , 彼らは、アプリケーション開発者が仕様安定化の前にそれらを利用できるようにするために、これらの非標準APIをChromeに素早く実装する能力を持っていました.
そのような例の1つはPolymer, which was a component library based on v0 APIs to provide two-way UI binding using MVC. 初期のアルファリリースは2013年に発表されました.
で、それはどのようにポリフィルを利用して他のブラウザで実行することができた.
Facebookではなく、技術工学のフロントで外出すること.
一方、ポリマーはMVCルートに深く浸透した.React relied more heavily on unidirectionality 状態変異を避けるために.

2016年と2017年


年だけ前に、V 1.0カスタム要素仕様の使用でポリマー1.0をリリースしました.2016 saw the release of the custom element v1 specification .
仕様のこの新しいバージョンは後方互換性がありませんでした、そして、結果として適切に機能するために仕様の新しいバージョンへのシフトを必要としました.ポリフィルは、V 0の実装がなかったブラウザのためのストップゲートとして使用され続けました.
v1 was already implemented into Chrome in late 2016 , それは、それが仕様を下書きするのを助けた図書館に戻されるというポリマー2.0のリリースで、2017年までありませんでした.
このため、理論的にはWebコンポーネントの使用に向けた大きな一歩だったが、問題が生じた.ネイティブの実装より遅いブラウザ.

2018年以降


2018はWebコンポーネントが実際に足場を見つけたところです.
始めにMozilla implemented the v1 specification APIs into their stable release of Firefox , 完全なdevtoolsを完了します.最後に、開発者は、アプリケーションのすべてのWebコンポーネントのAPIを使用することができますクロスブラウザ、および非クロムのパフォーマンスのための懸念なし.
その上で、反応の一方向性は、ポリマーチームの上で勝ったようでした.ポリマーチームはmigrate away from bidirectional binding and towards a one-way bound LitElement
あれLitElement と呼ばれる専用のフレームワークになりますLit ”, 重合体を後継者と置き換えるために開発されたv1 in 2019 and v2 in 2021 .

年表


ホロウ!それは取っ手が多い.それを千フィートの眺めから見ましょう

  • 2010年
  • Knockout.js released
  • Backbone.js alpha released
  • Angular.js made open-source

  • 2011年
  • MDV (Polymer predecessor) introduced at a conference

  • 2013年
  • Working draft spec for Web Components (v0) released



  • 2015年
  • Polymer 1.0 released

  • 2016年
  • Custom elements v1 spec released


  • 2017年
  • Polymer 2.0 released

  • 2018年
  • Polymer announces start of migration to “LitElement”
  • Firefox enables web components (Polyfills no longer needed)

  • 2019年
  • Lit framework 1.0 released

  • 2021年
  • Lit 2.0 released
  • 結論


    過去10年で、我々はウェブ開発生態系に大きな変化を見ました.これ以上のWebコンポーネントの開発と継続的な成長よりも明らかです.
    うまくいけば、これはウェブ構成要素についてどんな将来の学習もするべきです、そしてframework comparisons 見通しに.
    私たちは長い間、これらのアイデアの多くを完全にウェブプラットフォームに標準化するのを見るのを待ちました、そして、今、彼らはここにいます、彼らは多くのプラットホームの成長を促進しています.
    どのように自分自身を構築する方法を学びたいですか?
    Webコンポーネントの構築方法についての記事がありますwithout a framework 使用だけでなくGoogle’s Lit framework .