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

Transcript

1. Atomエディタで振り返る 昨今のWeb周辺事情 2015/05/16 @tyage
2. こんにちは
3. 自己紹介
4. チューターの山崎です • twitter: @tyage • 京都の大学の4回生 • セキュリティ&プログラミングキャンプ2010卒業生 • CTF ◦ tyage ∈ Epsilon Delta ⊂ binja ⊂ fuzzi3 ドーモ、ミナ=サン
5. 話すこと
6. 面倒くさいのは Webセキュリティ だけじゃない
7. アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
8. アジェンダ 最近のJavaScript周辺の話題を軽く振り返ってみます ※ エディタ戦争はしない
9. Atomエディタで振り返る 昨今のJavaScript周辺事情 2015/05/16 @tyage
10. アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
11. Atomエディタの話
12. Atomエディタ(以降Atom) • ナウでヤングにホットなテキストエディタ • 去年OSSになってからとにかく盛り上がってる
13. Atomざっくり • Chromiumとio.jsで動くエディタ ◦ エディタだけど、中身はWebページ • Webページからio.jsが叩ける!!! ◦ 後述のelectronをベースに作っている ◦ XSSできると... • 内部のコードはほぼCoffeescript
16. electron(旧名: Atom shell) • HTMLとJSでデスクトップアプリケーションを作れるフレーム ワーク ◦ nw.jsと似てる • chromiumのrendererプロセスとbrowserプロセスにio.jsが 組み込まれている ◦ Webサイトではできなかったあれこれができて便利
17. https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
18. electron(旧名: Atom shell) • 各種アプリケーションで採用 ◦ VSCode(Microsoft製エディタ) ◦ Vivaldi(元OperaCEO製ブラウザ) ◦ Slack(チャット)
19. Atom, electronがとにかく 盛り上がっている （気がする）
20. アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
21. サーバサイドJS
22. • 今年の2月まではnode.js • 今年の2月からio.jsを採用 ◦ 正確には https://github.com/atom/node AtomでのサーバサイドJS
23. • 去年の末にnode.jsをフォークしてio.jsができる ◦ リリースサイクルを早める ▪ 新しいバージョンのV8のサポート ◦ オープンガバナンスモデル ▪ 開発過程が外から見える ▪ 他の開発者がコントリビュートしやすいように node.jsとio.js
24. • io.jsとnode.jsが合流するかも？ ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った！ ▪ https://github.com/microsoft/node node.jsとio.js
25. • 5/14にio.jsとnode.jsが合流することに決定！ ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った！ ▪ https://github.com/microsoft/node node.jsとio.js
26. おめでとうございます
27. アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
28. HTML関係のJSライブラリ
29. • SpacePen ◦ Atom自家製UIライブラリ Atomでの遷移
30. • 去年まで使われていたAtomの自家製ライブラリ • jQueryを継承した関数 ◦ class View extends jQuery (※CoffeeScriptのclassです) • 最近はWebComponentsに対応したらしい Space pen
31. class NiigataMiniCamp extends View @content: -> @div => @h1 "日程" @p "5/16 - 5/17" (new NiigataMiniCamp).appendTo "body" Space pen
32. • SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM Atomでの遷移
33. • facebook製のUIフレームワーク ◦ サーバサイドでHTMLを生成する感じでHTML作れる • VirtualDOM, one way data flow, jsx, flux… • Atomでは去年の7月ごろにReactで書かれたエディタがデ フォルトで使われるように ◦ jQueryからの脱却！ React
34. • テンプレートオブジェクトからHTMLが生成される ◦ JSX記法が使えて、なんとなくPHPっぽい React var App = React.createClass({ getInitialState: function() { return { text: click me } }, changeText: function() { this.setState({ text: clicked! }) }, render: function() { return <div onClick={this.changeText}> {this.state.text} </div> } }); React.render(<App/>, document.body); click me clicked!
35. • テンプレートオブジェクトからHTMLが生成される ◦ JSX記法が使えて、なんとなくPHPっぽい React var App = React.createClass({ getInitialState: function() { return { text: click me } }, changeText: function() { this.setState({ text: clicked! }) }, render: function() { return <div onClick={this.changeText}> {this.state.text} </div> } }); React.render(<App/>, document.body); clicked! click me
36. • ただし、速度が落ちると困る ◦ stateが変わるたびにDOMを更新しているとリフローで遅そう • VirtualDOMは速いらしいぞ ◦ <div onClick=...>から生成されるのは実際のDOMではなくVirtualDOM ◦ VirtualDOM同士の差分を計算して、必要なところだけ一気更新するから速 いらしい ▪ さっきの例だと、textNodeだけ置き換える ▪ requestAnimationFrameのタイミングで更新？ React
37. • SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM • → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
38. • Atomでは去年の10, 11月ごろにCustom Elementや Shadow DOMといった要素を取り入れた ◦ どちらもWebComponentsの仕様 • WebComponents ◦ Webの機能をコンポーネント化してプラグインとして使えるように ◦ 上記以外にHTML Imports, HTML Templatesを含む WebComponents
39. • <my-element> みたいなオレオレ要素が定義できる ◦ 既存の要素の拡張もできる Custom Element class SecCamp extends HTMLElement { createdCallback() { this.textContent = '応募締め切りは6/22' } } secCampElem = document.registerElement('sec-camp', SecCamp) console.log(new secCampElem())
40. Atomでは... Custom Element
41. • DOMツリーをセマンティック用の構造と、見た目用の構造に 分割 ◦ 本質的でない(見た目のための)DOMを、ツリーの構成上隠すのでShadow DOM ◦ CSSセレクタ, JSからアクセスする場合は専用のAPIを使う • 今までだとiframeとかcanvasが近い Shadow DOM
42. Shadow DOM <div id="content">this is not shown</div> 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'
43. • 実は身近なところに... ◦ Chrome devtoolsで ”Show user agent shadow DOM” をチェック Shadow DOM
44. Shadow DOM
45. • 今年の2月頃からReactをやめて、直接DOM APIを叩くよう になった ◦ React依存があまりよくないという判断 ◦ Atom上では直接DOM APIを叩くほうが早かった ところで、Reactはどこに？
47. DOM API直打ち
48. • SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM • → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
49. で、結局どれがいいんだ！
50. わからん！
51. アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
52. AltJS
53. AltJS • JavaScriptにコンパイルできる言語の総称 ◦ 主な理由はJavaScriptを書きたくないから • 数年前から大量発生 ◦ https://github.com/jashkenas/coffeescript/wiki/List-of-languages- that-compile-to-JS • AtomではCoffeeScript, babel, TypeScriptをサポート
54. CoffeeScript • Atomでは拡張子をcoffeeにすると使える • Atomはほぼこれで書かれてる • Ruby, Pythonっぽく書ける point = () -> Math.random * 100 result = if point > 50 then 'good' else 'bad' data = name: 'tarou' result: result
55. babel(旧6to5) • ECMAScript6のコードをECMAScript5のコードに変換 ◦ AltJSっていうと怒られるかも...? • Atomでは "use babel" プラグマを入れると使える class MyArray extends Array { constructor() { super() this.push('initial data') } }
56. TypeScript • JavaScript + 静的型付け ◦ ECMAScript6の先行実装っぽい面も • Atomでは拡張子をtsにすると使える interface Person { name: string } function howOld(name: Person) { return "You are 39." } howOld({ name: "tamura" })
57. ちょっとした懸念 • CoffeeScriptで宣言したclassをbabelのclassで継承すると ちゃんと使えるの？ ◦ 逆も同様 • → 今のところ(僕は)問題なかったけど不安...
58. まとめ
59. まとめ • 未だにJavaScriptのUI周辺は流動的で追うのが大変 ◦ 今回紹介した物 + angular, polymer, etc… ◦ 解析もめんどくさくなってる(特にShadow DOM) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
60. ありがとうございました