vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

JSConf China 2019 in 上海参加記録( 1 日目)

はじめに

間が空いてしまいましたが、 JSConf China 2019 1日目の内容をメモっておきます。

※ 2019/11/06 会場でメモった内容をほぼそのまま書いています。
意味不明な部分や聞き間違い、解釈違いなど多数あると思います。

もうすぐ資料や動画が配信されるはずなので、その後更新する予定です。

会場

まずは会場の様子から。

f:id:mslGt:20191109063304p:plain

f:id:mslGt:20191109063325p:plain

ステージ

  • 中央にステージと大きなスクリーンがあり、左右に少し小さめのスクリーンがありました。
  • 英語セッションのときは中央のスクリーンの両端に、中国語訳がつけられていました。

椅子など

  • パイプ椅子が並んでおり、机は最前列のみ設置されていました。
    (長時間座っているとお尻が痛い(´・ω・`))
  • 端の方には休憩スペースがあり、休憩時間にはコーヒーを飲んだり転がったり。。
  • 休憩時間中、席に 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
  • 高开发なら GolangJava (C#Python の人気は今ひとつのよう)

どういう状況だと TypeScript が一番輝くか?

  • 開発者が多い
  • 開発する項目数が多い
  • TypeScript ならどんな JavaScript も TypeScript として扱うことができる

TypeScript の使用状況

  • 使ったことのある人は八割くらい。
  • 殆どの業務で TypeScript を使う人は四割くらい

JavaScript の辛いところ

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

Clojure

ClojureScript

  • Clojure compiled to JS
  • リリースはRichHickeyによりOctober 2007に
  • Functional
  • Recursion
  • メジャーなエディターなら対応してる
  • インデントが意味を持つ(Python的な)
  • REPL: Command line
  • EDN

    Database

  • Datomic
  • DataScript
  • Datalog

  • bnomis (Simon Blanchard) - GitHub

summary

4. Modern GraphQL workflow

Slide

これまで

  • サーバーはリクエストに対して全データを返す
  • 必要なのはそのうちの一部(ほかは無駄になってしまう)

GraphQL

  • 必要な分だけ返す
  • リクエスト側にも見分けるための仕組みがある?

  • graphql

  • graphql-compose
  • merge-graphql-schemas
  • graphql-middleware
  • apollo-server

GraphQL Joker

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

Being Reliable

Angularの場合

  • ng add @angular/pwa
  • React, Vueもかんたんに入れられる

Workbox

Being Faster

Being Engaging & Interactive

6. 面向传统, Serverless 进化之路

Slide

memo

  • 阿里巴巴のサービスをServerlessにしたときの効果、苦労や手順など。
  • BFF 70%
  • Node.js
  • マシンや人の負荷を下げたい
  • すでに過去の遺産がたくさんある
  • Serverless への移行は 2018/10 に準備を開始した
    • 淘宝网,飞猪大BU に反映
  • コストは 100% -> 70% -> 40%
  • Ops のリソース
  • Dev 側は開発完了後はリソース不要(本当に減らすとリスクが高いため減らすことはできない)
  • Note.js のバージョン固定
  • 研究開発のリソース
  • 多能工
  • 開発者、部署が少なくてもできる
  • サーバーへの負荷軽減
    • 今までは 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 を使っている(ここ三年くらい)
  • 導入のメリットを鑑みる
    • APISDK で何をしたいのかが伝わりやすい
    • ただしまだハードルが高い場合がある
  • 新人も助ける

ClojureScript が強いところ

  • 特定の場面で、というわけではない
  • 複雑なデータや仕組みをもつものに使うのが良い

GraphQL

  • fluent
  • filtering
  • reasonable request
  • DB にとっても良いところ?

How the computability of PWAs

GraphQL には swagger や OpenAPI のような標準がある?

  • Browse Schema であり、 API ではないのでそのようなものはないのでは?

ThrottleTime と DebounceTime との違い?