Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。
アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)の説明です。
アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)
フロントエンドアプリケーションフレームワーク
- AngularJS (Angular 1.x.x) + Batarang
- Angular (Angular 2.0.0 +) + angular-cli
- Aurelia + Aurelia CLI
- Ember + embercli + Ember Inspector
- Polymer
- React + create-react-app + React Developer Tools
- Vue.js + vue-cli & Vue.js devtools
- Riot
アドバイス
あなたがフロントエンドやJavaScript アプリケーションの開発に慣れていない場合は、RiotまたはVue.jsから始めるのが良いでしょう。そしてReact。それからAngular 2、Ember、Aurelia、これらを触るようにしましょう。
データのやり取りが最低限のシンプルな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へのブリッジとして、Cordova、crosswalk、またはカスタムWebViewを使用します。
ネイティブ ハイブリッド モバイル WebView 環境/プラットフォーム/ツール
これらのソリューションは、通常ネイティブAPIへのブリッジとして、Cordova、crosswalk、またはカスタムWebViewを使用します。
- Adobe PhoneGap [$]
- AppBuilder [$]
- cocoon.io [無料~有料]
- ionic hub [無料~有料]
- kony [$]
- Monaca [$]
ネイティブ デスクトップ WebViewア プリケーションフレームワーク
任意のプラットフォームアプリケーションフレームワーク
これらのソリューションは、アプリケーションを複数のプラットフォームとデバイスにまたがって構築します。
ネイティブモバイルアプリケーションフレームワーク(JavaScript ネイティブアプリケーション)
これらのソリューションは、実行時にJSエンジンを使用してJSを解釈し、それをネイティブAPIに変換します。ブラウザエンジンやWebViewは使用されません。UIは、ネイティブUIコンポーネントから構築されます。
- NativeScript
- React Native
- tabris.js [無料~有料]
- trigger.io [$]
- weex
リファレンス
パフォーマンス
補足
2017年はコンポーネントベースのUIアプリケーションを構築するために、inferno、Svelte、NXから目を離さないでください。
調査結果
以下の画像は、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/
0 件のコメント:
コメントを投稿