JSConf.asia 1日目 メモと感想 - dev.jgs.me

昨日の CSSConf.asia に引き続き、JSConf.asia に参加してきた。感想とメモ。

#perfmatters - Tools for Apache Cordova Cordova でのパフォーマンスチューニングの話が中心
しばらく Cordova には触ってなかったが相変わらずという印象だった
Webview からネイティブの API を XHR 経由で呼び出しているのでその辺はオーバーヘッドがすごい
一方で WindowsPhone はネイティブで JS が走るのでパフォーマンスはいいらしい
DOM の anchor でページ遷移するのはコストなので onclick で処理する、とか CSS の gradient は遅いので gradient っぽい画像を用意してがんばろ!みたいなバッドノウハウ感がしんどい

Web based 3D camera simulator for Perceptual Computing JS で LeapMotion や Intel Realsense から値をとる話
Websocket でとれるらしい?
ラップトップがお亡くなりになったそうでデモなどがなく残念

Gameprogramming in Javascript CreateJS を使ってタイ語のタイピングゲームを作る話
タイ語はキーボードが4段x2あってつらそうだった
ちなみにタイでは日本語の UI しかないのにねこあつめが大人気らしい。ねこあつめすげえ
CreateJS はともかく RequireJS ってまだ現役なんだろうか
Gulp watch と browser-sync でデバッグしたりとか
ゲームを作るのは学習にも向いている
JS はクロスプラットフォーム向けにちょうどいい

Modular vs Monolith Node.js でアプリケーションを作る上でモジュールに分割して開発するか、モノリスで開発するか、という話
大抵のときで YAGNI(You ain't gonna need it) とのこと
シンプルなモジュールを組み合わせるのはいいけど、早まったモジュール化は危険 statement
function
file
folder
internal package
external package
の順にオーバーヘッドがデカくなっていく

"抽象化はローカルの複雑性を緩和するが、グローバルの複雑性を増す"
"間違ったものは正しい理由によって作られる"
"flat is better than nested"
などなど心に刻んでおきたい金言が多かった
そして結論としては、最初はモノリス的に作っていってそこからモジュールに適宜分けていくような "modulith" がいいんじゃないかとのことだった
また、Google や Facebook も社内で揉んでから OSS として公開してるわけだし早まった Open 化はせずに揉んでからオープンにしてもいいんじゃない?とも話していた

Elements of dance music Web Audio API を使って古き良き90'sの Acid Techno を作っていく
前半に Web Audio の簡単な説明と、音がどうやって出てるかみたいな話があって後半は実際に Web Audio を使って Acid Techno をライブコーディング(もはやコンサート?)していくというような内容
現代の楽譜は JS であり、ペンは Vim なのだ...(!)
JS のカンファレンスで Roland の TB-303, TR-808 の音を鳴らしてるのヤバかった
明後日の Web Audio Hack Day にも参加するつもりなので楽しみ
Electron にも AudioContext あるので GUI のシンセサイザーが作れそうだとおもった

Bio-inspired Frontend Engineering 学生時代に化学をやってた人による ES6 で生命を語るセッション

PM2 この辺のライブラリは PM2 で落ち着いたのかな?nodemon とかもあるけど
デプロイ後のサーバでのなんやかんやを解決するために PM2 を開発したとのこと
PM2 はあまり触ったことがなかったが、CLI もしっかりしているようだし、plugin のようなものをいれれば Web のインターフェイスができたりもするみたいなので便利そうだった
また、最近こういうツールの定番の流れであるが、Web でメトリクスを見れる Keymetrics というサービスもやっているとのこと

Simplicity through Functions Functional Javascript のイントロダクションみたいなセッション
モロに Rich Hicky フォロワーという印象
大半が Functional Javascript の話だったが、終盤に CSP と Transducers の話が出てきて結構面白かった
即座には理解できなかったので調べてみたが、Function を組み合わせてそれを transducer とするような感じなんだろうか...(まだよくわかっていない)

Towards Universal JavaScript 少し前に isomorphic をやめて universal と呼ばないか論者が現れて論戦が行われていたが、universal 側の論客と思われる
結局 isomorphic はサバクラでコードを共有することが主眼だが、universal は環境に依らないコードを書きましょうということらしい。発表でも分からなかったが、JS は実装によって挙動は変わらざるを得ないので真に universal というのは難しいんじゃないかとおもう...
React で サーバサイドレンダリングするデモ

Overboard.js - Where are we going with this? JavaScript を取り巻く環境は日に日に過酷になっていて一見いいことのように見えるが、無限に情報をキャッチアップしていかなくてはならず、しかもその陳腐化も早いので生き残れるのは一部の人、ということになりかねない
ブログとかで新しいライブラリ/フレームワークが取り上げられてたりするけど、それプロダクションで使ってる?
メイの法則「ソフトウェアの効率は18カ月で半減し、ムーアの法則を相殺する」
我々のオーディエンスは我々ほどウェブサービスやデバイスにお金をかけないことを自覚する
開発者側の都合をお客に押し付けない(スピナーでロードするぐらいならサーバサイドで HTML 生成して返せや)
React は DOM の更新が遅いと喧伝しているが、DOM の更新は減って高速化できているかもしれないが、React 自体を読み込む時間や、React が実行する分のオーバーヘッドを考えると結局何も変わっていないんじゃない?
ブラウザはとても賢いから上述の問題も実はそこまで大きな問題ではないのでは
フレームワークを採用することによって学習コストもかかるし、デベロッパの開発環境は整えないといけないし、採用も面倒になる
上述の通り、開発者の都合でお客にコスト(ロード時間、実行時間etc)を押し付けてはいけない

全体的な感想
セッションの面白さでいうと、Web Audio のセッションが一番面白かった。また、もうちょい Fuck yeah React や Fuck yeah Babel みたいな雰囲気かと思っていたが揺り戻しなのかフレームワークから距離を置こう勢が思ったよりいた印象だった。

また、Web Audio のセッションで html にアローを直書きしていて、トランスパイらなくてもいいのか?とおもったがアローはもうブラウザでも大抵動くみたいだし、無理にバベらずとも使える範囲で ES2015 のシンタックスを使っていけばいいんだなという実感が湧いた。MS Edge ならもう大抵のシンタックスは使えるので Edge いいなーとも思ったり。

Microsoft は本イベントをスポンサーしていたり、スピーカーがきてたり、昨日は VS code が OSS 化されたし勢いを改めて感じた。

以下メモ直貼り。



#perfmatters - Tools for Apache Cordova

@ryanjsalva

Cordova について

There is a general perception that apps built using HTML, CSS, and JavaScript are slow

Interaction classes
fluid -> instantaneous -> Fast -> Upper bound on what users will consider responsive
~17ms ~100ms ~250ms ...

Methodology
We identified SIX areas where developers commonly encounter performance issues. To identify these problem areas:

Nexus 7 2013 (Android)
iPad Mini 3 (iOS)
Lumia 928 (WP)


1. The webview tax
2. document object model
3. images
4. animation
5. garbage collection
6. UI controls


(4, 6以外を話す)

Cordova はネイテイブってわけではないので Tax を払っている

memory consumption
native app: iOS > Android > WP > WS
browser: android > iOS > WP > WS
cordova: WS > iOS > WP > Andoid(huge)

startup time
iOS cold が時間かかる
warm はどれもぼちぼち(1-3secぐらい)

device capabilities にアクセスするために XHR 使うのでそれも Tax

Time of data transfer with plugin
WP はネイテイブに js が走るので気にしなくて大丈夫
他はほぼ線形に増える

DOM

bad

_
<ul>
  <li>
    <a href="...">...</a>
  </li>
</ul>

good

_
<li onclick="...">,,,</li>

layout thrashing

read/change はキャッシュするなどして毎回ループを回したりしないように

fast list virtualized

list を仮想化してメモリ効率を良くしてチラつきもなくす

FW 使うのもよし

images

gradients

bad
css の gradient を使う

good
gradient.png を用意してそれを使う(マジか...)

gabage collection

使わなくなった event listener は捨てよう!

element 毎に event handler 作るよりも 1つの event handler で受ける
もしくは親で受けて currentTarget をとる

Memory leaks

var はちゃんと付けような!

Web based 3D camera simulator for Perceptual Computing

@princi_ya

Perceptual Computing => 理解するコンピュータみたいな感じ...?
コンピュータが周りで何が起きてるかを感知する

3D カメラで AR する

AR
現実世界を拡張する

Motion sensing input devices
intel realsense
leap motion
kinect


Motivation behind this idea
JSのSDKがある

The SECRET
WSも使っているぽい...?

Websocket
full-duplex communication channels over a single TCP connection

Websocket も new Websocket するだけでよくなったし便利になったもんだ...

LeapMotion から ArrayBuffer で受け取ってゴニョる

Gameprogramming in Javascript

Thai Typing Game

タイは LINE 使ってる人多いのかな

Thai Keyboard やばい
キーが4段x2

Lives in Bangkok
Write Go for Digital Ocean
Server side developer
Book on Go: Microservices in Go

Gaming
WoW
タイNo.1ゲーム: ねこあつめ(マジか)
日本語しかUIないのにメチャ流行ってる

What is serious gaming?
education for learning

Gamification
ゲーミフィケーションはモチベートとしていいよね

Why Javascript

CreateJS

gulp watch + browser-sync

RequireJS

spritesheets
フレーム毎にスプライトを作る

parallax scrolling

creating

scene creation / transition

cordova

Fix native keyboard, better background sound

Electron

Conclusion
Make games for learning
Writing games in Javascript is easy
Avoid cross platform tools if possible

Modular vs Monolith

@timoxley

Nodesourceの人

Node.js: Culture of extreme modularity

me in 2012: Avoid frameworks

Building a library
reusable, more robust, higher quality code...

me in 2012: library-first development

me in 2015: yes but, there are some major caveats

rabbit holes everywhere

libraries are a lot of work

nothing for free

most of the time: yagni

what problem am i trying to solve?
is this the simplest thing that will work?

avoid premature modularisation
早まったモジュール化は避ける

statement
function
file
folder
internal package
external package(bad default)

上から下にかけてオーバーヘッドが大きくなっていく

assume your first attempt will be bad
最初の取り組みはクソだと自覚する

code retreat
撤退の規定?

don't get precious about your code
コードは貴重ではない(?)

over-engineering: the adding of unnecessary complexity

complexity kills projects
セキュリティの問題とか、複雑さが増すと死ぬ

over-engineering is more common than under-engineering
over-engineering is more costly than under-engineering

the wrong structure can be more costly than no structure at all

defer decisions

draw in pencil before you draw in ink

abstractions decrease local complexity while increasing global complexity
抽象化はローカルの複雑性を緩和するが、グローバルの複雑性を増す

building the wrong thing for the right reasons
間違ったものは正しい理由によって作られる

build the simplest thing that works

flat is better than nested
at the statement level: avoid nested if/else
...

the sweetspot is middle
A modulith?

avoid premature modularisation

monolith first

open source later
Google や FB は社内で揉んでから公開している

less abandonware
放置をしない

Elements of dance music

What is music?
My simple...

Music = Rhythm + Melody + Timbre

This talk focus for timbre

Acid what?
Chicago & detroit, 1990

Roland TB-303
Bass シンセサイザー

Roland TR-808
ドラムマシン

Why acid techno
sounds good
simple to code

_
var ac = new AudioContext

Web Audio API 101

AudioContext
OscillatorNode
AudioParam(freq, det)

Basic waveforms
sin, パルス...

Volume enveloppes

Pitch and gain enveloppes: simple kick

Detuned sawtooth: bring in the bass

A brief excursion to the frequency domain

Filtering the bass
HPF, LPF

Noise for maracas

Cheating for the clap
ファイルから読み込み

ライブコーディング

Bio-inspired Frontend Engineering

@gsklee
KKBOX

chemistry & molecular biology(academic years)

Astronomical vs atomic scale
filaments of our universe
end-stage red giant

We are all starchildren

Why we are here
convey ideas and thinking processes

ES6 で生命を定義するぞい

バベるぞい

ES2015 classes are designed to be maximally minimal
are still prototypical
constructor
unburden the function keyword
better for static analysis and readability
appear at exactrly where the next level of language abstraction...

technology be itself has no good or bad
it's the intent that matters

Fragile base class problem
global "CASCADING" style sheets, sass @extend, angularjs $scope

css modules, cssmodules class composition, react props

Long and haky inheritance chain bye!

mixins & traits?

React の lifecycle は細胞の lifecycle とも...みたいな話っぽい(よく分からない)

http://slides.com/gsklee/bio-inspired-frontend-engineering/

PM2

PM2 の Author
keymetrics の CEO/Founder

My app is ready now what?

デプロイ後の問題を解決するために PM2 を開発した

Structured application & workflow

resources management and optimization
extend capabilities

86th most popular JS project

http://stats.js.org/

pm2 のインストールとか

他の言語のアプリケーション動かしたりとか

cluster-mode

reload, graceful reload, scale

inspecting applications

pm2 list list processes

pm2 show <app-name|id> more infomation

microservices args are ugly => json でコンフィグ書けるよ〜

deployment system
json で定義したりとか

modules

pm2 のプラグイン?みたいなのをインストールできる

pm2-webshell => ブラウザデシェルが叩ける(tty.js経由)

monitoring with keymetrics
https://keymetrics.io/

Simplicity through Functions

NZ
SMX

Limits
we can only consider a few things at a time

reliability
simplicity vs complexity
easy vs hard
functional programming style
javascript code examples

1. terminology


reliability

adj "able to be trusted"

on time, controlled costs, able to change, correctness, quality, performance

simplicity is prerequisite for reliability

simple => sim plex
complex => com plex

simple
one braid or fold
one role, one task, one concept, one dimension

complex
braided or folded together

ease < aise < adjacens

lie near
not difficult, requiring no great labor or effort

Simple != Easy

limits
we can only hope to make reliable those things we understand
we can only consider a few things at a time
intertwined/braided things must be considered together
...

construct/artefact
for developer / for users

complect
to interleave, intertwine, braid
don't do it

Functional programming
no single definition
some features readily available in Javascript
some features require care or libraries or helpers in Javascript
...

difference between OOP vs FP

1. Functional Javascript


values 42 , "hello" => simple
40 + 2 //42 , "hello" + "world" // hello world => simple
identity => simple
state => complex
const => simple
maps => simple
mutable maps => complex
immutable collection(immutable.js) => simple

why immutability?
most complexity comes from tracking mutation and maintaining state
...

loops

branching => complex
recursion
recursion with TCO

impuew funcrion

map => simple
reduce => simple
filter => simple
forEach => complex

OOP / methods etc.

namespaces functions values => simple
curry

event handlers

communicating sequential processes
CSP

transducers

_
Immutable.fromJS(
  seq(
    Immutable.Vector(1, 2, 3, 4, 5),
    compose(
      map((x) => x + 10)
      filter((x) => x % 2)
    )
  )
)

_
const c = chan(map((x) => x + 10), filter((x) => x % 2))

simplicity is not an objective in art
...

Towards Universal JavaScript

http://slides.com/sarmadsangi/towards-universal-javascript

1. what? why universal javascript?
2. how to build a universal javascript


Sarmad Sangi
RedMart

what is universal javascript

universal
javascript code which is environment agnostic

isomorphic
that any given line of code (with notable exceptions) can execute both on the client and server

isomorphicと違って環境に依らない

SEO
Performance
Mainttainability

SEO
How bots see our javascript applications
UAでbotだったらPhantomJSで描画したものを返す

Universal javascript では JS でレンダリングしたものを返す(?)

Maintainability
Shared logic between server and clients

How to build a universal javascript

Overboard.js - Where are we going with this?

@codepo8

Unobtrusive Javascript

MS Edge の人

Authoring web sites and enhancing them with JS
Scripting/Extending applications(Illustrator, Homesite, VS code, Sublime...)
Authoring re-usable widgets for people who don't know JS
Working on libraries/frameworks
Working on Browsers and JS engines
Working on server-side Javascript
Designing APIs for JS consumption

Javascript is a versatile, creative...

we keep treating js like a one size fits all environment we can control

lately we go overboad with js

we're going full speed on innovation
componentised web
modules/packages
extensible web manifesto
web assembly/asm.js
postcss
progressive apps

the vicious innovations cycle

we force ules onto ourselves that might be overkill

we live in a hype fuelled environment
新しいライブラリを記事にしたりするけどプロダクションで使ってなくない?

Moore's Law

we work with amazing hardware

we work with great connectivity

we get paid well - for a job we like

we work with amazing browsers

May's law

we move fast and run in circles

the web is in a sorry state
the median page's time to interact is 5.5 secs, and fully loads in just over 15secs
the median page is 2MB in size and contains 170 resources

waiting isn't fun

オレたちのオーディエンスはオレたちほどウェブサービスに金をかけることや、アップグレードすることに興味がない

growth happens where moore's law isn't a reality(asia)

moore's law stopped working when we hard-wired hardware and software

as developers, we are asked to do the impossible
make it work the same in every browser
make it easy to maintain and we want to control everything
make sure it is also accesible
don't spent too much time on it, let's release it now and fix it later
use this analytics code you have no clue about...

今日のすごいものは明日には死んでるかも

a simpe way to detect how old a part of our massive site is checking which version of jQuery was used in that part of it

we break the web for the sake of developer convenience

The cost of frameworks

the dom is slow?

time in framework | dom manipulation

vanilla vs react

バニラだと写真が増えても時間が増えない(むしろ減る)がreactは上がり続ける

browser do an incredible amount of work for us
display of all kind of media content
fix minor mistakes in our code
optimise our code to run smoothly
provide us with developer tools
provide us with deep insights what our code does to the computer
allow us to automate testing in them and debug remotely on devices we don't even own

big-rig

framework は bootstrap に時間がかかる

fixing everything with a lot of javascript help us, not necessarily our audience

cost for developers
learning new frameworks
re-learning frameworks
debugging frameworks
setting up developer environments
cutting down on possible hires/adding to onboading time

the real important bit is the cost for our users
...

the javascript learning process has always been interesting

JS を学習するのはつらい(Stack overflow見たりとか...最後はIEに殺意を覚える)

ES6

controlled environments allow us to use the newest and coolest and find best practices

let's not make the javascript world overly complex and scary

ES* caters to different audiences

babel の Lean ES2015はいい

let's turn competition into education and fun again

original: http://dev.jgs.me/2015/11/19/jsconf-asia-day-1
#20151119 #1119

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく