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

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

www.mojage.club

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

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

Sponsored Link

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

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

アドバイス

あなたがフロントエンドや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/