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 Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)

1,704 views

Published on

OSC2017 Tokyo Springで講演いたしました、資料でを公開します。
SPA、HTML5、CSS3.0、JavaScriptを駆使して、作成したFuture Architect製WebコンポーネントFW作成のお話です。

Published in: Software
  • Be the first to comment

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

  1. 1. エンプラでSPAで最新UI!? よし、作ってOSS化! Future Architect Yuzo Hirakawa
  2. 2. 平川 裕蔵 Qiita@Hirakawa_Yuzo 元バイカー 今ゲーマー C, C++, HTML, CSS, JavaScript このあたりが得意です。 社内では、UI/UXを専門に技術を深めていっています。 自己紹介 享年1ヶ月
  3. 3. http://future-architect.github.io/urushi/ コンポーネント指向 オブジェクト指向 Material Design 大規模開発向け 本日ご紹介するのはこちら
  4. 4. ユーザーはSPAとして構築されたアプリケーションを利用。 ユーザー数 72000人 開発規模 300KL 以上 依存ライブラリ群 Urushi プロジェクトFW SPA Web AP DB ユーザー 構築システム どういうシステムでSPA構築したのか ブラウザサイド
  5. 5. Futureのよくあるアプリケーション構築 画面パターン2 画面パターン1 画面パターンN 画面部品1 画面部品2 画面部品n ︙ ︙ Java/XHTML SQL 業務処理
  6. 6. • 1画面に対する機能が多い • 業務スピード向上 • 10年先でも最新って言えるシステム SPAを構築した顧客の要件
  7. 7. 基本方針を決める 差分描画 ユーザビリティ向上 業務スピード向上 1画面に対する機能が多い 10年先でも最新 MaterialDesign? SPA!? ※Single Page Application
  8. 8. 基本方針を決める SPA!! 品質 効率性 コスト 作る 使う Object指向 AMD
  9. 9. 画面パターン2 画面パターン1 画面パターンN 画面部品1 画面部品2 画面部品n ︙ ︙ Java/XHTML SQL 業務処理 Why SPA ロジックを分離させたくない • ユーザーに対するレスポンススピードを向上させる • ハードウェアスペックへの配慮
  10. 10. Challenge SPA • 過去にSPAで大規模Webアプリは構築出来た経験がある 今の現場でも導入できるはず • JavaScriptエンジニアを増やしたい
  11. 11. OSSを選定する 時は2015年1月・・・JavaScriptライブラリ群雄割拠の時代 Choice
  12. 12. プロジェクトへの導入実現性は? しかし・・・ 設計自由度を持たせつつ、品質を担保する仕組みが欲しい コンポーネント指向型のライブラリとか・・・
  13. 13. ? マッチするOSSが見つからない 構成要素をいたずらに増やしたくない
  14. 14. 一方その頃 Material Design面白そう。 CSS3だけで作れないだろうか。 Button, Checkboxとか色々作れそう サーバーにデモ公開して、プロジェクトに 作ったよメール投げてみよ! もっとやれ! Me 偉い人
  15. 15. そんなこんなで Object指向で開発したい 開発者への公開はコンポーネント単位で 利用してもらう。 HTMLで記述するだけにしたいから、パー サーが必要だな。 etc・・・ どうせなら名前つけようぜ! ロゴ作りました! Me
  16. 16. 2016年1月 正式にOSS公開
  17. 17. プロジェクトに導入するには UIポリシー、開発方法の布教 ソースコード自動生成 Project Framework 画面A 画面B 画面N・・・ 認可 コンポーネント制御 画面遷移管理 etc) プロジェクト向けFW開発 いざ開発!
  18. 18. プロジェクトに導入して起きた問題 設計担当者 FWは何をしてくれるの? どこを設計するのかわからない MaterialDesignわかりません。
  19. 19. プロジェクトに導入して起きた問題
  20. 20. プロジェクトに導入して起きた問題
  21. 21. プロジェクトに導入して起きた問題 画面開発支援デバッグツール • 作成している画面(SPAのパーツ)を 即時起動してくれるツール • 画面起動に必要なパラメータはJSONで用意するだけでOK 簡易的なパラメータであれば、ドロップダウンから選択するだけ
  22. 22. プロジェクトに導入して起きた問題
  23. 23. プロジェクトに導入して起きた問題 Good! 設計担当者
  24. 24. そして・・・2016年10月システムは無事稼働。 見えてきた成果とこれからの課題 性能の向上 コンポーネントの恩恵 カスタマイズが容易 高い期待値を求められる Material Design VS Enterprise
  25. 25. OSS化に至ったワケ 技術的な活動は自由に広く。
  26. 26. どんなOSS? Material Design
  27. 27. どんなOSS? Urushiレンダリングエンジン button input panel インスタンスView
  28. 28. どんなOSS?
  29. 29. どんなOSS? 8+
  30. 30. Urushiの今後 • Enterprise向けにUIデザインを洗練していく • 依存ライブラリを消去 • EnterpriseのUIで困りがちなものへの対応 • Grid • Tree • Tab

×