Atomエディタで振り返る、昨今のWeb周辺事情

by tyage

Slide 1

Slide 1 text

Atomエディタで振り返る昨今のWeb周辺事情 2015/05/16 @tyage

Slide 2

Slide 2 text

こんにちは

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

チューターの山崎です ● twitter: @tyage ● 京都の大学の4回生 ● セキュリティ&プログラミングキャンプ2010卒業生 ● CTF ○ tyage ∈ Epsilon Delta ⊂ binja ⊂ fuzzi3 ドーモ、ミナ=サン

Slide 5

Slide 5 text

話すこと

Slide 6

Slide 6 text

面倒くさいのは Webセキュリティだけじゃない

Slide 7

Slide 7 text

アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化

Slide 8

Slide 8 text

アジェンダ最近のJavaScript周辺の話題を軽く振り返ってみます ※ エディタ戦争はしない

Slide 9

Slide 9 text

Atomエディタで振り返る昨今のJavaScript周辺事情 2015/05/16 @tyage

Slide 10

Slide 10 text

アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化

Slide 11

Slide 11 text

Atomエディタの話

Slide 12

Slide 12 text

Atomエディタ(以降Atom) ● ナウでヤングにホットなテキストエディタ ● 去年OSSになってからとにかく盛り上がってる

Slide 13

Slide 13 text

Atomざっくり ● Chromiumとio.jsで動くエディタ ○ エディタだけど、中身はWebページ ● Webページからio.jsが叩ける!!! ○ 後述のelectronをベースに作っている ○ XSSできると... ● 内部のコードはほぼCoffeescript

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

electron(旧名: Atom shell) ● HTMLとJSでデスクトップアプリケーションを作れるフレームワーク ○ nw.jsと似てる ● chromiumのrendererプロセスとbrowserプロセスにio.jsが組み込まれている ○ Webサイトではできなかったあれこれができて便利

Slide 17

Slide 17 text

https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor

Slide 18

Slide 18 text

electron(旧名: Atom shell) ● 各種アプリケーションで採用 ○ VSCode(Microsoft製エディタ) ○ Vivaldi(元OperaCEO製ブラウザ) ○ Slack(チャット)

Slide 19

Slide 19 text

Atom, electronがとにかく盛り上がっている（気がする）

Slide 20

Slide 20 text

アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化

Slide 21

Slide 21 text

サーバサイドJS

Slide 22

Slide 22 text

● 今年の2月まではnode.js ● 今年の2月からio.jsを採用 ○ 正確には https://github.com/atom/node AtomでのサーバサイドJS

Slide 23

Slide 23 text

● 去年の末にnode.jsをフォークしてio.jsができる ○ リリースサイクルを早める ■ 新しいバージョンのV8のサポート ○ オープンガバナンスモデル ■ 開発過程が外から見える ■ 他の開発者がコントリビュートしやすいように node.jsとio.js

Slide 24

Slide 24 text

● io.jsとnode.jsが合流するかも？ ○ node.js 3.0?(もしくは4.0, 5.0, ...) ○ Microsoftが支援体制に入った！ ■ https://github.com/microsoft/node node.jsとio.js

Slide 25

Slide 25 text

● 5/14にio.jsとnode.jsが合流することに決定！ ○ node.js 3.0?(もしくは4.0, 5.0, ...) ○ Microsoftが支援体制に入った！ ■ https://github.com/microsoft/node node.jsとio.js

Slide 26

Slide 26 text

おめでとうございます

Slide 27

Slide 27 text

アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化

Slide 28

Slide 28 text

HTML関係のJSライブラリ

Slide 29

Slide 29 text

● SpacePen ○ Atom自家製UIライブラリ Atomでの遷移

Slide 30

Slide 30 text

● 去年まで使われていたAtomの自家製ライブラリ ● jQueryを継承した関数 ○ class View extends jQuery (※CoffeeScriptのclassです) ● 最近はWebComponentsに対応したらしい Space pen

Slide 31

Slide 31 text

class NiigataMiniCamp extends View @content: -> @div => @h1 "日程" @p "5/16 - 5/17" (new NiigataMiniCamp).appendTo "body" Space pen

Slide 32

Slide 32 text

● SpacePen ○ Atom自家製UIライブラリ ● → React.js ○ 噂のVirtual DOM Atomでの遷移

Slide 33

Slide 33 text

● facebook製のUIフレームワーク ○ サーバサイドでHTMLを生成する感じでHTML作れる ● VirtualDOM, one way data flow, jsx, flux… ● Atomでは去年の7月ごろにReactで書かれたエディタがデフォルトで使われるように ○ jQueryからの脱却！ React

Slide 34

Slide 34 text

● テンプレートオブジェクトからHTMLが生成される ○ JSX記法が使えて、なんとなくPHPっぽい React var App = React.createClass({ getInitialState: function() { return { text: click me } }, changeText: function() { this.setState({ text: clicked! }) }, render: function() { return

{this.state.text}

} }); React.render(, document.body); click me clicked!

Slide 35

Slide 35 text

{this.state.text}

} }); React.render(, document.body); clicked! click me

Slide 36

Slide 36 text

● ただし、速度が落ちると困る ○ stateが変わるたびにDOMを更新しているとリフローで遅そう ● VirtualDOMは速いらしいぞ ○

から生成されるのは実際のDOMではなくVirtualDOM ○ VirtualDOM同士の差分を計算して、必要なところだけ一気更新するから速いらしい ■ さっきの例だと、textNodeだけ置き換える ■ requestAnimationFrameのタイミングで更新？ React

Slide 37

Slide 37 text

● SpacePen ○ Atom自家製UIライブラリ ● → React.js ○ 噂のVirtual DOM ● → WebComponents ○ 男ならDOM APIを叩くべし!! Atomでの遷移

Slide 38

Slide 38 text

● Atomでは去年の10, 11月ごろにCustom Elementや Shadow DOMといった要素を取り入れた ○ どちらもWebComponentsの仕様 ● WebComponents ○ Webの機能をコンポーネント化してプラグインとして使えるように ○ 上記以外にHTML Imports, HTML Templatesを含む WebComponents

Slide 39

Slide 39 text

● みたいなオレオレ要素が定義できる ○ 既存の要素の拡張もできる Custom Element class SecCamp extends HTMLElement { createdCallback() { this.textContent = '応募締め切りは6/22' } } secCampElem = document.registerElement('sec-camp', SecCamp) console.log(new secCampElem())

Slide 40

Slide 40 text

Atomでは... Custom Element

Slide 41

Slide 41 text

● DOMツリーをセマンティック用の構造と、見た目用の構造に分割 ○ 本質的でない(見た目のための)DOMを、ツリーの構成上隠すのでShadow DOM ○ CSSセレクタ, JSからアクセスする場合は専用のAPIを使う ● 今までだとiframeとかcanvasが近い Shadow DOM

Slide 42

Slide 42 text

Shadow DOM

this is not shown

content = document.querySelector('#content') shadow = content.createShadowRoot() shadow.textContent = 'this is in shadow' content.textContent // => 'this is not shown' content.shadowRoot.textContent // => 'this is in shadow'

Slide 43

Slide 43 text

● 実は身近なところに... ○ Chrome devtoolsで ”Show user agent shadow DOM” をチェック Shadow DOM

Slide 44

Slide 44 text

Shadow DOM

Slide 45

Slide 45 text

● 今年の2月頃からReactをやめて、直接DOM APIを叩くようになった ○ React依存があまりよくないという判断 ○ Atom上では直接DOM APIを叩くほうが早かったところで、Reactはどこに？

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

DOM API直打ち

Slide 48

Slide 48 text

● SpacePen ○ Atom自家製UIライブラリ ● → React.js ○ 噂のVirtual DOM ● → WebComponents ○ 男ならDOM APIを叩くべし!! Atomでの遷移

Slide 49

Slide 49 text

で、結局どれがいいんだ！

Slide 50

Slide 50 text

わからん！

Slide 51

Slide 51 text

アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化

Slide 52

Slide 52 text

AltJS

Slide 53

Slide 53 text

AltJS ● JavaScriptにコンパイルできる言語の総称 ○ 主な理由はJavaScriptを書きたくないから ● 数年前から大量発生 ○ https://github.com/jashkenas/coffeescript/wiki/List-of-languages- that-compile-to-JS ● AtomではCoffeeScript, babel, TypeScriptをサポート

Slide 54

Slide 54 text

CoffeeScript ● Atomでは拡張子をcoffeeにすると使える ● Atomはほぼこれで書かれてる ● Ruby, Pythonっぽく書ける point = () -> Math.random * 100 result = if point > 50 then 'good' else 'bad' data = name: 'tarou' result: result

Slide 55

Slide 55 text

babel(旧6to5) ● ECMAScript6のコードをECMAScript5のコードに変換 ○ AltJSっていうと怒られるかも...? ● Atomでは "use babel" プラグマを入れると使える class MyArray extends Array { constructor() { super() this.push('initial data') } }

Slide 56

Slide 56 text

TypeScript ● JavaScript + 静的型付け ○ ECMAScript6の先行実装っぽい面も ● Atomでは拡張子をtsにすると使える interface Person { name: string } function howOld(name: Person) { return "You are 39." } howOld({ name: "tamura" })

Slide 57

Slide 57 text

ちょっとした懸念 ● CoffeeScriptで宣言したclassをbabelのclassで継承するとちゃんと使えるの？ ○ 逆も同様 ● → 今のところ(僕は)問題なかったけど不安...

Slide 58

Slide 58 text

まとめ

Slide 59

Slide 59 text

まとめ ● 未だにJavaScriptのUI周辺は流動的で追うのが大変 ○ 今回紹介した物 + angular, polymer, etc… ○ 解析もめんどくさくなってる(特にShadow DOM) ● (動作環境が固定されていれば) ライブラリなしのほうが潔いのかもしれない...? ○ セキュリティ面で不安誰かなんとかしてくれ~~~~

Slide 60

Slide 60 text

ありがとうございました