Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)

623 views

Published on

#sendaigeek

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)

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

×