webアプリ開発のトレンドとuiライブラリ開発事情（仙台geek★night #1）

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