フロントエンド技術を学ぼう 3-14.アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)

2020年7月31日金曜日

Front-end Developer Handbook JavaScript Node.js Tools

t f B! P L

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第66回は Part III: Front-End Dev Toolsから、14項のApp Frameworks (Desktop, Mobile, Tablet, etc.) Toolsを紹介します。

アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)の説明です。


アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)

フロントエンドアプリケーションフレームワーク


アドバイス

あなたがフロントエンドやJavaScript アプリケーションの開発に慣れていない場合は、RiotまたはVue.jsから始めるのが良いでしょう。そしてReact。それからAngular 2EmberAurelia、これらを触るようにしましょう。

データのやり取りが最低限のシンプルなWebサイト(主に静的コンテンツのWebサイト)を構築する場合は、フロントエンドフレームワークを使用するべきではありません。

GulpのようなタスクランナーやjQueryを使えば多くの作業を行うことができ、不要な複雑な学習やアプリケーションフレームワークツールの使用を避けることができます。

Reactよりも小さいものを探している場合、Preactを検討してみてください。Preactは、React(またはMithrilのようなライブラリ)の中核的価値を可能な限り小さなコードで再作成しようとするもので、ES2015をサポートしています。現在、ライブラリは約3KB(gzipで縮小されたもの)です。

ReactとAngluar 2のどちらかを決めることが出来ない場合はAngular 2 vs React:The Ultimate Dance Offを読んでみましょう。


ネイティブ ハイブリッド モバイル WebView フレームワーク

これらのソリューションは、通常ネイティブAPIへのブリッジとして、Cordovacrosswalk、またはカスタムWebViewを使用します。


ネイティブ ハイブリッド モバイル WebView 環境/プラットフォーム/ツール

これらのソリューションは、通常ネイティブAPIへのブリッジとして、Cordovacrosswalk、またはカスタムWebViewを使用します。


ネイティブ デスクトップ WebViewア プリケーションフレームワーク


任意のプラットフォームアプリケーションフレームワーク

これらのソリューションは、アプリケーションを複数のプラットフォームとデバイスにまたがって構築します。


ネイティブモバイルアプリケーションフレームワーク(JavaScript ネイティブアプリケーション)

これらのソリューションは、実行時にJSエンジンを使用してJSを解釈し、それをネイティブAPIに変換します。ブラウザエンジンやWebViewは使用されません。UIは、ネイティブUIコンポーネントから構築されます。


リファレンス


パフォーマンス


補足

2017年はコンポーネントベースのUIアプリケーションを構築するために、infernoSvelteNXから目を離さないでください。


調査結果

以下の画像は、2016 Frontend Tooling Survey(開発者4,715名)および2016 State of JS Survey(開発者9,307名)からのものです。

Image source: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results


Image source: http://stateofjs.com/


Image source: http://stateofjs.com/


QooQ