JSConf China 2019 in 上海参加記録( 1 日目)
- はじめに
- 会場
- Opening & Opening Note
- Keynote. Continuous learning & leadership evolution
- 2. The beauty of TypeScript
- 3. ClojureScript - Winning through simplicity
- 4. Modern GraphQL workflow
- 5. Building (Progressive) Web Apps
- 6. 面向传统, Serverless 进化之路
- 7. Evolution of Quality, Support, Releases at NIKI
- 8. 响应式编程使你看得更远
- Panel Discussion
はじめに
間が空いてしまいましたが、 JSConf China 2019 1日目の内容をメモっておきます。
※ 2019/11/06 会場でメモった内容をほぼそのまま書いています。
意味不明な部分や聞き間違い、解釈違いなど多数あると思います。
もうすぐ資料や動画が配信されるはずなので、その後更新する予定です。
会場
まずは会場の様子から。
ステージ
- 中央にステージと大きなスクリーンがあり、左右に少し小さめのスクリーンがありました。
- 英語セッションのときは中央のスクリーンの両端に、中国語訳がつけられていました。
椅子など
- パイプ椅子が並んでおり、机は最前列のみ設置されていました。
(長時間座っているとお尻が痛い(´・ω・`)) - 端の方には休憩スペースがあり、休憩時間にはコーヒーを飲んだり転がったり。。
- 休憩時間中、席に PC を置いて行く方がちらほら。信頼のあらわれ?面倒だっただけ?
- みんな Mac を使っていたのでちょっと欲しくなるなど。
参加者について
- 男女比は 9:1 くらい。参加者はざっと 300 人ぐらい。
- 欧米系の方もちらほら見られた。スタッフをしてくれている方も。
各セッションの言語
- 8 割くらい英語で行われていた。国際的なカンファレンスだから?海外ゲストにもわかるように?
- ただし、観客の方は(自分の周囲だけかもだが)最後の方はしんどそうだった。わかる。わかるよ。
- パネルディスカッションのときは司会の方が通訳したりもしていたが、間に合わず端折るところも。ですよね~。
Opening & Opening Note
- 今年で 10 年目 & 7 回目(毎年開催しているわけではない)
- 10年前には React も GraphQL もなかった。
- 中国内の各地で開催しており、上海の他北京、深センなどでも。
- カンファレンスの理念は、開発者同士でコミュニケーションを取ること。
- Web をめぐる開発環境はどんどん進化して便利になっているが、コミュニケーションについては十分とは言えない
- Opening にて Wechat でグループを作り、皆で参加する。
- 人数は 120 人くらいに
- 質問、休憩時間などでの連絡、終了後の連絡などで使われている
Keynote. Continuous learning & leadership evolution
Video
※このカンファレンスのものではありませんが、同じタイトルで別のカンファレンスで話ししている動画があったため載せておきます。
Optimized for cost
- deliver technology
- stranger pattern
- deliver value team
- move up team
- 将来的に何を選ぶ
- 客やこれまでの経緯など、とりまく環境の共有
チームをどうまとめていくか
- チームごとに担う仕事はバラバラである。特に QA チームは完全に開発チームから離れている
これらをどうまとめていくか
product model
- A3 problem solving
- Speed to value
- DevOps
- 計測しないと解決できない
- focus just speed
- 新しい環境に移ったら、90 日で慣れる?
- 実際のグラフ、カンバン?の様子なども見せてくれていた。
- Roleも大切
- global technology
- 他のチームに入っててこの役割
- data with context drives clear
- sharing success
- 以前は失敗とはネガティブなものだった
- who made change
- 組織ごとに異なる
- それに合わせる
- leadership need evolve
2. The beauty of TypeScript
Slide
最も良い言語は何か?
- 状況による。例えば 128kb RAM の環境なら C が選ばれるだろう
- フロントエンドなら JavaScript/TypeScript
- 高开发なら Golang や Java (C# 、 Python の人気は今ひとつのよう)
どういう状況だと TypeScript が一番輝くか?
- 開発者が多い
- 開発する項目数が多い
- TypeScript ならどんな JavaScript も TypeScript として扱うことができる
TypeScript の使用状況
- 使ったことのある人は八割くらい。
- 殆どの業務で TypeScript を使う人は四割くらい
JavaScript の辛いところ
- Top 10 JavaScript errors from 1000+ projects(and how to avoid them) - Rolllbar
- Intellisense, Error checking, Quick Fixes, IntelliCode
- IntelliCode -> 書いたコードの内容から、次に書きそうな内容を導き出して入力予測として表示
JavaScript のプロジェクトを TypeScript に変換するときの便利ツール?
- コードに下記を追加すると VS Code で処理を実行してくれるらしい
@ts-ignore
- TypeScript に変換したときのコンパイルエラーを消してくれる
@ts-nocheck
- @ts-ignore の処理をまとめて実行してくれる
@ts-check
- JavaScript のコードに対して実行し、 TypeScript に変換したときにコンパイルエラーになるところを検出してくれる。
3. ClojureScript - Winning through simplicity
Problem of JavaScript
- increase complexy
- デバッグしにくい
- window Scope -> TypeScriptと同じような問題
Choose simplicity over complexity
Compile はBavel で慣れてるでしょ?
Simplest language?
- Lisp!: (function argument)
- プログラムしないのが最強
- s-Expression
- tree/graph
Lisp
- Lisp はシンプルだけでなく古い(歴史がある)
- John McCarthy
Paul Graham
Brendan Eich
- Creator of JS
Clojure
ClojureScript
- Clojure compiled to JS
- リリースはRichHickeyによりOctober 2007に
- Functional
- Recursion
- メジャーなエディターなら対応してる
- インデントが意味を持つ(Python的な)
- REPL: Command line
- EDN
Database
- Datomic
- DataScript
Datalog
summary
- ClojureScript の紹介。 Lisp -> Clojure -> ClojureScript の流れをJavaScriptとともに
4. Modern GraphQL workflow
Slide
これまで
- サーバーはリクエストに対して全データを返す
- 必要なのはそのうちの一部(ほかは無駄になってしまう)
GraphQL
- 必要な分だけ返す
リクエスト側にも見分けるための仕組みがある?
graphql
- graphql-compose
- merge-graphql-schemas
- graphql-middleware
- apollo-server
GraphQL Joker
- スキャフォールドのためのツール。同じようなものをコピペで作りまくらなきゃいけないものを自動化してくれる。
- JavaScript で、 TypeScript の type のようなファイルを作る
- GitHub - zhangkaiyulw/graphql-joker: GraphQL Joker is the ultimate GraphQL scaffolding tool.
summary
- GraphQL の紹介(REST -> GraphQL への流れから)
- GraphQL Joker の紹介
5. Building (Progressive) Web Apps
- MaaS
What the hack PWA
- Fast
- Integrated
- touch, GPS, etc.
- Reliable
- Engaging
Why PWAs?
- 使用時間のうち87%がNative Appsを使っている
Shun the non PWA
- ネイティブ的にテーマカラーに合わせるとか、そもそもJavaScriptがオフにされていたら無理
- Offline時にレスポンスが遅い
Dev tool
- Lighthouse
- PWA の条件を満たしているかを調べてくれる
- PWA の条件の参考: プログレッシブウェブアプリの紹介 - プログレッシブウェブアプリ | MDN
Being Reliable
Angularの場合
- ng add @angular/pwa
- React, Vueもかんたんに入れられる
Workbox
Being Faster
- JPEG !== JS??
- サイズの話だったっぽい。でかすぎるのは☓
- https://angular.io/guide/universal
- Puppeteer
Being Engaging & Interactive
- https://app-manifest.firebaseapp.com/
- https://ngpwa.com
- https://github.com/MichaelSolati
- https://medium.com/@MichaelSolati/pwas-with-angular-being-engaging-83465ffd0313
6. 面向传统, Serverless 进化之路
Slide
memo
- 阿里巴巴のサービスをServerlessにしたときの効果、苦労や手順など。
- BFF 70%
- Node.js
- マシンや人の負荷を下げたい
- すでに過去の遺産がたくさんある
- Serverless への移行は 2018/10 に準備を開始した
- 淘宝网,飞猪大BU に反映
- コストは 100% -> 70% -> 40%
- Ops のリソース
- Dev 側は開発完了後はリソース不要(本当に減らすとリスクが高いため減らすことはできない)
- Note.js のバージョン固定
- 研究開発のリソース
- 多能工化
- 開発者、部署が少なくてもできる
- サーバーへの負荷軽減
- 今までは Controller がひとまとめに受けてきたが、 Edge -> 業務ロジック -> データ と個別にアクセスできる
- 負担軽減へ
- 今までは Controller がひとまとめに受けてきたが、 Edge -> 業務ロジック -> データ と個別にアクセスできる
- クラウド環境での統合テスト
- アップグレードモデルの研究開発
- これまでの期間は一年、まだ完了はしていない
- FaaS + BaaS
- Egg / Mildloway Server
- Http Server
7. Evolution of Quality, Support, Releases at NIKI
How we've transformed in 5 years
- modernization - microservices / cloud
- continous delivery
- follow the sun / GEO and global
- cultural shift
Memo
- 綿密なテストを重ねて失敗を責める文化 -> 早く小さく失敗する文化へ
- DevOps
- Engineering Mindset
- SRE
- Fire Fighting
- Share Ownership
From -> To
- 長くテストをして長い時間をかけてリリースしてた -> CI/CD による早いリリース
- 手動でテスト -> 自動化、Global Execution?、On demand test environments, sv
8. 响应式编程使你看得更远
Slide
過去話
- RxJsは今までも毎回テーマに上がっていたらしい。どんな新しい知識が得られるか?といった紹介からスタート
Rxについて
Memo
- callback -> promise
- async/await
- Message Driven / Responsive / Resilient / Elastic
- Observables
- Observer
- MergeMap -> Stream に流れる○をマージする?
- throttleTime(25)
- debounce & throttle
- switchmap - 競合問題の解決?
- CombineLatest
- withLatestFrom
- TakeUntile
- Cold Observable
- Hot Observable
- Share with "Subject"
- rxjs-hooks
- redux-observable
- Cycle.js
- 人と境界
Panel Discussion
概要
- Wechat で参加者から集めた質問を、登壇者に投げかける
- 質問は英語だったり中国語だったり
- 司会の方が通訳をしていたが、端折ったり翻訳しないことも(まぁ大変すぎですよね)
TypeScript をどのように導入するか
- 一度に全部切り替えるのではなく、一部から期間を決めて導入する
- 阿里巴巴では大部分で TypeScript を使っている(ここ三年くらい)
- 導入のメリットを鑑みる
- 新人も助ける
ClojureScript が強いところ
- 特定の場面で、というわけではない
- 複雑なデータや仕組みをもつものに使うのが良い
GraphQL
- fluent
- filtering
- reasonable request
- DB にとっても良いところ?
How the computability of PWAs
GraphQL には swagger や OpenAPI のような標準がある?
- Browse Schema であり、 API ではないのでそのようなものはないのでは?