webアプリ開発のトレンドとuiライブラリ開発事情(仙台geek★night #1)
Post on 16-Apr-2017
374 Views
Preview:
TRANSCRIPT
Webアプリ開発のトレンドと UIライブラリ開発事
情
1
仙台 Geek Night #1★
業務の紹介
名前:瀬川正和会社:グレープシティ職種:プロダクトマネージャー
–「Wijmo(ウィジモ)」の開発– Web業務アプリ用 UIライブラリ
2
グレープシティ全景
3
グレープシティ開発拠点
4
製品の例
FlexGrid(フレックスグリッド)– Excelのような入力操作–コピー&ペースト– Excelの入出力– PDFの出力– etc
5
UIコンポーネントの役割便利で高機能な UIを提供する様々な開発手法に対応する
6
Wijmoの歩み 2011年 最初のバージョンをリリース jQueryでコーディング
– メソッドを実行してウィジェットを生成– メソッドの引数にプロパティ名と値を指定してプロパティを設定
– コーディングミスを誘発しやすい
// ウィジェットを生成$('#grid').wijgrid();// プロパティを設定$('#grid').wijgrid(‘option', ‘allowEditing', true);
7
Wijmoの歩み 2014年 Wijmo 5をリリース ECMAScript 5でコーディング
– newでコンポーネントを生成– 単純にプロパティを設定(自動的に getter/ setterが実行される)
– インテリセンスを利用可能
// コンポーネントを生成var grid = new wijmo.grid.FlexGrid('#grid');// プロパティを設定grid.isReadOnly = false;
8
Wijmoの歩み 2016年 11月 Angular 2に対応 HTMLコードで UIを定義 UIとビジネスロジックを分離
<wj-flex-grid [isReadOnly]="false"></wj-flex-grid>
9
なぜ Angular? Webアプリ開発の「選択肢を減らす」
– Angularと周辺技術をまず使ってみる標準仕様をベース Googleブランドの安心感
– Googleが開発して自身で使っている
10
Wijmo& Angularアプリのデモ
Angularのチュートリアルも一通り読むことを推奨しますhttps://angular.io/docs/ts/latest/tutorial/
11
おまけ
12
VSCode拡張機能 : Excel Viewer
13
top related