過去

~ 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>

記述例１

記述例２

jQuery + Angular 時代のお話

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

jQuery + Angular 時代のお話

皆さんの懸念

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

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

今

~ igniteui-angular の今 ~

まずは github 見てみよう

https://github.com/IgniteUI/igniteui-angular

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

開発チーム体制

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

働き方

• 基本はオフィスに集合（ブルガリア）
• たまに 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

https://github.com/IgniteUI/igniteui-cli

VS Code Extentions

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

未来

~ igniteui-angular の今後 ~

Design to Code

ロードマップ