JavaScript依存性の反発：神話バストのプログレッシブエンハンスメント-jsチュートリアル-php.cn

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

コアポイント

AngularJSなどのクライアントフレームワークの上昇にもかかわらず、Progressive Enhancement（PE）は、広範なブラウザのサポート、メンテナンス、アプリケーションの将来の開発など、Web開発の問題を解決するための最良の選択肢のままです。
PEは、JavaScriptを無効にするユーザー向けではなく、特定のJavaScript機能が利用可能な場合にユーザーエクスペリエンスを強化することについてです。クライアントのフレームワークのように、視聴者についての仮定はありません。
PE批評家は、これは古いブラウザーをサポートすることを意味するとしばしば主張していますが、実際、古いブラウザにフォールバックを提供することは、その主な目標ではなくPEの利点です。
JavaScriptフレームワークは短期的な利益をもたらす可能性がありますが、訪問者の減少や長期的なメンテナンスの困難につながる可能性があります。それらは、アプリケーションを破ることなく最新のAPIを可能にするPEとは異なり、現在にしっかりと留まります。
プログレッシブエンハンスメントは、コンテンツ、レイアウト、および機能を分離してメンテナンスを容易にし、テストの負担を軽減し、さまざまなデバイスをサポートし、SEOとアクセシビリティを保証します。クライアント側のJavaScriptフレームワークの台頭にもかかわらず、このテクノロジーは依然として機能しています。

ルイは最近、フォーラムのトピックで「スクリプト依存関係のリバウンドにありますか？」：＆gt;ある程度、私たちはスクリプト依存関係のリバウンドにあると思います。

要するに

- 私は同意します。また、Webの専門家PPK（）、Jeremy Keith（）、およびJake Archibald（ クライアントフレームワークの急速な上昇にもかかわらず、JavaScriptフレームワークを使用するのに適したWebアプリケーションは比較的少ないです。

プログレッシブエンハンスメントは、広範なブラウザのサポート、メンテナンス、アプリケーションの将来の開発など、Web開発の問題を解決するための最良の選択肢のままです。

プロトタイプクライアントフレームワークは豊富なコンポーネントとショートカットを提供するため、ウェブサイトとアプリケーションをすばやくシミュレートします。
純粋なクライアントアプリケーションアプリケーションがシンプルで、最初のダウンロード以外のサーバーインタラクションを必要としない場合、JavaScriptフレームワークが適切な選択かもしれません（不要なコンテンツを削除できると仮定します）。
内部エンタープライズアプリケーション聴衆や使用しているデバイスを理解している場合、強制javaScriptは問題ではありません。 Angularはもともとエンタープライズアプリケーション向けに設計されていました。
細かいインターフェイスアクションゲーム、Googleマップ、ドキュメントを検討してください。 JavaScriptのない代替品の開発は無駄です。 GoogleはGoogleマップの基本的なHTMLバージョンを作成しましたが、実際には別のアプリであり、2010年に放棄されました。

他のケースはありますが、ほとんどの公開ウェブサイトやアプリケーションはこれらのカテゴリに分類されません。ただし、クライアントフレームワークを使用することを誰も止めませんが、ハンマーを持っていると、すべてが爪のように見えます。ルイをもう一度引用：＆gt;開発者は、実際の問題を解決するからではなく、まばゆいばかりの新しいツールを使用するためだけに使用しているようです。

漸進的な強化とは何ですか？

プログレッシブエンハンスメント（PE）はテクノロジーではなく、開発方法です。 2009年にいくつかのチュートリアルと例を書きましたが、この概念は2003年以来議論されています。基本的なユーザーエクスペリエンスレベルを構築することから始めて、ブラウザがサポートするときに、より高度な機能を追加します。論理の極端にPEを押してください：

純粋なHTMLアプリケーションを作成し、すべての重要な処理がサーバー側で行われます。任意のブラウザ、Lynx、IE1.0、またはブラウザで実行できます。
レイアウトを強化するためにCSSを使用します。ブラウザは理解できないプロパティを無視するため、CSSは準備ができています。メディアクエリや@supportsルールなどのオプションでさらに強化できます。このアプリはどこでも機能しますが、最新のCSS機能を備えたブラウザのエクスペリエンスが向上しています。
JavaScript Enhancementsを使用します。言語とAPIのサポートはブラウザごとに異なるため、JavaScriptは最も不安定なレイヤーです。実行されると仮定すると、使用する前に可用性をテストします。たとえば、CanvasまたはSVGがサポートされている場合、データテーブルを美しいチャートに変換できます。

すべてのブラウザは、処理できる最高のアプリを受信します。まったく同じエクスペリエンスを提供する2つのブラウザはない場合があります。モバイルファーストレスポンシブデザインと使用されていないオフラインの優先事項は、プログレッシブエンハンスメント技術の例です。 PEの批判をチェックしましょう。

神話：JavaScriptを無効にする人はいません

2人目の人がJavaScriptとは何かを知っています。ユーザーがJavaScriptを無効にすることを許可するブラウザはほとんどありません（簡単）

これは絶対に正しいです。

PE批評家は次のように結論付けました。

JavaScriptは、いつでもどこでも、いつでもアプリケーションに必要なレベルに到達することを想定することは危険です。誰もがJavaScriptを持っていますよね？これは示しています。プログレッシブエンハンスメントは、JavaScriptを無効にするユーザー向けではありません。特定のJavaScript機能が利用可能な場合、ユーザーエクスペリエンスを強化することです。 JavaScriptが無効になっている場合、アプリケーションは悪いインターフェイスを提供する可能性がありますが、ユーザーはを取得します。

神話：古いブラウザを使用している人はいません

「古い」とはどういう意味ですか？ほとんどの開発者にとって、それは12か月以上リリースされたブラウザです。誰もが最新の最高のアプリを使用できるわけではありません：

iPhone 5.0またはAndroid 4.0以下を使用している人は誰でも。

神話：プログレッシブエンハンスメントは抗JavaScript

です Webを含めることの基本的な利点を徐々に強化します。世界のどこでもネットワークデバイスで実行できるサイトまたはアプリケーションを開発できます。デバイスが優れているほど、ユーザーエクスペリエンスが向上します。クライアントフレームワークは、JavaScriptを絶対的な依存関係にします。 Webをエンコードしなくなりました。アプリケーションは、特定のランタイムエンジンの配信メカニズムとしてWebを使用します。ブラウザはオペレーティングシステムであり、更新はアプリケーションを破ることができます。

神話：プログレッシブエンハンスメントは、ユーザーとデバイスについて仮定します

PEは、

仮定を行っていないということです。あなたは何も想定していません - これはこのテクノロジーの核となる前提です。 JavaScriptフレームワークは、誰もが強力なデバイスで強力なブラウザを使用していると誤って考えさせます。以前にこれらの仮定をしました。これは、誰もがブロードバンドを使用していると仮定することとどう違うのですか？それとも、少なくとも960ピクセルの幅の少なくとも17インチの画面がありますか？それとも、誰もがIE6を今そして将来使用しますか？

神話：プログレッシブエンハンスメントとは、時代遅れのブラウザーのサポート

を意味します

徐々に強化された批評家は、古いブラウザでの作業にすべての時間を費やすと思います。実際、それは反対です。適切なフォールバックがすでに整っているため、古いブラウザに対処する必要はありません。古いブラウザをサポートすることは、ターゲットではなく、PE - の利点です。最悪のブラウザをサポートできますが、好きなベースラインを構築できます。たとえば、現在、AddEventListenerがほとんどのJavaScript実行の要件であるアプリケーションを開発しています。したがって、IE8以下は機能の拡張機能を表示できません。この問題を解決することはできますが、古いIEユーザーがいないエンタープライズアプリケーションであるため、投資する価値はありません。ただし、IE8ユーザーは引き続きシステムを使用でき、必要に応じてシステムを改善できます。

神話：JavaScriptフレームワークアプリケーションはクーラーです

PEテクノロジーを使用して、同じように見えるアプリケーションを作成できます。混乱の理由は、ほとんどのJavaScriptフレームワークが見栄えの良いさまざまな事前開発ウィジェットを提供するからです。これらの同じウィジェットは、徐々に強化されたアプリケーションで使用できますが、JSがなければ、基本的なHTMLの代替品に戻ります。 PEでは、ブラウザにまだ表示されていない最新のHTML、CSS、およびJavaScript APIを使用することもできます。 XMLHTTPREQUESTの最新の代替品であるFetch APIを検討してください。それは最小限にサポートしますが、XMLHTTPREQUESTまたはサーバーリクエストに戻ることができるので、問題なく使用できます。 JavaScriptフレームワークは、未来ではなく、現在のままです。神話：徐々に強化されたWeb開発を妨げます

または、より具体的には、クライアントフレームワークはテクノロジーの最前線にあり、ウェブを前進させます。申し訳ありませんが、これは幻想です。 AngularJSのようなフレームワークは魔法の特徴を実装しますが、より深く掘り下げると、HTML、CSS、JavaScript、およびDOM操作を使用しています。せいぜい、それは抽象化です。最悪の場合、それは気を散らすものです。クライアントフレームワークは、それを開発したブラウザと同じくらい優れています。 AngularJS 1.xがリリースされた場合、Object.observe（）やWebコンポーネントなどの機能が一般的ではなかったため、Angularjs 2.0は完全に書き直されています。フレームワークは、古いテクノロジーを使用することを強制しますが、実装を隠します。 PEを使用すると、アプリケーションを壊すことなく最新のAPIを使用できます。 Angular 1からアップグレードするのは幸運です...

神話：JavaScriptフレームワークにより、開発が容易になりますこの部分は正しいです - しかし、アプリケーションの構築を開始した場合のみ。初期開発時間を短縮する範囲のコントロールにアクセスできます。ただし、その後、フレームワークの範囲内に閉じ込められ、後で問題につながる可能性があります。アプリケーションがしばらく実行されており、顧客にサポートが必要であると仮定します

browserx

。主要な顧客によって使用されており、特に古いものではありません。開発時間は数日間になると予想されるかもしれませんが、JavaScriptフレームワークが互換性がない場合は不可能かもしれません。 PEテクノロジーを使用して開発されたアプリケーションの場合、この問題は既にブラウザをサポートすることはありません。大規模な書き直しなしでさらに強化を追加できます。

神話：プログレッシブエンハンスメントはワークロードの2倍です

これは批評家からの最も人気のある引用です。 PEと言う人は、過労している人だけです。最初からPEについて考えなかった場合、2倍の時間しかかかりません。 PEを既存のアプリケーションに再構築しようとすることは、特にJavaScriptに依存しているアプリケーションでは、失敗するように運命づけられています。検索クエリ結果のページングリストなど、簡単な例を考えてみましょう。最初のページはすべてのHTMLを返します。それは速いです、JavaScriptは何もする必要はありません。舞台裏では、データベースクエリを使用して、結果をHTMLテンプレートに挿入します。同じサービスをすばやく調整して、JSONデータとして結果を返したり、タイトルとフッターなしで結果を結果を返したりできます。ユーザーが「2ページ2」をクリックすると、2番目のページの結果が表示されます：

JavaScriptを使用すると、クリックをインターセプトしてAJAXテクノロジーを使用してページの結果を取得できます。 HTMLデータは、innerhtmlを使用してページに挿入できます。または、返されたJSONデータのテンプレートとして1ページを使用できます。
JavaScript、xmlhttprequest、またはfetchが使用できない場合 - またはajaxコールが失敗します - 2番目のページの完全なHTMLを要求できます。

これにはより多くの作業が必要ですが、作業の量の2倍ではありません。クロスブラウザーフォールトトレラントソリューションの恩恵を受けます。

神話：徐々に無意味に強化された - ウェブサイトの開発または絶滅

この議論の背後にあるロジックは、ウェブサイトが最終的に時代遅れになるということです。そのため、特定の時点で特定のテクノロジーをターゲットにするフレームワークを使用できます。そうだといい。コードが良い場合は、予想よりもずっと長く使用されます。誰もそれに触れたくないので、悪いコードはより長く生き残ります。ただし、再びプログレッシブエンハンスメントを使用して、Web以外の仮定は、クライアント/サーバーベースのHTMLベースのシステムとして継続することはありません。 Webは、アプリケーションを失敗させるために根本的に変更する必要があります。これはもはやWebではありません。

神話：プログレッシブエンハンスメントは、古い前任者が推奨する古い技術です

Quote Oddz：＆gt;クライアント側のJavaScriptフレームワークの急増により、他の「古い先輩」とともに少数派になりました。

はい、ありがとう！ JavaScriptのリバウンドは、かなり長い間ウェブ上で開発してきた人々が率いていました。私たちは皆、新しいテクノロジーを恐れ、時代に追いつくことができない頑固な人々ですか？多分。それとも、私たちの歴史的な間違いの多くからいくつかの教訓を学んだからでしょうか？ JavaScriptフレームワークは、おなじみの質問を提起します：

一部の人々は、
などのオンクリックハンドラーを使用していたようなHTMLと機能を混ぜ合わせます
特定のブラウザをターゲットにします。 の「閲覧するための最良の方法」の復活がありました...」メッセージとタグ。
彼らは今日のウェブについて仮定します。たとえば、JavaScriptはどこでも機能し、ページごとに2MBが合理的です。
彼らは将来の計画を持っていません。

JavaScriptフレームワークは、主にユーザーではなく開発者に利益をもたらします。彼らは、訪問者の減少と痛みを伴う長期的なメンテナンスを犠牲にして短期的な利益を提供することができます。そして、SEOを忘れないでください。 GoogleはJavaScriptページをインデックスしていますが、必ずしもすべての論理ブランチを追跡できるわけではありません。また、コードを注意深く記述しない限り、特定のURLにリンクすることも困難です。プログレッシブエンハンスメントは、Webの利点を補完します：

コンテンツ、レイアウト、および機能を分離して、メンテナンスを簡単にします

あなたは、ブラウザの代わりに、Webの防御的で耐性のあるデバイスに依存しないコードを書いています
さまざまなデバイスをサポートできます
1つの欠点のみ：多くの開発者がまだ進歩的な強化を信頼していないか理解していないことは明らかです。 JavaScript依存関係のリバウンドを長生きしましょう！

についての

FAQ（FAQ）

JavaScriptの依存とは何ですか？

JavaScript依存関係とは、JavaScriptコードが他のJavaScriptファイルまたはライブラリに依存して正常に実行されることを意味します。たとえば、JavaScriptファイルが別のファイルまたはライブラリで定義された関数または変数を使用する場合、そのファイルまたはライブラリに依存すると言われています。依存関係は、コードをより効率的かつ管理しやすくすることができますが、適切に管理されなければ、複雑さと潜在的な問題を導入することもできます。

JavaScriptの進行性向上とは何ですか？

Progressive Enhancementは、最初にコアWebコンテンツを強調し、次にその上により詳細で複雑なプレゼンテーションと機能の層を徐々に追加するデザイン哲学です。 JavaScriptのコンテキストでは、これはすべてのブラウザに基本的な機能を提供するコードを作成することを意味し、それをサポートできるブラウザに高度な機能を提供します。

JavaScriptの依存関係は、段階的な強化にどのように影響しますか？

JavaScriptの依存関係は、徐々に強化された実装を妨げる可能性があります。 JavaScriptファイルが、すべてのブラウザがサポートしているわけではない他のファイルまたはライブラリに大きく依存している場合、それらのブラウザに基本的な機能を提供しない場合があります。これは、すべてのユーザーにコア機能を提供することを目的とするプログレッシブエンハンスメントの原則に反します。

漸進的な強化の利点は何ですか？

プログレッシブエンハンスメントは多くの利点を提供します。ブラウザの機能に関係なく、すべてのユーザーがWebページのコアコンテンツと機能にアクセスできるようにします。また、セマンティックHTMLや懸念の分離などの優れたWebプラクティスを促進し、JavaScriptやCSSの潜在的な問題に対してWebサイトをより抵抗性にします。

JavaScript依存関係の欠点は何ですか？

JavaScript依存関係はコードをより効率的かつ管理しやすくすることができますが、複雑さや潜在的な問題をもたらすこともあります。依存関係が適切に管理されていない場合、膨張コード、読み込み時間の遅い、異なるファイルやライブラリ間の競合などの問題を引き起こす可能性があります。また、コードを維持してデバッグすることを難しくすることができます。

JavaScript依存関係を効果的に管理する方法は？

JavaScript依存関係を効果的に管理するためのいくつかの戦略があります。これらの戦略には、すべての依存関係がNPMまたはYARNを使用して、依存関係を更新するのに役立つパッケージマネージャーを使用する可能性のあるロールアップのようなモジュールバンドラーを使用します。。

JavaScriptコードでプログレッシブエンハンスメントを実現するにはどうすればよいですか？

JavaScriptコードにプログレッシブエンハンスメントの実装には、コードの作成、すべてのブラウザーに基本的な機能を提供し、それをサポートできるブラウザに徐々に追加の機能を追加することが含まれます。これは、機能検出を使用して、ブラウザが使用する前に機能をサポートしているかどうかを確認し、特定の機能をサポートしないブラウザでコードをエレガントに格下げできるようにすることで実行できます。

JavaScript依存関係とクライアント側JavaScriptフレームワークの関係は何ですか？

クライアントJavaScriptフレームワークは通常、JavaScriptの依存関係に大きく依存しています。これらのフレームワーク（React、Angular、Vue.jsなど）には、コードが依存できる多くの組み込みの機能とライブラリが含まれています。これにより、開発がより速く簡単になりますが、これらの依存関係が適切に管理されていない場合、潜在的な問題につながる可能性があります。

クライアントJavaScriptフレームワークにおけるプログレッシブエンハンスメントの役割は何ですか？

プログレッシブエンハンスメントは、クライアント側のJavaScriptフレームワークで重要な役割を果たすことができます。これらのフレームワークには、開発者がサーバー側のレンダリングやコードセグメンテーションなどの増分強化を実装できるようにする機能がよく含まれています。これらの機能は、ブラウザの機能に関係なく、Webアプリケーションがすべてのユーザーにコア機能を提供することを保証するのに役立ちます。

私のWeb開発プロジェクトでJavaScriptの依存関係と進歩的な強化のバランスを取る方法は？

バランスの取れたJavaScriptの依存関係と進歩的な強化には、慎重な計画と優れたコーディングプラクティスが必要です。コードの依存関係を最小限に抑え、それらが適切に管理されていることを確認する必要があります。同時に、あなたのWebアプリケーションがすべてのユーザーにコア機能を提供することを保証するために、段階的強化を達成するために一生懸命働く必要があります。これには、機能検出、エレガントな格下げ、およびその他のテクノロジーの使用が含まれる場合があります。

以上がJavaScript依存性の反発：神話バストのプログレッシブエンハンスメントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。