Ignite UI for Angular
Deep Dive Night

~ igniteui-angular 過去、今、未来 ~

 

2018/07/11

About me

Infragistics History

Past

Future

Now

・jQuery + Angular
 時代のお話

・Angular ネイティブ部品リリース

・開発体制、仕様決め方、ドキュメント等

・VS Code Extension、CLIツール

・バージョニング、その他

・Angular
 コード生成

Topics

過去

~ igniteui-angular ができるまで ~

jQuery + Angular 時代のお話

jQuery UI ベースの製品 Ignite UI リリース

 

=> 割と流行る
(当時、製品群の中では最も問い合わせが多かった)

 

jQuery + Angular 時代のお話

バインディング系 Library / Framework 流行る

(Knockout.js, AngularJS, 他)

 

=> AngularJS 向けのWrapper class リリース

(Knockout.js サポートとかも頑張りました。)

jQuery + Angular 時代のお話

Angular, React 流行る

 

=> Angular(2系) 向けのWrapper class リリース

(React 向けWrapperもありますよ!)

jQuery + Angular 時代のお話

@Component({
    selector: 'my-app',
    template: `<ig-grid
        [(options)]="gridOptions"
        [(widgetId)]='id'
        [dataSource]='data'
        ></ig-grid>`})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;
    private data: any;

    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.gridOptions = {
            width: "100%",
            height: "400px",
            autoGenerateColumns: true
        };
    }

}

<ig-grid [widgetId]='id'>

    <column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>

    <column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>

    <column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>

    <column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>

    <features>

        <paging [pageSize]="currPageSize"></paging>

        <filtering></filtering>

        <selection></selection>

        <group-by></group-by>

    </features>

</ig-grid>

記述例1

記述例2

jQuery + Angular 時代のお話

Angular やってる人に紹介しにいく

=> 皆さんの反応:

jQuery?(´д`) エーーー

jQuery + Angular 時代のお話

皆さんの懸念

  • Angular Way じゃない
  • Angular Component ライフサイクルに沿わない
  • jQeury 重い (ファイルサイズ的に)
  • jQuery オブジェクトがメモリリークをですね...

Infragistics、
Angular Component 出すってよ

  • Material デザイン (ガイドに準拠)
  • 50種類を超える Angular Component
  • グリッドとかチャートとか
  • 機能とパフォーマンス

~ igniteui-angular の今 ~

まずは github 見てみよう

どんなコンポーネントあるの?

開発チーム体制

  • Developer: 14 ~ 16名
  • UX Designer: 数名
  • Product Owner: 1名
  • その他、多数(日本チームとか)

働き方

  • 基本はオフィスに集合(ブルガリア)
  • たまに Work From Home
  • コミュニケーションツール
    • Github
      製品に関する仕様決めやバグFixなど
    • Skype for Business, Teams
      上記以外なんでも
      (オフィスにいない人もいるため)

How to learn Angular

"If you want to know how to swim, just dive into the sea."

製品の仕様決定 ~ 実装の流れ

  1. 実装Componentや機能の選定
    • Githubやフォーラム、顧客からの声
    • 競合製品・OSS
  2. UXデザイナーによるデザイン検討
    • Wiki にデザインや仕様を反映
  3. テストコード 実装 (.spec.ts)
  4. Component 実装

手動テスト

  1. 各個人が担当範囲に対してユニットテストと手動テストで検証
  2. 各スプリントの終了時にテスターが加わって
    みんなで手動テストを実施

ローカライズ

Runtime i18n 対応待ち
https://github.com/angular/angular/issues/16477

 

=> 取り急ぎ、リソース文字列を切り出して公開

igniteui-cli

VS Code Extentions

  • Ignite UI for Angular Tooltips
  • ​Ignite UI for Angular Toolbox

 

未来

~ igniteui-angular の今後 ~

Design to Code

ロードマップ

igniteui-angular deep dive night 20180711-1

By Satoru Yamaguchi

igniteui-angular deep dive night 20180711-1

Slides for igniteui-angular deep dive night on July 11 2018 at Infragistics.

  • 935