Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)

1. エンプラでSPAで最新UI！？よし、作ってOSS化！ Future Architect Yuzo Hirakawa

2. 平川裕蔵 Qiita@Hirakawa_Yuzo 元バイカー今ゲーマー C, C++, HTML, CSS, JavaScript このあたりが得意です。社内では、UI/UXを専門に技術を深めていっています。自己紹介享年1ヶ月

3. http://future-architect.github.io/urushi/ コンポーネント指向 オブジェクト指向 Material Design 大規模開発向け本日ご紹介するのはこちら

4. ユーザーはSPAとして構築されたアプリケーションを利用。ユーザー数 72000人開発規模 300KL 以上依存ライブラリ群 Urushi プロジェクトFW SPA Web AP DB ユーザー構築システムどういうシステムでSPA構築したのかブラウザサイド

5. Futureのよくあるアプリケーション構築画面パターン2 画面パターン1 画面パターンN 画面部品1 画面部品2 画面部品n ︙ ︙ Java/XHTML SQL 業務処理

6. • 1画面に対する機能が多い • 業務スピード向上 • １０年先でも最新って言えるシステム SPAを構築した顧客の要件

7. 基本方針を決める差分描画ユーザビリティ向上業務スピード向上 1画面に対する機能が多い 10年先でも最新 MaterialDesign？ SPA！？ ※Single Page Application

8. 基本方針を決める SPA！！品質効率性コスト作る使う Object指向 AMD

9. 画面パターン2 画面パターン1 画面パターンN 画面部品1 画面部品2 画面部品n ︙ ︙ Java/XHTML SQL 業務処理 Why SPA ロジックを分離させたくない • ユーザーに対するレスポンススピードを向上させる • ハードウェアスペックへの配慮

10. Challenge SPA • 過去にSPAで大規模Webアプリは構築出来た経験がある今の現場でも導入できるはず • JavaScriptエンジニアを増やしたい

11. OSSを選定する時は2015年1月・・・JavaScriptライブラリ群雄割拠の時代 Choice

12. プロジェクトへの導入実現性は？しかし・・・設計自由度を持たせつつ、品質を担保する仕組みが欲しいコンポーネント指向型のライブラリとか・・・

13. ？マッチするOSSが見つからない構成要素をいたずらに増やしたくない

14. 一方その頃 Material Design面白そう。 CSS3だけで作れないだろうか。 Button, Checkboxとか色々作れそうサーバーにデモ公開して、プロジェクトに作ったよメール投げてみよ！もっとやれ！ Me 偉い人

15. そんなこんなで Object指向で開発したい開発者への公開はコンポーネント単位で利用してもらう。 HTMLで記述するだけにしたいから、パーサーが必要だな。 etc・・・どうせなら名前つけようぜ！ロゴ作りました！ Me

16. 2016年1月正式にOSS公開

17. プロジェクトに導入するには UIポリシー、開発方法の布教ソースコード自動生成 Project Framework 画面A 画面B 画面N・・・認可コンポーネント制御画面遷移管理ｅｔｃ）プロジェクト向けFW開発いざ開発！

18. プロジェクトに導入して起きた問題設計担当者 FWは何をしてくれるの？どこを設計するのかわからない MaterialDesignわかりません。

19. プロジェクトに導入して起きた問題

21. プロジェクトに導入して起きた問題画面開発支援デバッグツール • 作成している画面（SPAのパーツ）を即時起動してくれるツール • 画面起動に必要なパラメータはJSONで用意するだけでOK 簡易的なパラメータであれば、ドロップダウンから選択するだけ

23. プロジェクトに導入して起きた問題 Good！設計担当者

24. そして・・・2016年10月システムは無事稼働。見えてきた成果とこれからの課題性能の向上コンポーネントの恩恵カスタマイズが容易高い期待値を求められる Material Design VS Enterprise

25. OSS化に至ったワケ技術的な活動は自由に広く。

26. どんなOSS？ Material Design

27. どんなOSS？ Urushiレンダリングエンジン button input panel インスタンスView

28. どんなOSS？

29. どんなOSS？ 8+

30. Urushiの今後 • Enterprise向けにUIデザインを洗練していく • 依存ライブラリを消去 • EnterpriseのUIで困りがちなものへの対応 • Grid • Tree • Tab

Confira estes a seguir