ハイブリットアプリ開発環境とフロントエンド技術 - ntuf/Tips GitHub Wiki

■ハイブリッドアプリ フレームワーク
 (クロスプラットフォームとも)

 ●WebViewを使用したフレームワーク
 ・Cordova(旧PhoneGap)
 ・Electron :製造元GitHub
   主にデスクトップアプリを開発するために利用される
 ・Intel XDK 
   言語:HTML,Javascript

 ●Webviewを使わない
 ・Xamarin : 製造元マイクロソフト(オーナー)
   言語:  .NET
   ・デスクトップアプリに対応する
 ・React Native : 製造元FaceBook
   言語:  Javascript(Webviewではなくネイティブで表示)
   ・開発の方法はほとんどReactと変わらないので、
    Reactを使ったことのある人にとって学習コストが低い
   ・Instagram、AirBnb、Uber、Skypeなどでも使われています。
 ・Flutter: 製造元Google
   言語:  Dart(Java,Javascriptに近い)

Q:React NativeやFlutterはWebにも対応らしいが、
  どういうことか?→React Native for WebとかFlutter for Webなどあるらしい。
 JSX や XAML などの DSL を使用する場合もあります。
 React Native では画面のデザインは JSX を使用します。
 JSX
 Javascroptの拡張言語Dart
 Googleによって開発されたウェブ向けのプログラミング言語
 JavaScriptの代替として考案XAML
 Microsoftによって開発された、 アプリケーションのUIを記述するための言語仕様

■フロントエンドの技術 最近のJSフレームワークとかライブラリとか
angular:JSフレームワーク 
  JSフレームワークとは:ライブラリもあるが設計もできる
react :JSライブラリ 
jQuery:JSライブラリ 開発元:jQueryチーム
vue.js 他のJavaScriptフレームワークよりも学習コストが低い

■React と Angular を比較
・Angular(開発元:google)
  機能:最初から多機能
     機能の全部入りだが、いらないものもある
  ・TypeScriptが使える
   新参者には分かりにくいため、Angularを導入する壁はReactよりも高い
・React(開発元:Facebook)
  自分で入れないといけない

■サーバーサイドJS
node.js
バックエンドが開発できる
ruby on rails の動作環境作るときに入れた。
必要なのか?

かつては、Webアプリを作るフレムワークとしては Rails が最も優秀でした。
それは、ブラウザー側のJavaScriptを多用したWebサイトを作成すると、
GoogleのBotが認識できないという問題があったため、サーバーサイドでHTMLにレンタリングする必要がありました。
それを最も簡単で効率よくできるのがRailsです。
しかし、最近のGoogleのBotは、
JavaScriptで作ったサイトでも問題なく認識してくれるようになりました。

RailsよりもNode.js を学んだ方がいい
また、サービスを作りたい場合、これからは機械学習やデータサイエンスに関連することを活用することが多くなると思います。
それであれば、Rails を学ぶのに時間を掛けるより Python を学習した方がいいと思います。

■Angular でMVCってどういうことなのか?
「クライアントMVC」とかいう用語がある

クライアントサイドMVCの設計メモ(例)
Model
 DOMは触らないこと。
  DOM:JavaScriptでhtmlの要素を操作するための仕組み
 クラスと値(プロパティ)を定義する。
 プロパティ更新メソッドを定義する。
 プロパティ更新をモデル間で伝搬させたい場合は購読者モデルを利用する。
 プロパティ更新後にビュー更新メソッドをコールする。
View DOMの操作を行う。
 イベントハンドラを登録する。
 ビューしか更新しない場合は、イベントハンドラに登録するメソッドもビューに定義する。
 モデルからコールされるビュー更新メソッドを定義する。
Controller
 ビューのイベントハンドラに登録したメソッドを定義する。
 そのメソッドからモデルのプロパティ更新メソッドをコールする。

⚠️ **GitHub.com Fallback** ⚠️