vaguely

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

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

JavaScript China Event

はじめに

こちらも途中ですが、 JSConf China 2019 2日目の内容をメモっておきます。

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

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

会場

  • 9:55開始
  • 開場時点での参加者数は昨日より少ない。
    • チケットのやりとりで Keynote に間に合わないのを恐れたため？(つまり自分と一緒)
    • 開始時点でも昨日より少なかった(昨日飲みすぎ？)
  • PC自体は共通のMacを使ってるっぽい
  • 中国語セッションは 3/8

0. Opening

  • 開発者同士の交流、ということを再度強調

Keynote. Learn as I write the Docs

資料

昨日のSessionについて

  • 各Sessionの良いところをかんたんな概要に触れながら。

フロントエンド、React を学んできた4年間

  • 新しい技術にふれるとき、たくさんのDocsを読むことになる

4 years as Front End

  • 最初は何もわからなくてもとにかく楽しかった。
  • 3年目、より多くを得るために、Conferenceに参加
  • Redux
  • React Redux

自分自身について。

  • 十分なキャリアがあるか？
  • 英語の解釈問題
  • 書くことの難しさ

Richard Feynman

  • Names don't constitude knowlege

  • tool や library は開発者を助けてくれる

  • いつ、どこで学ぶか？

  • 誰かに教えることは、学ぶための最も良い方法

    • Docsを書くことはこのことに繋がる
    • どう書けば相手(ユーザー)に伝わるか、を考えなければならないから

tackling the challenge

  • 英語で書くこと。
    • 細かい Typo やミスなど気にしない
    • 完璧じゃなくても良い
    • Tipsの共有による練習
    • thesaurusのようなツールを使う
    • proof reading
    • 他の人に説明する
    • 1-1 sharing
    • 習慣にすること
  • メンテナと直接やり取りできる素晴らしさ
  • ライブラリのアーリーアダプターになる
  • チームにおけるドメインエキスパートになること

Docs

2. Serverless is your BFF

start

  • かんたんなアバターを作るサービス モバイル、PCそれぞれからBFFに接続-> 各Serviceに

Webの歴史

  • 1.0はとてもシンプル
  • 2.0はたくさんのサービス・機能が生まれた。
    • Front end/backend に別れた
    • Frontendはツールやフレームワークの登場によりかんたんに。
    • Fullstack

Full stack?

  • UI -> Product
    • 仕様ぎめ、開発、Ops
  • Node.jsによりFrontend、Backendで再利用できるコードも増えた
    • ただしFrontend、Backendのやり取りは依然困難。
  • Backend はとても複雑
  • Scalable, Security, Debuggable...
  • Prototype -> Production architectureに移るに当たり、気にするものがいっぺんに増える
  • Autoscale

Cloud computing

  • すべて自前のマシンで用意するOn-premissから、FunctionsのみのFaaSへ。

    • ビジネスにフォーカスする

  • Node.js

    • Faas
      • SCF

  • tencent cloud でどのようにアップロードしているかデモ

    • アップロードした写真に帽子をつける
  • Ergonomic Upload code and go

Serverless is economic

  • reduce team size
  • 使っただけ払う

VMだと必要なときもそうでないときも同額かかる

Serverless is reliable

summary

  • Serverless の紹介。Webの歴史、良いところを取り上げ、Tencent cloudを使うデモも。
    • Live coding, Live debugging

3. Entropic package registry

What is package manager?

  • Registory <--> client
  • Do install work?
  • publish permission

What is package?

  • Softwareをひとまとめにしたもの
  • NPMなどであつかう
  • Npm registry -> npm -> disk
  • disk -> webpack -> bunndle ひとまとめに

Node.js

  • Node.jsも一つの file manager
    • disk -> Node.js -> commonjs
    • 動的に package manager を動かす？

yarn

  • cache -> yarn -> Pnt resolution

Plugin

  • loader of Node.js

Tink

  • Disk にキャッシュする

Recap

基本的に

  • 全部 Package managerを使う。

Entropic

  • Entropic は Package を一箇所にまとめるのではなく、個別に分かれている
  • それらが連携しあって動く。

4. Redux Based Modular Design

Slide

Motivation

  • build large app
  • Modular -> 模块化
  • サイズが大きくなってくると、
    • Combine reducers,Middleware, connection
    • 機能ごとにクラス分け

modularity

困難

Pros

  • CDのしやすさ Divide, conquer
  • テストの完全自動化

Motivation & Goal

Redux Cons

  • Immutable data
    • 実現が難しい？
    • verbose update operations
  • Boilerplate Code が増える
  • Modularity
    • Loose, difficult
    • ロジックが分割しづらい(UIに入り込んでるとか)

Solution

usm-redux

  • Reducer
    • @state decorateを使って状態管理、
    • @action で処理を定義。関数につく。
      • 状態を変える
      • Router 的な動きが実現できるので、switchなどを取り除ける
      • 引数にstateを追加

        Action type

        dispatch

  • イベント処理の分割

Module Dependency

  • Module inject
  • Customizable Iocのようなものをつかう

Immutable data update

immer
  • 今の値をベースにImmutable stateを作る

benefit

  • 便利
  • かんたんにカプセル化できる
  • IoCなどは自分で好きなものを選べる
  • Reduxの原則や動きを引き継ぐ

5. Diving into TypeScript design metadata with NestJS

Slide

memo

Design-time metadata

  • Reflection

Parameter type metadata

  • extract type
  • DI, Type -> Nest.js feature

DIの説明

  • @Injectable() をつけることで、複数のDependencyを解決できる

Compiler metadata

decorate( [metadata('design:parametypes', [HttpService, Logger])], CatsService,

Reflection API

Reflect.getMetadata('design:parametypes',CatsService)

Pipes

  • castなども使われる

  • PipeTransform{ transform(

    ) }

    Reflection API challenges

    interfaces

  • 依存interfaceの場合、JSにしたときはObjectとなる

Potential solution

  • abstruct solution

    Generics

  • Genericsの場合にどう解決する？
    • JSにするとクラス情報はなくなってしまう *

      Circular dependency

  • 依存クラスがJS変換時にundefinedに
    • @Inject( =>

Type metadata

export class User{ email: string; name: string; } ↓ export class User{ @Property email: string; @Property name: string; }

複数プロパティがあるとき Reflect.getMetadata('design: type, new User(), 'email')だと正しくmetadata がundefined になってしまい、Typeがとれない

@Propertyを使う

What's the point

AST

TypeScript Plugins

Return type metadata

  • OpenAPI gRPC, GraphQL mutations

戻り地がPromise< string>のとき、Reflect.getMetadata が Promiseになる。stringは？

Recap

  • design-time metada

  • TODO: news letter 登録

6. Writing code to refactor code

Slide

概要

はじめに

  • Zenhubでは CommonJS-> ES6に変更した。
  • 1752files
  • 5 years old

Large scale refactoring のながれ（失敗）

  1. Find and Replace
  2. どうにもならん＼(^o^)／

ASTの紹介

  • astexplore.net (AST Explorer)で見ることができる
  • JSON形式になる

codemod

  • find & replace inspect the code

    • Prettier
    • ESLint autofix

  • webpack, babel transpilationはcodemodではない

  • Codemod in action
  • Transforming requires to import
    • CommonJSの　var a = require("doge.js").wow => import { wow as amused } from "doge.js"
  • iTerm2
  • npx codemod としてるから、npm でインストールするツールか？

  • from が同じものがある場合、combine?

  • ASTはリファクタリングのときにも使える

  • Codemodだけでなく、StaticTypesなどいろんなツールがある

7. JavaScript 的执行 & 性能

Slide

はじめに

  • a.b = 123 と a[' b'].b のパフォーマンス差？
  • esparse
  • V8と? の比較
    • d8でどう解釈されているか
  • BinaryExpression

bytecode

  • staGlobal
  • jerry --show-opcodes add.js
  • V8での解釈・実行の流れや発生したパフォーマンス問題など

WebAssembly

JavaScript の歴史

V8

  • V8によって、JavaScriptがWebフロントエンドでの立場を不動のものにした？

8. 去除迷雾， 漫谈 WebAssembly

  • C/C++, Go などの複数のから WAコードを生成
  • ブラウザ上では実行できない？

WAはJavaScriptにとって代わるか？

  • 補うもの
  • JSで直接WebAssemblyを書くことはできない

実行速度はあまり変わらない？

  • V8の場合、JS -> AST -> ignition -> turofan -> local machine code
  • WA(.wasm) -> Liftoff -> TurboFan -> local machine code

パフォーマンスは変わらない？

  • WAはDownload, Decodeを同時にするのでパフォーマンスが上がる
  • 最適化

WA moduleの構成

  • function signature
  • run time

おすすめの言語

  • Rust
    • WA を推し進めているMozillaが作っている言語

Demo

  • 書くときは普通にRustをかく。実行時はバイナリコードに。
  • バイナリコードに変換する？ツールあり。

Panel discussion

翻訳するときに、ネイティブのような表現ができない

  • Googleなどで表現を調べる、ドキュメントを見てみる
  • 英語から中国語に直すときも苦労する

問題のあるパッケージが混ざった場合にどう対応するか

  • npmなどと同じ？

Nest.jsでInversifyJSを使わない理由？

  • InversifyJS自体は使っていないから実際のところはわからないが、 使い方が違う？
  • 少なくともInversifyJSなど他のものを使うことは進めない

ASTによるリファクタリングが向いてないとき？

CommonJS -> ES6には使えるが、JS -> TSではASTによるリファクタリングが有効か？

  • おそらく

Jerry.js

WAのセキュリティ上の問題など？将来的な問題が発生する恐れはある？

  • すでに対応はしている

ドキュメントが人に伝わらないとき？

  • 言い方を変えてみる、細かく説明してみる
  • 時間をあけてもう一度自分で読んでみる。
    • 理解できる？

Middleware of NestJS?

  • Expressのものと同じ？
  • HTTPアプリケーションを作るときには依存する

Nest.js は GraphQL に対応している？

  • Yes.
  • GraphQL のデータの作り方は2種類あり、Code firstとData first?がある

WAはマルチスレッドなどの対応している？

  • している？が使ったことはない
  • 基本的にもとの言語に依存する
  • ブラウザの機能を使う？

CherryScript Quick.js?

Entrophic Production ready?

  • No
  • いつ？ -> まだわからなそう