ng-japan 2019 に行ってきた

2019/07/14 08:40

classiさんのスカラーシッププログラムを利用して、Angular のカンファレンスである、ng-japan に参加しました。
classi さんには、交通費と宿代、夕食代を提供していただきました!ありがとうございます!!

個人的に面白かったと感じた2つのセッションの感想についてまず、書いていきます。

Angular Elements under the hood, the slide is here

by Jia Li

アジェンダは ↓ でした。
・VanillaJS における WebComponents の利用方法
・Angular 上で、AngularElements を使わずに WebComponents を利用する方法
・Zone と WebComponents について

VanillaJS における WebComponents の利用方法については、実際のソースコードを例にわかりやすく、WebComponents の実装方法を説明されていました。WebComponents を書いたことはなかったけど、なんとなく雰囲気をつかめました。 かなり手続きが多い印象をもったので、実利用する際には手続きを抽象化したなんらかのフレームワークを使うのが実用的かな?と思いました。

Angular 上で、AngularElements を使わずに WebComponents を利用する方法についても、実際のソースコードを例にわかりやすく説明されていました。 AngularElements は Angular のコンポーネントを WebComponents にする的なものらしいのですが、仕様が固まっておらず、1年ぐらい放置されているみたいなことをおっしゃられてたので、こういう話をしてるのかなと思いました。 実装方法を色々説明されていましたが、やはり手続きが複雑だな〜と思ってたんですが、最後に Ivy が来たら手続きが楽になるみたいなことを言ってたので、Ivy が GA になってから触ろうかなと思いました。

最後の Zone の話は、現状の AngularElements では Zone.js をグローバルに動かしてるから、他の WebComponents に影響を及ぼしかねなくてやばいから Scoped にしたいけどまだ Proposal 段階だよって話でした。

How We Build NG-MY Website link

by Jecelyn Yeen

Angular は一般的に、バンドルサイズが大きくて、ランディングページには向いてないけど、頑張れば、Lighthouse で 90 点以上取れるという話でした。

アジェンダは ↓ でした ・ランニングコスト ・SEO ・チーム開発 ・パフォーマンス ・テクニック

ランニングコストに関しては、Firebase に静的ファイルを置く方法で、ノーコスト(0 $)にするという話でした。 プロトタイピングの際には netlify を使ってたらしいのですが、プロトタイピングに netlify,本番に Firebase を選んだ理由については語られてなかったです。

SEO については、普段まったく気にしてないこともあって、知らないことだらけでした。 Title,Meta といった meta タグなんかをいじるためのサービスの存在を初めて知りました。 あとは robots.txt をファイル名で分けられるというのも初めて知りました。 PuppeteerでSPAをGatsbyみたいにprerenderできるという話は、この記事なんかで知ってましたが、Angularのバンドルサイズを縮めるためにやる事例は始めてみました(笑)。Webpackを手動でいじる部分は知見の塊なんじゃないかと思います。

チーム開発については今風のCI/CDをやってるとのことでした。

パフォーマンスは画像の圧縮、スクリプトの遅延読み込みなんかをやってるそうです。

〜〜〜〜〜

夕食会

ng-japan2019 閉会後に Classi さんのご厚意で六本木の学生が行かなそうな、いい肉がでるお店に連れて行っていただきました。 おいしかったです。ごちそうさまでした!! IMG 20190713 192441 IMG 20190713 222002 IMG 20190713 222007