クロスプラットフォームフレームワークは、最も魅力的なWeb開発エクスペリエンスを提供します
現在使用しているWebサイトを含め、現在のWebサイトは、HTML、JavaScript、およびCSSで記述されています。あなたはおそらくそれを読んで、よく考えます、ええ、それは明らかに明白です。これらの3つのテクノロジーを使用せずにWebサイトを作成するように言った場合、おそらくいくつかの質問があります。
そして、まだ、歴史、我々きた時間の経過を通じて、このスペースでD多くの選手。Flash、Silverlightがあります。これは、開発者が別のテクノロジーを使用してWebサイトを作成できるようにするために、ブラウザー市場の一部を削ぎ落とそうとしたすべての競合テクノロジーです。しかし、それらのどれも実際に離陸したことはありません。では、読者の皆様、私があなたのところに来て、この分野に再び競争相手がいる可能性があるとあなたに言うことは、どうして可能でしょうか？特に、文字通り、このスペースの他のプレイヤーは、何年もの努力にもかかわらず、どこにも行っていませんか？
さて、これらの過去の試みに共通していたこと、すなわち：
- 彼らは実行するためにブラウザプラグインを必要としていました。通常、ターゲットプラットフォームで実行するには、プラットフォーム固有のブラウザプラグインが必要です。Silverlightはこの良い例です。当時、サイトはSilverlight（Linuxでは利用できませんでした）に依存していたため、Linuxを使用する人々はNetflixを視聴できませんでした。確かに、オープンソースの代替手段はありましたが、ファーストパーティはありませんでした。
- 彼らはセキュリティの脆弱性を導入しました。Flashはこれで悪名高い（1,000を超える既知の脆弱性がある）。ブラウザはコンテンツを表示するためにプラグインをロードする必要があり、その時点では、プラグインはホストコンピュータに完全にアクセスできるため、ブラウザのセキュリティ保護は重要ではありませんでした。
- パフォーマンスは純粋なHTMLほど良くありませんでした。プラグインを読み込んでテキストを表示する方が速いかどうかという点では、プラグインを読み込んでコンテンツを表示するよりも、生のHTMLとCSSで行う方が常に高速でした。
- HTML5が登場し、CSSが改善されました。突然、美しい体験を生み出すことは不可能ではありませんでした。さらに良いことに、標準を嫌う、奇妙なハックを使用する、または同等のCSS（Internet Explorerなど）の代わりにベンダー固有の実装を使用するブラウザーは削除されました。
これらすべてのことにより、ネイティブHTMLで新しいWebアプリを簡単に作成することができました。 結局のところ、Webエクスペリエンスの作成に使用したテクノロジーが非推奨になり、セキュリティ修正の受信が停止した場合、サポートされている新しい言語でアプリを最初から書き直す以外に選択肢はありません。しかし、そもそもどうやってここにたどり着いたのでしょうか。HTMLは、今日の繁栄しているインターネットでどのようにしてそのような主力になったのでしょうか。
新時代の幕開け
1991年8月6日、ウェブは世界に向けて公開されました。その後、最終的にはいわゆるドットコムバブルが行き来しました。ウェブが1991年に公用にのみ登場し、9年後にドットコムバブルが崩壊し、驚異的な1.7兆ドルの費用がかかったことを少し考えてみてください。これは、ドットコムバブルのコストが同じ年の米国のGDPの約15％であることを意味します。
それはウェブがますます正式になり始め、私たちがウェブサイトを書く方法がより標準化されてきた頃であるため、私たちは歴史のその部分にいます。時間の経過とともに、使用できるHTML4のような標準が得られました。これらの標準により、世界の一部で作成したHTMLが、すべてではないにしてもほとんどのHTMLインタープリターで機能することが保証されました。カスケードスタイルシート（CSS）も1996年に発行され、その1年前にJavaScriptも登場しました。JavaScriptやCSSのないWebサイトを見たり使用したりすることを想像できますか？それは楽しい経験ではないでしょう、それは確かです。
しかし、歴史のすべてを通して、ウェブに関するいくつかのことは同じままでした。公平を期すために、多くのことを行う必要がありました。HTML標準に重大な変更を加えることは、非常に正当な理由がない限り決して行わないため、将来のバージョンでWebがどのように機能するかについて大きな範囲を変更することはおそらくありません。 。これにより、今日のWebが残りましたが、これには何が含まれますか？
ドキュメント
ウェブが最初に誕生したとき、人々は今日のようにアプリを使用していませんでした。シンクライアントとして機能し、物理接続のもう一方の端にあるメインフレームへの物理接続を提供する端末を使用したことを覚えている人もいるかもしれません。人々が持っていた「アプリ」（あなたがそれと呼べるなら）は、画面上のテキストの行にすぎませんでした。人々は物事を文書として、彼らが熟読できる物理的な紙片として扱うことに慣れていました。HTMLページの基本がHTMLドキュメントを作成することであることは当然のことです。JavaScriptを使用したことがある場合は、のような関数に精通しているはずdocument.getElementById()です。Webページで行うことはすべて、ドキュメントを作成してから変換することです。
従来、ほとんどのWebページは高すぎて、1つのビューポートに収まりません。したがって、ユーザーは指でページをスワイプするか、マウスでスクロールする必要があります。私が今日使用しているウェブサイトがユーザーのビューポートにきちんと収まるとは思えないので（確かにこのdiatribeではありません）、開発者は常にページの一部が上または下にあることが保証されます。ユーザーが現在自分のページを見ていた場所。
しかし、それでも、Webページの特定の部分を特定の位置に維持したり、特定の方法で配置したりする必要があります。positionCSSのようなものを使用して、要素の配置場所を制御し始めます。たくさんのCSSプロパティ（正確には520）があり、その名前が示すように、これらのスタイル は子要素にカスケードされます。ドキュメントの特定の部分を特定の方法で表示しようとすると、かなり混乱する可能性があります。Angular Materialのような既存のスタイリングフレームワークを使用している場合は、組み込みのCSSをオーバーライドして特定の外観を実現し始めると、かなり熱狂的になります。CSSを使用すると、を使用してこれをオーバーライドできます!override、しかし、あなたがそれを始めたら、戦いは大部分失われます。これを読んで自分で考えているなら「何？この男はCSSで絶望的だと思われます。」それなら大丈夫です。その点であなたと戦うつもりはありません。しかし、デザイナーが特定の外観を追いかけている場合、CSSはかなり複雑になる可能性があります。
言語を学ぶ
シンプルなウェブサイトを作成するには、3つの異なる言語にまたがる必要があります。これは、純粋にウェブサイト自体のためです。それがHTML、JavaScript、CSSです。あなたのウェブサイトは見た目も感じも素晴らしくなければなりません、そしてあなたがパフォーマンスの良いJavaScriptを書く方法を知らないか、あなたのCSSスタイルが悪いなら、それはそれをすることができません。
あなたが実際にあなたのウェブサイトに何かをさせたいのなら、あなたはAngularやReactのようなフレームワークを使うかもしれません。npmを介してパッケージを取り込み始めると、アプリのサイズが大きくなり始めます。そのため、webpackなどのバンドラーを使用して、すべてのパッケージをまとめ、適切に縮小します。Webpackはそれ自体がトピックです（そしてそれ自体が大きなトピックです）が、検討する価値のあるトピックであり、Webアプリの構築のかなりの部分を形成します。
バンドルと転覆
Webサイトを作成し、パッケージを作成したら、バンドラーを使用してクライアントアプリをバンドルし、ブラウザーで機能することを確認する必要があります。使用しているブラウザによっては、ユーザーのブラウザが実際にWebサイトを使用できるように、特定の機能を「シム」する必要もあります。TypeScriptのような言語を使用している場合、webpackもこの言語からJavaScriptに変換されます。これについて本質的に悪いことは何もありませんが、それは非常に複雑で、多くの可動部分があります。Webサイトが壊れた場合、コードを台無しにしましたか、ミニファイによってコードが壊れましたか、webpackに適切に含まれていませんでしたか、または変換プロセスで問題が発生しましたか？これらの複雑なパイプラインは、アプリの問題の根本原因をデバッグまたは見つけるのに困難をもたらす可能性があります。
Flutterはどのように優れていますか？
Flutterについて聞いたことがあるなら、電話アプリ開発の文脈で聞いたことがあるでしょう。では、いったいどのようにWebサイトに適用されるのでしょうか。通常のHTMLWebページでは、ページをドキュメントとして扱います。ただし、Flutterでは、「ページ」（またはユーザーが操作するもの）は実際にはHTMLキャンバスに描画されます。Flutterは実際には、画面に描画されるすべてのピクセルを制御し、HTML、JavaScript、またはCSSを使用してその外観やロジックを定義することはありません。（技術的に言えば、ネイティブDartコードはを介してJavaScriptにトランスパイルされますdart2jsが、実際にはビジネスロジックはJavaScriptで記述されていません。）
あなたはおそらくその文で憂慮すべき2つのことを拾いました。まず、HTMLはありません。次に、すべてをキャンバスに描画します。わかりました—奇妙に聞こえますが、少なくともキャンバスに直接描画する場合は、あまりパフォーマンスが良くありません。しかし、これについてもう少し掘り下げてみましょう。
ドキュメントではなくキャンバスに描画する
最初のポイントは、Webページの作成にHTMLを使用しておらず、ドキュメントへの書き込みも行っていないということです。一見すると、これは完全な異端です。しかし、HTMLでWebページを開発するとき、正確には何をしているのでしょうか。さて、この記事の前半で説明したように、ユーザーのデバイスのビューポートには大きすぎるドキュメントを作成すると、ユーザーはスクロールします。このページで今読んでいるのは、ドキュメントの高さがビューポートの高さよりも高いことです。そして、あなたはコンテンツをスクロールしています。
あなたがそれについて考えるとき、コンテンツが垂直方向に大きすぎて、ユーザーがそれをスクロールしなければならないことを期待するために、ユーザーインターフェースを設計するこの種の奇妙な方法ではありませんか？ユーザーに上から下ではなく左から右にスクロールさせたい場合はどうなりますか？通常のウェブページで表現するのは特に簡単ではありません。
Flutterでは、コンテンツの特定のビットを垂直方向にスクロール可能ではなく水平方向にスクロール可能にしたい場合は、ウィジェットをでラップするのと同じくらい簡単SingleChildScrollViewです。スクロール自体の方向も、垂直軸と水平軸のどちらでスクロールするかを問わず、同じように簡単に指定できます。
Flutterは、ドキュメントを画面に描画するのではなく、個々のウィジェットにページをレイアウトするという概念に基づいているため、開発者は、アプリケーションのレイアウト方法をより正確に制御できます。
1つの言語にこだわる
前述のように、優れたWebサイトを作成するには、HTML、JavaScript、およびCSSを知っている必要があります。また、知識がこれらの言語間で転送されず、たとえば、JavaScriptの知識をHTMLで再利用できないことも意味します。HTMLは純粋にマークアップ言語であり、CSSは純粋にスタイリング構文であり、JavaScriptは純粋にプログラミング言語です。これらのオプションには型チェックなどが含まれていないため、CSSを完全に二段ベッドにすることができ、ユーザーがWebページを使用しようとするとサイレントに失敗します。
Flutterは言語としてDartを使用し、アプリケーションのルックアンドフィールとビジネスロジックはすべてDartで記述されています。Dartには静的型チェックが付属しており、nullの安全性が間もなく開始されるため、アプリの視覚的な説明、アプリスタイルの提供、アプリのビジネスロジックの制御など、アプリ内のすべてのコード行が完全に型指定されます。 -安全。
アプリのレイアウトが簡単
大まかに言えば、私たちはWebサイトを使用して、別のソースからのデータを表示します。そのソースがデータベース、API、またはその他のものであるかどうかに関係なく、表示したいデータになります。APIから返されたオブジェクトの配列があり、それらを表示するためにAngularのようなものを使用していると想像してください。通常、これらのオブジェクトをバッキングコンポーネントにロードしてから、を使用*ngForしてオブジェクトを反復処理します。あなたはおそらくそれをに添付するでしょうdiv。ただし、箱から出してすぐdivに、スタイルが設定されていない場合は、かなりわかりやすく見えます。そのリストの項目を列または行に表示したい場合は、CSSまたはフレックスボックスを使用してそれを実現する必要があります。
逆に、Flutterでは、オブジェクトの配列を受け入れるプロパティを持つColumnまたはを使用して、子をレイアウトします。それについて考えるとき、ほとんどの場合、オブジェクトの配列を行（並べて）または列（互いに下に）に配置する必要があります。これがあるので、リスト内の個々のアイテムのスタイル設定に進む前に、必要な視覚的レイアウトをより迅速に取得できます。私の経験では、これにより、最終結果を損なうことなく、サイトのスキャフォールディングとプロトタイピングを迅速に行うことができます。Rowchildren
ビューポートのすべてのピクセルを制御する
Flutterはすべてのピクセルを画面にレンダリングするため、デザイナーや開発者は、アプリやエクスペリエンスをどのように見せたいかを正確に制御できます。画面にすべてのピクセルをレンダリングすると、パフォーマンスが大幅に低下するように聞こえますが、誤解しないでください。最近の生のHTMLのレンダリングほど高速ではありませんが、GPUで高速化されたキャンバスなどがパフォーマンスを向上させています。範囲。従来、HTMLでWebページを設計するということは、ターゲットにしているさまざまなブラウザーを考慮に入れる必要があることを意味していました。ただし、Fluttersの場合、Text特定のフォントでウィジェットをレイアウトするため、Flutterがその特定のウィジェットのピクセルごとの外観を制御しているため、どこに表示されても同じように見えます。
さようなら、webpack！
FlutterはDartを使用するため、Flutterアプリがターゲットプラットフォーム用にコンパイルされると、すべての依存パッケージ（これもDartで記述されています）もJavaScriptに変換されます。Dartはタイプセーフな言語であり、リフレクションをサポートしていません。そのため、コンパイラーは、アプリが何を呼び出し、何を呼び出さないかをより正確に把握できます。これにより、アプリのツリーの揺れと縮小が改善されます。ウェブ用のFlutterアプリを構築する場合、webpackは必要ないため使用しません。これは、Flutter自体にとって非常に強力なケースです（とにかく私の考えでは）。webpackには何の問題もありません。これは高品質のソフトウェアです。しかし、それはすでに複雑なパイプラインの複雑なツールです。
しかし、私たちはまだそこにいるわけではありません
Webには、見栄えのするWebページ、ゴージャスなアニメーション、美しい体験以上のものがあります。本当にそれ以上のものが必要です。あらゆるタイプの検索エンジン最適化（SEO）を実行するために、検索エンジンがWebページをスクレイピングできるように、サーバー側レンダリング（SSR）が必要です。現時点では、Flutter Webサイトは検索エンジンではなく、ユーザーのみが解釈できるため、ユーザーがWebサイトで情報を検索および検索する方法に大きな影響を与えます。（人々はこの問題についてそれをハッシュしている、そしてそれは近い将来に来る解決策があるようには思われない）。
すべてをキャンバスに描画することもパフォーマンスに影響しますが、これらはあなたが思うほど悪くはありません。私が作ったテストアプリのビジュアルエフェクトを多用して、そしてそれは私のMacBookに近い60fpsの時に実行されます。シートを画面上にドラッグしても問題なく機能し、背後の画像のぼかしが徐々に増加します。私は決してダートの専門家ではないので、このプロセスをさらに最適化できることは間違いありません。
したがって、Flutterが主流のWeb開発で検討される前に、Flutterを改善する必要のある重要な領域がいくつかあります。しかし、ちょっと考えてみてください。Flutterが実際に登場したのは過去2年間だけであり、Flutterがすでに備えているパフォーマンスと機能セットは驚くべきものです。
では、パフォーマンスの高いWebサイトを作成し、1つの言語を使用して、Webアプリのビジネスロジックを設計、スタイル設定、および作成できるとしたら、どうなるでしょうか。webpackが開発パイプラインに不要になった場合はどうなりますか？そして、時間内に、サーバー側のレンダリングと、従来のHTMLベースのWebサイトで今日持っているすべてのSEOの良さを手に入れることができたらどうでしょうか。
あなたがそれをすべて持っていれば、Flutterはウェブに勝つことができます。