building HTML hybrid app with ionic

@bonar

Nakano Kyohei

Software EngineerCo-founder at @atmoph

twitter: @bonar

facebook: nakano.kyohei

building HTML hybrid app with ionic

Frontend != Web Service

HTML hybrid app

HTML Hybrid app

• Web技術を使って作られたモバイルアプリ

• HTML/CSS/JavaScript で UI を作り、WebView やコンポーネントブラウザ上で動かす

• ネイティブの機能は JavaScript 経由で呼び出す

building HTML hybrid app

Frontend ChaosPackage management

• npm• bower• component

Task runner

• grunt• gulp

altJS

• CoffeeScript• TypeScript

JavaScript Framework

• jQuery• AngularJS• vue.js• backbone.js….

CSS Style

• SASS• LESS

CSS Framework

• bootstrap• PURE• Foundation...

hybrid app 特有の課題

• UI のプロトタイピング

• デバイス実機上（様々な解像度）での確認

• アプリストアに提出出来るネイティブアプリの生成

ionic

•  AngularJS based UI Framework (CSS/JavaScript)

• UI パーツは directive として表現される

• Apache Cordova を同梱して iOS/Android アプリも作れる

• ionic コマンドを使った雛形生成

• ionic view アプリを使った実機確認

demo

1. UI をざっとウェブ上で作る

2. ローカルにチェックアウト

3. 開発 & テスト

4. デバイスにダウンロードして確認

$ ionic platform add (ios|android)

$ ionic build ios

build native app

ionic

• HTML hybrid app のトータルな開発フローを支援する

•プロジェクトの雛形を簡単に生成

• ionic creator を使ってウェブ上でざっとUIを作る

• ionic view でデバイス上での見た目を確認

•アイディアを体験できる形まで早く持って行く事ができる

• ionic の UI や AngularJS 自体が好きじゃないと辛いかも

Thank you

follow @bonar