比べてみようIgnite UI for Angular

自己紹介

池原 大然 (いけはら だいぜん)

インフラジスティックス・ジャパン株式会社

製品担当 (プロダクトマーケとか)

 

 

Angular Material

Ignite UI for Angular

Agenda

  1. Angular Material との比較
  2. 速いは正義

Angular Materialとの比較

Form Controls

Caregory Angular Material Ignite UI for Angular 
Form Controls Autocomplete
Checkbox Checkbox
Datepicker Date Picker
Form field Input Group
Input Label & Input
Radio button ​Radio Button
Badge ​Badge
Select ​Drop Down (New in 6.1.0)
Slider Slider
Slide toggle Switch
Grid & Lists (IG) Combo (New in 6.1.0)
Schedules (IG) Time Picker
Schedules (IG) Calendar

Navigation & Layout

Caregory Angular Material Ignite UI for Angular
Navigation Menu
SlideNav Navigation Drawer
Toolbar Navbar
Layout Card Card
Divider
Expansion Panel
Grid list Layout Manager
List List View
Stepper
Tabs Tabs
Tree
Carousel 
Bottom Navigation
Avatar

Buttons & Indicators / Popups & Modals

Caregory Angular Material Ignite UI for Angular
Buttons & Indicators Button Button
Button toggle Button Group
Badge Badge
Chips ​Chips (New in 6.1.0)
Icon Icon
Progress spinner Circular Progress
Progress bar Linear Progress
Ripple Ripple
Popups & Modals Bottom Sheet
Dialog Dialog Window
Snackbar Snackbar
Tooltip
Snackbar Toast
Toggle

CDK / Guides

Caregory Angular Material Ignite UI for Angular
CDK Accessibility
Bidirectionality
Layout
Observers
Overlay Overlay (New in 6.1.0)
Portal
Scrolling Virtual For Directive 
Guide Theming Themes
Typography Typography

Ignite UI for Angular のテーマ関連に関しては次のセッションで！

Ignite UI for Angular が独自に提供するその他の機能

Caregory Angular Material Components Ignite UI for Angular
Services CSV Exporter
Excel Exporter
Charts Category Chart (*)
Financial Chart (*)

* チャートコントロールに関しては、別パッケージで提供
https://github.com/IgniteUI/igniteui-angular-charts

商用ライセンスを必要とするため、現在ソース非公開

 

ちなみに、jQuery, WPF用UIコンポーネントとしても提供

DataTable

Caregory Angular Material Ignite UI for Angular
DataTable Paginator Data Grid
Sort header Data Grid
Table Data Grid

Table/Data Table と対比されることになる Data Grid は業務アプリ向けの機能を多く提供

セル編集 ページング フィルタリング
並び替え グループ化 集計
列移動 列固定 列のリサイズ
列の非表示 行選択 検索
ツールバー 複数列ヘッダー 行列仮想化
(Virtual for Directive利用)

速いは正義

Speed "does" matter

時にはこんなリクエストも受けるわけで...

  • 「200 列 x 10,000 行をぱっと表示したい。ソートもフィルタリングもしたい。遅いのいやだ。」

     
  • 本音:「それってページング使ったらだめなんですか？10,000行なんてみませんし...」

     
  • 案件ロスト...

というわけで作られたディレクティブ igxForOf

(v5.2.0~, Feb 24, 2018)

igxForOf Spec (GitHub) 

Overview

Many modern applications require displaying big data with high performance in a way that is seamless to the end user. For such scenarios, it is imperative to have a virtual rendering mechanism in place that allows the user to scroll through a large set of data smoothly with optimal performance.

The idea is to provide smooth rendering and scrolling experience by reducing the number of DOM objects in-memory.

利用方法

ngForOf と同じようにコンテナー内部で要素を表示するために利用できる

<span #container>
    <ng-template *igxFor="data"></ng-template>
</span>

垂直方向または、水平方向の仮想化をサポート

<table #container [style.width]='width' [style.height]='height' [style.overflow]='"hidden"' [style.position]='"relative"'>
    <ng-template #scrollContainer igxFor let-rowData [igxForOf]="data"
        [igxForScrollOrientation]="'vertical'"
        [igxForContainerSize]='height'
        [igxForItemSize]='"50px"'>
        <tr [style.display]="'flex'" [style.height]="'50px'">
            <ng-template #childContainer igxFor let-col [igxForOf]="cols"
                [igxForScrollOrientation]="'horizontal'"
                [igxForScrollContainer]="parentVirtDir"
                [igxForContainerSize]='width'>
                    <td [style.min-width]='col.width + "px"'>{{rowData[col.field]}}</td>
            </ng-template>
        </tr>
    </ng-template>
</table>

3つの要素

  • DisplayContainerComponent
    要素を表示するためのコンテナー
     
  • HVirtualHelperCompoenent
    水平方向スクロールを制御
     
  • VirtualHelperComponent
    垂直方向スクロールを制御

データグリッドであるIgxGrid は標準設定で使用 (v5.2.0~)

  • 以前（別プロダクト）の反省: 標準設定では On にならない、On にした時点で機能制限が酷く、他のグリッドの機能が使えないという事態を避けるように
    努力

IgxGrid と仮想化の制限事項

  • すべての行は同じ高さである必要がある (rowHeightで定義)
     
  • セルに適用されるテンプレートやクラスがrowHeightを超えてしまうと
    仮想化が壊れる
     
  • ブラウザーのDOM要素の高さの制限は「現在」超えられない
    • IE11 - 1,533,916 px - 1行あたり、50px で 30,678行
       
  • 表示領域のサイズがリサイズされた場合はスクロールの位置が
    「現在」0にリセットされる
     
  • Mac OS のシステム設定でスクロールバーの表示を
    スクロール時のみにした場合、水平スクロールバーが表示されない

Angular Material にもあったような？

CDK-Experimental: virtual-scroll

 

 

<cdk-virtual-scroll-viewport  autosize>
  <div *cdkVirtualFor="let item of items">
     {{item}}
  </div>
</cdk-virtual-scroll-viewport>

2018/07/11 現在、Experimental = 試験的ではあるが、Ignite UI for Angular の
有利な点が消えたなーと...

 

過去からのジレンマ:「標準」とよばれるコントロールは味方でもあり、敵でもある

Ignite UI for Angularのポイント

  1. Angular Material Componentでは（まだ or 将来) カバーされない
    UI要件を満たすコンポーネント群
    • 例: Combo, Data Grid, 仮想スクロールて提供されている各機能
      • 現時点でもカスタマイズすれば実現できるが...
    • 例: Chart,
       
  2. 実装をサポートするツール群と「サポート」:コンポーネントのメンテナンス
     
  3. Indigo.Design とそのデザインシステムから実現される
    UIデザイン→プロトタイピング→コード生成 (Ignite UI for Angular) フロー

Ignite ui for angular vs Material

By Daizen Ikehara

Made with Slides.com

Ignite ui for angular vs Material

  • 874