AppGyverはSupersonicを発表した。これは、"真のネイティブパフォーマンス"を実現するAndroidとiOS用のハイブリットモバイルアプリをビルドするための新しいフレームワークだとAppGyverは言う。ハイブリットアプリ設計の新しいアプローチを採用したおかげだ。また、SupersonicはSteroidsに統合されている。Steroidsは、ハイブリットアプリのためのクロスプラットフォームIDEだ。
SupersonicはIonicのCSSフレームワークとCordovaの上に構築されるが、HTML5とネイティブコードを新しい方法で混ぜ合わせている。マルチページアプリと呼ばれるアーキテクチャだ。この方法はUIの性能とページの複雑さにおいて利点がある。AppGyverによれば、性能面で大幅な利点があるということだ。
ネイティブのUI要素を使うか、それともHTML/CSSの要素を使うかについてもSupersonicは独自のアプローチを採用している。ページの遷移、モーダル、ナビゲーションバー、タブバー、その他のUI要素は完全にネイティブで、ネイティブのユーザエクスペリエンスとパフォーマンスを保証する。
InfoQは、AppGyverの開発者支援部門の長であるHarri Sarsa氏に話を聞いた。
Supersonicの内部設計について詳しく教えてください。
ネイティブレベルでは、AppGyver Wrapperを使います。これは、独自のネイティブランタイムであり、Objective-CとJavaのコードで、HTML5のコンテンツの周りでアプリのバイナリが動作するようにします。少しチューニングされたCordovaが内部にあり、Cordovaのプラグインと完全に互換性があります。また、他のラッパーにはないような改善もなされています。ネイティブUIやナビゲーションとともにAPIが使えるようになっており、また、ファイルプロトコルではなく、内部のローカルホストサーバ経由でファイルを提供できます。
ラッパーの上には、Supersonicフレームワークがあります。Ionicから派生したCSSで素晴らしいデフォルト設定がされていますが、さらに重要なのは、ネイティブレベルにアクセスするためのJavaScriptのAPIやプロジェクトの構成があるということです。すべてのCordovaのコアAPIはアクセス可能です。そして、これはSupersonicだけ実現できることですが、ネイティブUIコンポーネントにもアクセスできます。例えば、"position: absolute"のdiv要素をヘッダに使う代わりに、ネイティブのナビゲーションバーを使います。HTML5のウェブコンポーネントを使って、宣言的なネイティブUIエレメントを実現しています。例えば、要素はウェブコンポーネントとして含まれており、ページ上でネイティブナビゲーションバーを表示します。
他にもSupersonicはフレームワークにとらわれません。なので、好きなフレームワークを使えます。私たちはAngularJSが好きなので、AngularJS向けのサンプルがたくさん含まれていますか。
すべての上部にSupersonic Dataがあります。これによって"3方向データバインディング"を実現します。ビューとコントローラとバックエンドサーバでデータの同期状態を保ちます。Supersonic DataはRESTのバックエンドを持ち、自由に開発するデータベースを提供します。
Supersonicのマルチページアーキテクチャの利点は何でしょうか。
モバイルアプリを構造化する方法はモダンなウェブアプリとは根本的に違います。モダンなウェブSPA(例えばGmail)のような複雑で変化し続けるUIではなく、ほとんどのモバイルアプリは一度にひとつのビューがあるだけです。ユーザはそれを遷移させます。完全なネイティブアプリケーションの場合、アプリの"ストーリーボード"を構築して、ネイティブナビゲーションスタックが新しいビューへの遷移や遷移履歴の処理、ビューの間のデータ共有、ビューでの状態維持を請け負います。
すべてのハイブリットラッパーはひとつのWebViewを使って構築されているので、IonicのようなフレームワークはSPAと同じアプローチ以外は取ることができません。ひとつのapp.htmlファイルを持ち、AngularJSや他のルーティングソリューションを使って、ファイルのDOMを操作してページ遷移やコンテンツの描画、履歴の維持を行います。
Supersonicの場合、アプリを複数のHTMLドキュメントに分割し、高速なネイティブナビゲーションを使っています。例えば、インデックスビューから別のビューへ遷移する場合、DOMが再描画されることはありません。例えば、cars/index.htmlというファイルがあり、車のリストを持っているとします。これがインデックスビューです。リスト上の車をクリックすうrと、インデックスビューのJSコントローラは異なるWebViewであるcars/show.htmlをネイティブナビゲーションスタックにプッシュします。それで、新しいビューがスクリーンにスムーズに表示されます。もとのindex.htmlはshow.htmlの下にあり、上位から状態を維持することができます。ネイティブのバックボタンによってすぐにもとに戻る。
同じやり方がドロワー/サイドメニュー、タブにも適用されています。重いDOMの再描画がないので、タブの切り替えは素早いです。これは、デバイスのGPUとUIエンジンが実現しています。Webkitの実装ではありません。
Supersonicのツーリングについて簡単に説明してください。
Steroidsという名前です。基本的には、Node.jsベースのCLIであり、新しいSupersonicプロジェクトを作成し、コードを生成し、ウェブインスペクタを立ち上げてデバッグに備え、iOSとAndroid向けのエミュレータを立ち上げるのに使います。また、Bowerとnpmを使って依存性を管理し、デバイスのログを表示します。このCLIはOS X、Windows、Linuxで動作します。
実際には、App StoreとGoogle PlayからダウンロードできるAppGyver Scannerを、CLIから起動できるSteroids Development Serverと一緒に使います。QRコードをスキャンすることでScannerをPCと接続し、ScannerはHTMLのコンテンツと構成をダウンロードして、デバイス上に表示します。このワークフローにすることで、XcodeやAndroid Studioを開くことなく開発ができます(iOSの開発をWindows/Linuxでできるのです)。ScannerにはAppGyver Wrapperのネイティブコードがすべて含まれているので、アプリはまるでスタンドアロンのコンパイルされたアプリのように動作します。
ローカルで開発した後、クラウドへアプリを配置し、Build Serviceへアクセスします。Build Serviceはスタンドアロンのバイナリをビルドし、アプリストアに提出できるようにします。
Supersonicは今後どのようになるのでしょうか。
将来は、XcodeやAndroid Studioを使ってローカルでビルドできるようになります。また、ドロップインログインビューのような Supersonic Dataの新しい機能も準備しています。プッシュ通知のサポートのような新しい機能とほかのフレームワークとSteroidsを合わせて使うためのサンプルも提供します。
長期的には、Supersonicを最も優れたハイブリッドフレームワークにしたいです。ネイティブアプリと区別のつかないクロスプラットフォームアプリができるようにしたいのです。ネイティブとHTML5を組み合わせるというユニークな方法で実現できると思っています。
Supersonicについて学習できるようにするために、AppGyverはユーザインターフェース、データバインディング、ツーリングについての動画を提供している。ドキュメントもある。