Noteビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。ビジネスチャット「Chatwork」のエンジニアとデザイナーのブログです。Liveの刷新とScala.jsについてこんにちは。クライアントアプリケーション開発部の田中です。好きな麻雀の役は七対子です。LiveのUIが変更されました。詳細は下記を御覧ください。blog-ja.chatwork.comUIについては今後デザイン部の方がブログを書くと思うので、今回私の方では技術的なところの紹介をしたいと思います。(尚、この記事にはWebRTCやビデオ会議システムの話は全く出てきませんので、ご了承ください。Liveのフロントエンド技術について実は今月のUI更新とは別に、JavaScript部分の大幅な変更を4月末に実施しています。私は敷かれたレールをただただ歩くだけだったので割と楽させてもらいました。LiveのWebクライアント側は主に以下の技術を使って実装されています。Scala.jsReactScala.jsの採用について今回ChatWorkで初のScala.jsの採用を試みましたが、以下のような目的で採用しました。Scalaの強力な型システムがほしい弊社には何名かScalaエンジニアがいるので、リソースの再配分できるかも楽しそうもちろん、初めて採用するAltJSなのでいくつかの不安要素はありましたが、@kyo_ago氏の無茶振り熱い説得もあったのと、ChatWorkLive自体はJavaScriptの領域でいうと大規模なプロジェクトにもならなそうだったので、採用となりました。使ってみた感想等については後述します。Liveは大きく分けてView側のみを担当する箇所と、その他のAPI通信やモデルデータの構成等を担当する箇所に分けて実装をしています。後者をfrontend-backendと読んでいます。今回、frontend-frontend部分をReactのプロジェクトとして、frontend-backend部分をScala.jsのプロジェクトとして、それぞれを実装しました。APIを用いて実現しています。このような2つ構成にしたかScala.jsを触ったことのある方なら経験があると思いますが、Scala.jsでView部分を構築するのは結構辛いです。View部分は特に型の恩恵が得にくい部分でもあり、そこまでScala.jsで書くうまみを感じません。その他をScalaプロジェクトとして書くこととしました。今回は弊社ではReactを採用していますが、もちろんVue.jsや他のライブラリを用いることも可能です。パッケージ構成についてパッケージ構成は以下のようになっており、Scala.jsプロジェクトの中にJavaScriptのプロジェクトを内包するような構成をとっています。buildをすると、Scala.jsプロジェクトのbuildと同時にfrontend-frontend側のbuildも同時に行うようにしています。フロントエンド全体のアーキテクチャについてこまかな部分は省略していますが、雰囲気としては以下のような感じです。UserEventやWebSocket経由でイベントが発火する発火したイベントを元にデータが書き換わる、必要ならサーバーサイドAPI経由でデータを取得する書き換わったデータを元にレンダリング用のデータを構築し、frontend-frontend側にpostMessageで渡すfrontend-frontend側でViewが構築されるちゃんとしたFluxの流れではないですが、Fluxっぽくデータが一方方向に流れるような設計となっています。最初に採用するときにいくつか不安があったと前述しましたが、それらの不安要素はほとんど杞憂でした。以下、私がScala.jsを導入する以前に感じていた不安要素です。ファイルサイズ重くならない?まぁ、多少重くなります。そこまで気になるサイズではないかと。Scala.js側で採用するライブラリによってはかなり大きくなることもあるので、Scala.js側はバンバン外部ライブラリを導入することは避けたほうが良さそうです。現在の本番buildのJavaScriptのサイズは271KBでした。それらはどちらかというとScala.jsの問題というよりScalaの問題だったので、社内のガチムチScalaエンジニアたちに助けてもらえました。Scala.js自体で「困ったー」となったところはそこまで多くなかった印象です。API等のWebFrontend特有の知識がそこまでいらない層なので、参加しやすいWebFrontendエンジニアがScalaちょっと書けるようになる楽しい参考に、私のPRにScalaエンジニアがレビューしてくれてるやつを貼っておきます。今回frontendとbackendの二段構成にしましたが、やはり通常のJavaScriptのプロジェクトよりは構成を準備するオーバーヘッドは大きいです。ある程度大きなプロジェクトでないと、このオーバーヘッドはペイしないのではないかと感じています。Liveのプロジェクトは前述したとおり、そこまで大きなプロジェクトでもなかったこともあり「少しやりすぎ感あるかな......」という印象はあります。今後のプロジェクトにおいては、Scala.jsで構築するという選択肢が増えたことはよかったかなと感じています。Liveのリニューアルができました。これからもScala.jsの知見がたまったら公開していこうと思います。09:08Tweet関連記事2022-03-25ChatworkはPHPエンジニアの採用をより強化していきます、というお話。ハッカソンを開催しました!こんにちは、西口です。フロントエンド開発チームでス...2021-12-07人事とエンジニアがワンチームなDevHRについての紹介こんにちは。@Chatwork_devメンバーid:cw-oritaid:okuzawatsid:d-hayashiid:shibe23id:cw-jeromechaid:cw-araiid:tinpayid:cw-sakamotoid:rabe1028id:cw-suetakeid:lmdexprid:cw-shinyaid:cw-takaseid:cw-niinumaid:j5ik2oid:tan-yukiid:yamakenji24id:yoshiyoshifujiiid:cw-ayumitakahashiid:cw-furuyaid:kaz3284id:cw-ozakiid:cw-nishikawaid:daiksyid:tasuku43id:louvre2489id:sykt13id:yamatomo73id:cw-kasugaid:cw-mottyid:cw-nishiguchiid:s12btid:cw-sayamaid:cw-moriyaid:cw-makotoikedaid:cw-yoheihayashiid:wakakumaid:cw-sakaguchiid:cw-matsubaid:ymgnid:shige0501id:nottegraid:shinharadid:eielid:cw-michihiroid:crossroad0201id:cw-miyashitaid:agoetcid:at-akaid:cw-chibaid:tenslerid:cw-akatsuid:cw-kajiwaraid:cw-otakeid:TomokoNishinaid:cw-tanakaid:cw-hayashiid:cw-marikoid:cw-shinmenid:cw-masakiid:cw-hayama最新記事モバイルアプリ開発チーム、カンバンはじめました。(1)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。