#builderscon 2017でトークしてきました

おひさしぶりです!!!ブログ、とても間が空いてしまいました。

8/5(土)、Builderscon 2017に参加&登壇してきました!! 

 

#builderscon2017

Buildersconは広い会場で、色々なトークや外国からのゲストの話を聞けて、3日間もあるし、エンジニアのフジロックみたいな感じ!!すごく楽しみにしてた!! 

 

Make You A React

僕は3日目の参加で、Make You A React  – How to make your own SPA library?  というトークをしました。

僕はHyperAppというJSライブラリのVirtualDOM、それからPicodomというVirtualDOMを作ったんだけど、VirtualDOMは本当に楽しいなーと改めて感じたので、今回のトークを作った。

自分でSPA(Single Page Application)を作りたい、自分のライブラリをVirtualDOMで作りたい、VirtualDOMがどういう風に動いているか知りたい、などという時にオススメの情報をいろいろ入れました。

 

ちなみに、英語と日本語ミックスでやろうと思っていたけど、会場の様子を見て、急きょ日本語に変更しました。m(_ _)m

 

内容のレビュー

内容を簡単に振り返ってみるので、上のスライドと合わせて読んでくれたら嬉しいです。

 

Declarative 方法とImperative 方法

HTMLとJavaScriptをmixして書くことができるJSXの話から始まり、そこで重要になってくる、コードの書き方を説明していきました。

HTMLを表示するのにはDeclarative 方法とImperative 方法があるけど、書き方はDeclarative 方法の方がずっと簡単。だけど、Imperative 方法は、書き方は面倒だけど動的な表現をすることができる!

だから、両方のイイところだけをとって、簡単な書き方で動的な表現ができたら嬉しい。そこで、VirtualDomが活躍できる。

具体的にはVirtualNodeを作って、DOMをpatchするという方法を使います。

 

このことでさらに便利なのは、例えば、要素を並べ替えたい時とか。Elementたちをアルファベット順にしたい、人気順にしたいetc…、特に複雑な作業じゃなくても、DOMだとそれを自分で並べ替えないといけない。それは大変すぎる。

そういう時、VirtualDOMを使うと非常に便利!!

 

VirtualDOMの構造

細かく仕組みを見ていくと、こんなふうになっている。

f:id:jbucaran:20170806173711p:plain

 

この一つ一つについて、コードを使いながら細かく説明していきました。コードはスライドをみてね。

h.jsは、VirtualNode を作ってくれるもの、patch.jsは、2つのVirtualNodeの差分を出して、DOMをアップデートしてくれるもの。

 

patch.js

patchはnodeに対して、Create, Update, Removeという3つのアクションを行ってくれます!!

f:id:jbucaran:20170806174313p:plain

patchから、Update / Createをして、setData。removeならそのままRemove。

 

Updateはこんな感じの流れで行われる。

f:id:jbucaran:20170806174649p:plain

VirtualDOMはユニークなkeyを与えて、作業を行います。

 

VirtualDOMべんり!

VirtualDOMは、スピードをあげてくれるものではなく、デベロッパーの作業を便利にしてくれるもの。

ユーザーはいつでも、表示して欲しいものを求めるだけで、それがどのようなプロセスで表示されるか、知る必要、心配する必要がありません。これだけで本当に、作業は単純になり、僕たちにとってこんなに嬉しいことはない!

簡単な宣言の書き方で、良いUIを作っていこう。やっていき!!!(言ってみたかっただけ)

 

本当にコードがたくさんあったから、オーディエンスの人たちは大変だったと思うけど、聞いてくれてありがとうございました! 

 

イタレリツクセリ

それからイベントの素晴らしさについて。

会場は日吉にある慶應義塾大学のホールだったんだけど、とても綺麗なところでした。朝食&ランチも用意されていたり、コーヒーや水はフリーで飲めたりと素晴らしかったし、プレゼントもたくさんもらっちゃった。

Tシャツ、バッグ、でかしゃもじ、シール!

f:id:jbucaran:20170806182339j:plain

ありがとうございました!バッグは帰り道にいきなり役に立ったし、Tシャツもすぐ着たし、しゃもじは部屋に飾ったよ!

 

とても楽しかった。今回は3日目の土曜日だけの参加だったんだけど、来年は全部参加できたらいいなー!

 

それではまた!