UIT#5 で登壇してきました + 資料への補足
さくらの専用サーバチームでフロントエンドエンジニアをやってる @ravelll です。このエントリはさくらインターネット Advent Calendar 2018 3日目のエントリです。
11/29 に開催された UIT#5 で登壇してきたので、その報告と発表内容への補足を書くエントリです。
はじめに: UIT とは？
UIT とは User Interface Technology の頭文字を取った、フロントエンド技術の勉強会です。LINE株式会社の有志によって運営されています。
毎回テーマが異なり、過去のテーマには BFF やアプリ内 Web などがあります。私が登壇した回のテーマは "わたしたちにとってのVue.js" でした。
登壇内容と補足
↓が登壇資料です。所属するチームにおける Vue.js の実践事例を中心に、さくらのフロントエンドの話をしてきました。
この資料の内容について、いくつか補足します。
新コントロールパネル（α）
現コントロールパネルを置き換えるものとして開発を進めているコントロールパネルです。スライドでは刷新が完了したかのように書いてしまいましたが、αとあるように未完成で、現在は一部のユーザーのみに試験的に提供しているものとなっています。
アプリケーション構成
js ファイルを配信しているサーバーや、API アプリケーションの稼働には Docker が利用されていて、コンテナは Apache Mesos のフレームワークである Marathon によってオーケストレートされています。
Apache Mesos や Marathon について知らないかたは zembutsu さんによる 忙しい人の5分で分かるMesos入門 - Mesos って何だ？ を読むとイメージがつかめると思います。
ディレクトリ構成
http クライアントが utils にあるというのは嘘でした！！services というディレクトリにありました。
現状 utils と services の境界が曖昧なので utils に一本化しようかなという気持ち。
Vue.js に置き換えてみてどうだったか
まだ置き換えが完全に終わったわけではないですが、最大の目的だった保守性の向上については十二分に達成されることが確信を持って言える状況です。
また、素朴な DOM 更新が VDOM を利用した差分レンダリングになったことや、API リクエストやエンドポイント設計が見直されたこと（こっちが大きい）で、実装できている箇所に関してはパフォーマンスも全体的に改善されている状況です。
個人的には、構成が独自フレームワークから世界的に利用実績のあるライブラリに変わったことで、エンジニアやデザイナーが開発を通して得た知見をアウトプットしやすくなったり、外部の知見を活用しやすくなったのが良かったなーと感じています。
困りごと
デザインが高い完成度になったとき初めて共有される、といったことを話したのですが、現在は Abstract で Sketch ファイルを管理し、エンジニアも Abstract のチームに参加することで、完成度が低いうちからデザインを見れる状況になりました 🎉
これにより早いうちから認識や仕様についてデザイナーに確認することができるようになったので、上手く活用して能率を上げていければと思っています。
おわりに
楽しい機会を作ってくださった UIT 運営のかたがた、ありがとうございました！
あと Vue.js に限らずさくらでフロントエンドをモリモリやっていきたい人にはこちらのサイトが便利です、ぜひご活用ください。
