Polymer.js：Webアプリケーション開発の未来？
公開: 2022-03-11約1年前の2013年5月、GoogleはPolymer.jsを立ち上げました。
1年後のことです。 そして問題は、プライムタイムの準備はまだできているかということです。 ポリマーWeb開発技術を使用して本番環境に対応したアプリケーションを作成することはまだ可能ですか？
この質問に答えるために、私はポリマーをテストドライブに連れて行き、Webアプリケーションを開発し、それがどれだけうまく動作するかを確認しました。 この記事は、その経験とその過程で私が学んだことについてです。
Polymer.js：コンセプト
Polymerチュートリアルに入る前に、まずPolymer.jsを定義しましょう。それが主張しているものではなく、実際に何であるかを定義します。
ポリマーをチェックし始めると、その自称のユニークな世界観にすぐに興味をそそられます。 Polymerは、「要素をWeb開発の中心に戻す」という一種の自然に戻るアプローチを採用していると自負しています。 Polymer.jsを使用すると、独自のHTML要素を作成し、それらをスケーラブルで保守可能な完全で複雑なWebアプリケーションに構成できます。 それはすべて、新しい（つまり、カスタム）要素を作成することです。これらの要素は、内部を理解したり理解したりすることなく、宣言的な方法でHTMLページで再利用できます。
結局のところ、要素はWebの構成要素です。 したがって、Polymerの世界観は、Web開発は基本的に、マークアップを「スクリプトのゴブ」（単語を使用するため）に置き換えるのではなく、既存の要素パラダイムを拡張してより強力なWebコンポーネントを構築することに基づくべきであるというものです。 別の言い方をすれば、Polymerは、カスタムJavaScriptライブラリのますます複雑になる迷路に依存するのではなく、ブラウザの「ネイティブ」テクノロジーを活用することを信じています（jQuery et.al.）。 確かに興味をそそる概念。
OK、それが理論です。 それでは、現実を見てみましょう。
ポリマーウェブ開発：現実
ポリマーの哲学的アプローチには確かにメリットがありますが、残念ながら、（少なくともある程度は）時代を先取りしているという考えです。
Polymer.jsは、（W3Cによる）標準化の過程にあり、今日のブラウザーにはまだ存在しない多くのテクノロジーに依存して、ブラウザーに膨大な一連の要件を課しています。 例としては、shadow dom、テンプレート要素、カスタム要素、HTMLインポート、ミューテーションオブザーバー、モデル駆動型ビュー、ポインターイベント、Webアニメーションなどがあります。 これらは素晴らしいテクノロジーですが、少なくとも現時点では、最新のブラウザーにはまだ導入されていません。
ポリマーの戦略は、フロントエンドの開発者に、現在（W3Cによる）標準化の過程にあるこれらの最先端の、まだ来ていないブラウザベースのテクノロジを利用できるようにすることです。 それまでの間、Polymerはギャップを埋めるために、ポリフィル（現在のブラウザーにまだ組み込まれていない機能を提供するダウンロード可能なJavaScriptコード）の使用を提案しています。 推奨されるポリフィルは、これらの機能のネイティブブラウザバージョンが利用可能になると、（少なくとも理論的には）シームレスに置き換えられるように設計されています。
いいよ。 しかし、これをまっすぐにしましょう。 少なくとも今のところ、JavaScriptライブラリの使用を避けるためにJavaScriptライブラリ（つまり、ポリフィル）を使用しますか？ まあ、それは「魅力的」です。
つまり、Polymerは、まだ存在していないブラウザーテクノロジに最終的に依存している（または、より正確には近似している）ため、Polymerでは一種のリンボモードになっているということです。 したがって、今日のPolymer.jsは、要素中心のアプリケーションが将来どのように構築されるかについての研究のように見えます（つまり、必要なすべての機能が主要なブラウザーに実装され、ポリフィルが不要になった場合）。 しかし、少なくとも現時点では、Polymerは、今ここで堅牢な世界観を変えるアプリケーションを作成するための実際のオプションというよりも、興味をそそる概念のように見えます。そのため、Polymerチュートリアルを外部で作成（または検索）することは困難です。 Googleのドキュメントの。
ポリマーアーキテクチャ
今、私たちのガイドに。 Polymer.jsは、アーキテクチャ的に4つのレイヤーに分割されています。
ネイティブ：現在、すべての主要なブラウザーでネイティブに使用できる必要な機能。 基盤：ブラウザ自体ではまだネイティブに利用できない、必要なブラウザ機能を実装するポリフィル。 （このレイヤーが提供する機能がブラウザーでネイティブに使用可能になると、このレイヤーは時間の経過とともに消えていくことが意図されています。） コア：ポリマー要素がネイティブレイヤーとファンデーションレイヤーによって提供される機能を活用するために必要なインフラストラクチャ。要素：アプリケーションの作成に役立つビルディングブロックとして機能することを目的とした要素の基本セット。 以下を提供する要素が含まれています：ajax、アニメーション、フレックスレイアウト、ジェスチャーなどの基本機能。 複雑なブラウザAPIとCSSレイアウトのカプセル化。 アコーディオン、カード、サイドバーなどのUIコンポーネントレンダラー。
ポリマーアプリケーションの作成
はじめに、Polymer、その概念、およびその構造を紹介するのに役立つ記事とチュートリアルの記事がいくつかあります。 しかし、あなたが私のような人であれば、それらを調べて実際にアプリケーションを構築する準備ができていると、どこから始めればよいのか、どのように作成するのかがよくわからないことにすぐに気付きます。 私は今、プロセスを経てそれを理解したので、ここにいくつかの指針があります…
ポリマーウェブの開発は、要素の作成がすべてであり、要素の作成のみが目的です。 したがって、Polymerの世界観と一致して、私たちのアプリケーションは…新しい要素になります。 それ以上でもそれ以下でもありません。 ああ、わかりました。 それが私たちの出発点です。
Polymerプロジェクトの例では、アプリケーションの最上位要素に名前を付けます
ただし、次のステップでは、かなり多くの検討が必要です。 アプリケーションをどのようにコンポーネント化するかを決定する必要があります。 簡単なアプローチは、アプリケーション内のコンポーネントを視覚的な観点から識別し、Polymerでカスタム要素として作成することです。
たとえば、次の画面のアプリがあるとします。
トップバーとサイドバーのメニューは変更されず、アプリの実際の「コンテンツ」が異なる「ビュー」をロードする可能性があることを確認できます。
その場合、合理的なアプローチの1つは、
次に、ListViewとSingleViewという2つのメインビューを作成して、「コンテンツ」領域にロードします。 ListViewのアイテムについては、ItemViewを作成できます。
これにより、次のような構造が生成されます。
良いニュース
サンプルのPolymerアプリケーションができたので、「toptal-app.html」をインポートしてタグを追加するだけで、任意のWebページに挿入できます。
実際、そこにはポリマーパラダイムの力と美しさの多くがあります。 アプリケーション用に作成したカスタム要素（アプリケーション全体の最上位要素を含む）は、Webページ内の他の要素と同様に扱われます。 したがって、他のJavaScriptコードまたはライブラリ（Backbone.js、Angular.jsなど）からそれらのプロパティとメソッドにアクセスできます。 これらのライブラリを使用して、独自の新しい要素を作成することもできます。
さらに、カスタムコンポーネントは、他のカスタム要素ライブラリ（MozillaのX-Tagなど）と互換性があります。 したがって、独自のカスタム要素を作成するために何を使用するかは関係ありません。Polymerやその他のブラウザテクノロジと互換性があります。
したがって、カスタム要素サイトなどのフォーラムで新しく作成された要素を公開および共有する要素作成者のコミュニティの出現がすでに始まっているのは当然のことです。 そこに行って、必要なコンポーネントを取得し、アプリケーションで使用することができます。
一方で…
ポリマーはまだ十分に新しいテクノロジーであるため、開発者、特に初心者のアプリ開発者は、ポリマーがややもろく、見つけるのがそれほど難しくないラフなエッジがいくつかあることに気付く可能性があります。
サンプリングは次のとおりです。
- ドキュメントとガイダンスの欠如。
- すべてのPolymer.jsUIおよび非UI要素が文書化されているわけではありません。 それらの使用方法に関する唯一の「ガイダンス」は、デモコードである場合があります。 場合によっては、ポリマー要素のソースコードを参照して、それがどのように機能し、使用できるか/使用すべきかをよりよく理解する必要があります。
- 大規模なアプリケーションを編成する方法は完全には明確ではありません。 特に、要素間でシングルトンオブジェクトをどのように渡すことになっていますか？ カスタム要素をテストするには、どの戦略を採用する必要がありますか？ 現時点では、これらのタイプの問題に関するガイダンスはほとんどありません。
依存関係エラーとバージョン炎。 推奨されているようにPolymer.js要素をダウンロードした場合でも、同じ要素内の異なるバージョンの依存関係を指している依存関係エラーが発生する可能性があります。 ポリマーエレメントは現在開発が進んでいると理解されていますが、この種の問題は開発を非常に困難にし、開発者の信頼と関心を損なう可能性があります。
- モバイルプラットフォームでの問題。 モバイルプラットフォームでのPolymer.jsのパフォーマンスは、多くの場合、苛立たしいものと問題のあるものの間のどこかにあります。
- ライブラリ全体とポリフィル（gzip化なし）のダウンロードには時間がかかるため、使用するすべてのポリマー要素をダウンロードする必要があります。
- ポリフィル、ライブラリ、カスタム要素の処理は、モバイルプラットフォームではコストのかかる作業のようです。 ダウンロードが完了しても、数秒間画面が空白になることがよくあります。
- 特に、より複雑な機能（ドラッグアンドドロップやキャンバスへのレンダリングなど）の場合、デスクトップで正常に機能する機能が、モバイルプラットフォームでは正しく機能しないか、まだサポートされていないことがあります。 私の特定のケースでは、私が遭遇したそのようなフラストレーションの1つは、iOSでキャンバスにレンダリングすることでした。
- 不十分または紛らわしいエラー報告。 属性名のつづりを間違えたり、コアレイヤー自体に関連するものを壊したりすると、コンソールに2つのコールスタックを含む奇妙なエラーメッセージが表示され、問題の場所を特定するために調査する必要があります。 これを解決するのは簡単な場合もありますが、ソースを追跡できないため、エラーを回避するためだけにまったく異なる戦略を試す必要がある場合もあります。
結論
ポリマーは興味深い技術ですが、それは間違いなくまだ初期段階にあります。 そのため、大規模なエンタープライズレベルの本番環境に対応したアプリケーションの開発にはまだ適していません。 さらに、Polymer.jsWeb開発に固有のガイドやチュートリアルはあまりありません。
JavaScript中心のアプローチとDOM中心のアプローチのどちらが本当に根本的に優れているかについては、陪審員はまだ出ていません。 ポリマーはいくつかの説得力のある議論をしますが、反論は存在します。
おそらく最も注目に値するのは、Polymerは、DOMなどのブラウザーテクノロジを使用する上でかなりのレベルの専門知識を必要とすることです。 多くの点で、jQueryの前の時代に戻り、要素からCSSクラスを追加または削除するなどの簡単なタスクを実行するためのDOMAPIを学習しています。 これは確かに、少なくともある程度は、前進ではなく後退しているように感じさせます。
とはいえ、将来的にはカスタム要素がWeb開発の重要な部分になる可能性が高いため、今日のWeb開発者にとっては、後からではなく早めに飛び込むのが賢明でしょう。 また、これまでに独自のカスタム要素を作成しようとしたことがない場合は、Polymer（およびこのチュートリアル）から始めるのが賢明です。