NavyJS & NavyCreator

Web application framework for mobile & IDE.

Download v0.0.1 (Mac OSX) Source on GitHub

Overview

NavyJSは「ブラウザをアプリケーションプラットフォームとすること」目的に開発されています。 そのためには再利用可能なUI部品、アセットの管理、画面のライフサイクルなどのアプリケーションを開発する上での基本的な機能をフレームワークとして提供する必要があると考えています。 また画面レイアウトを効率良く作成するためにはGUIによる開発環境も必要となってきます。 これらの機能と環境を1つのフレームワークとして提供しているのがNavyJSとNavyCreatorです。

しかし現状はこのコンセプトが世の中に受け入れられるのか?実現可能なのか?を確かめるために最小限の機能を持った フレームワーク(コンセプトフレームワーク)として提供することを直近のゴールとしています。


NavyJS

SPA(Single Page Application)、View、アセットなどの仕組みを提供するモバイル用のWebアプリケーションフレームワークです。 フロントエンド開発者はNavyJSが提供するAPIを通してアプリケーションを開発することになります。エディタはもちろん開発者が好みのもので開発することが可能です。

現在は「Chrome for Android」「Mobile Safari」と開発時の確認用として「Google Chrome」に対応しています。

NavyCreator

GUIでUI部品を配置したり、大きさを変更したり、プロパティを設定することで画面レイアウトをします。 またアプリケーション中で使用されるアセット(JS/レイアウト/画像)の定義ファイルを管理します。 開発したアプリケーションはサーバにアップロードすることなくローカルのGoogle Chromeを使うことで動作確認を行うことが出来ます。

現在は「Max OSX」にのみ対応しています。

NavyJS

NavyCreator

Feature

View

これまでHTMLでUI部品を実現する場合、JavaScript/HTML/CSSを組み合わせて開発者自身が作成してきました。 そこでNavyJSではこれらのJavaScript/HTML/CSSをパッケージングし、Viewと呼ばれる再利用可能なUI部品を提供します。 Viewを継承し具体的な機能を持つボタン、タブ、リストなどが存在します。

Layout

画面上に配置するViewの位置、サイズ、プロパティを定義したファイルがLayoutです。 このレイアウトファイル(JSON)をNavyJSが読み込むことでブラウザ上にHTMLを構築し画面を描画します。 レイアウトは他のレイアウトを読み込むことが可能となっているので、レイアウト自体も再利用できます。 レイアウトはNavyCreator(GUI)を使って作成するために開発者が直接レイアウトファイルを記述することはありません。


SPA

NavyJSはSPA(シングルページアプリケーション)での開発が前提となっており、遷移時に動的にレイアウトを読み込み画面を構築します。 また画面単位で独立した状態を保持し、画面間でのデータの受け渡しも可能になっています。 画面はNavyJSにより管理され、ライフサイクル(生成、表示、非表示、破棄)イベントを通して処理を実装することになります。

Asset

アセット(JS/レイアウト/画像)をブラウザに保存することでネットワークアクセスをせずにアセットを利用することができます。 Webサーバ上で新しいアセットが公開されるとアセットの定義ファイルを元に差分更新することができます。

注意: 現在、画像の保存にはブラウザキャッシュを利用しているため、サーバ側での適切なレスポンスヘッダの設定が必要になります。

Architecture

System Structure

開発者はアプリケーションに必要なJavaScript / Layout / Imageをアセットとして作成します。 そしてアプリケーションが起動するとNavyJSは画面表示に必要なアセットをアセットの管理機構から取得します。 レイアウトとJSの取得が完了すると、画面の表示に必要なインスタンスを生成し画面を表示します。 画面はScene/Pageという単位で構成されており、ユーザはこのScene/Pageを見ることになります。

View Hierarchy

画面に表示される全ての表示要素はViewを継承しており、Viewの階層構造になっています。 Rootは端末の画面上に常に表示され、複数のSceneを持つことができます。Sceneから別のSceneに遷移することができます。 例えばログイン画面からメイン画面への遷移に使われることを想定しています。 Sceneは複数のPageを持つことができ、Sceneと同じくPageも別のPageに遷移することができます。この場合、同じScene内での画面遷移になるので、 Sceneに表示されている要素は常に画面上に表示され続けます。 PageはView(画像、テキストなど)やViewGroup(タブ、リストなど)を任意の数だけ持つことができます。

Life Cycle

Pageはライフサイクルを持っており、生成されてから破棄されるまでにいくつかの状態をループします。 まずPageAが生成されるとonCreateが実行され、onResumeに進み、アクティブな状態になります。このアクティブな状態とは端末の画面上に表示されユーザに見えていることを状態です。 そして他のPageBに遷移すると遷移元PageAはonPauseが実行され、非アクティブな状態になります。遷移先PageBはonCreate, onResumeと進みアクティブな状態になります。 PageBからPageAに戻ってくるとPageBではonPause, onDestroyが実行されインスタンスが破棄されます。PageAはonResumeが実行されアクティブな状態に戻ります。