Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomエディタで振り返る、昨今のWeb周辺事情
Search
tyage
May 16, 2015
Technology
1
3.6k
Atomエディタで振り返る、昨今のWeb周辺事情
tyage
May 16, 2015
Tweet
Share
More Decks by tyage
See All by tyage
Webフロントエンドの脆弱性つまみ食い 2024年版
tyage
14
4.5k
Webサービスの終活
tyage
0
800
ディストピアブラウザ
tyage
0
2.4k
Other Decks in Technology
See All in Technology
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
強いチームと開発生産性
onk
PRO
35
11k
The Role of Developer Relations in AI Product Success.
giftojabu1
1
130
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
Amazon Personalizeのレコメンドシステム構築、実際何するの?〜大体10分で具体的なイメージをつかむ〜
kniino
1
100
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
180
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
530
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
97
Speed Design
sergeychernyshev
25
620
Being A Developer After 40
akosma
87
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Fireside Chat
paigeccino
34
3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Transcript
Atomエディタで振り返る 昨今のWeb周辺事情 2015/05/16 @tyage
こんにちは
自己紹介
チューターの山崎です • twitter: @tyage • 京都の大学の4回生 • セキュリティ&プログラミングキャンプ2010卒業生 • CTF
◦ tyage ∈ Epsilon Delta ⊂ binja ⊂ fuzzi3 ドーモ、ミナ=サン
話すこと
面倒くさいのは Webセキュリティ だけじゃない
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
アジェンダ 最近のJavaScript周辺の話題を軽く振り返ってみます ※ エディタ戦争はしない
Atomエディタで振り返る 昨今のJavaScript周辺事情 2015/05/16 @tyage
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
Atomエディタの話
Atomエディタ(以降Atom) • ナウでヤングにホットなテキストエディタ • 去年OSSになってからとにかく盛り上がってる
Atomざっくり • Chromiumとio.jsで動くエディタ ◦ エディタだけど、中身はWebページ • Webページからio.jsが叩ける!!! ◦ 後述のelectronをベースに作っている ◦
XSSできると... • 内部のコードはほぼCoffeescript
None
None
electron(旧名: Atom shell) • HTMLとJSでデスクトップアプリケーションを作れるフレーム ワーク ◦ nw.jsと似てる • chromiumのrendererプロセスとbrowserプロセスにio.jsが
組み込まれている ◦ Webサイトではできなかったあれこれができて便利
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
electron(旧名: Atom shell) • 各種アプリケーションで採用 ◦ VSCode(Microsoft製エディタ) ◦ Vivaldi(元OperaCEO製ブラウザ) ◦
Slack(チャット)
Atom, electronがとにかく 盛り上がっている (気がする)
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
サーバサイドJS
• 今年の2月まではnode.js • 今年の2月からio.jsを採用 ◦ 正確には https://github.com/atom/node AtomでのサーバサイドJS
• 去年の末にnode.jsをフォークしてio.jsができる ◦ リリースサイクルを早める ▪ 新しいバージョンのV8のサポート ◦ オープンガバナンスモデル ▪ 開発過程が外から見える
▪ 他の開発者がコントリビュートしやすいように node.jsとio.js
• io.jsとnode.jsが合流するかも? ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った! ▪
https://github.com/microsoft/node node.jsとio.js
• 5/14にio.jsとnode.jsが合流することに決定! ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った! ▪
https://github.com/microsoft/node node.jsとio.js
おめでとうございます
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
HTML関係のJSライブラリ
• SpacePen ◦ Atom自家製UIライブラリ Atomでの遷移
• 去年まで使われていたAtomの自家製ライブラリ • jQueryを継承した関数 ◦ class View extends jQuery (※CoffeeScriptのclassです)
• 最近はWebComponentsに対応したらしい Space pen
class NiigataMiniCamp extends View @content: -> @div => @h1 "日程"
@p "5/16 - 5/17" (new NiigataMiniCamp).appendTo "body" Space pen
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
Atomでの遷移
• facebook製のUIフレームワーク ◦ サーバサイドでHTMLを生成する感じでHTML作れる • VirtualDOM, one way data flow,
jsx, flux… • Atomでは去年の7月ごろにReactで書かれたエディタがデ フォルトで使われるように ◦ jQueryからの脱却! React
• テンプレートオブジェクトから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!
• テンプレートオブジェクトから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
• ただし、速度が落ちると困る ◦ stateが変わるたびにDOMを更新しているとリフローで遅そう • VirtualDOMは速いらしいぞ ◦ <div onClick=...>から生成されるのは実際のDOMではなくVirtualDOM ◦
VirtualDOM同士の差分を計算して、必要なところだけ一気更新するから速 いらしい ▪ さっきの例だと、textNodeだけ置き換える ▪ requestAnimationFrameのタイミングで更新? React
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
• → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
• Atomでは去年の10, 11月ごろにCustom Elementや Shadow DOMといった要素を取り入れた ◦ どちらもWebComponentsの仕様 • WebComponents
◦ Webの機能をコンポーネント化してプラグインとして使えるように ◦ 上記以外にHTML Imports, HTML Templatesを含む WebComponents
• <my-element> みたいなオレオレ要素が定義できる ◦ 既存の要素の拡張もできる Custom Element class SecCamp extends
HTMLElement { createdCallback() { this.textContent = '応募締め切りは6/22' } } secCampElem = document.registerElement('sec-camp', SecCamp) console.log(new secCampElem())
Atomでは... Custom Element
• DOMツリーをセマンティック用の構造と、見た目用の構造に 分割 ◦ 本質的でない(見た目のための)DOMを、ツリーの構成上隠すのでShadow DOM ◦ CSSセレクタ, JSからアクセスする場合は専用のAPIを使う •
今までだとiframeとかcanvasが近い Shadow DOM
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'
• 実は身近なところに... ◦ Chrome devtoolsで ”Show user agent shadow DOM”
をチェック Shadow DOM
Shadow DOM
• 今年の2月頃からReactをやめて、直接DOM APIを叩くよう になった ◦ React依存があまりよくないという判断 ◦ Atom上では直接DOM APIを叩くほうが早かった ところで、Reactはどこに?
None
DOM API直打ち
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
• → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
で、結局どれがいいんだ!
わからん!
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
AltJS
AltJS • JavaScriptにコンパイルできる言語の総称 ◦ 主な理由はJavaScriptを書きたくないから • 数年前から大量発生 ◦ https://github.com/jashkenas/coffeescript/wiki/List-of-languages- that-compile-to-JS
• AtomではCoffeeScript, babel, TypeScriptをサポート
CoffeeScript • Atomでは拡張子をcoffeeにすると使える • Atomはほぼこれで書かれてる • Ruby, Pythonっぽく書ける point =
() -> Math.random * 100 result = if point > 50 then 'good' else 'bad' data = name: 'tarou' result: result
babel(旧6to5) • ECMAScript6のコードをECMAScript5のコードに変換 ◦ AltJSっていうと怒られるかも...? • Atomでは "use babel" プラグマを入れると使える
class MyArray extends Array { constructor() { super() this.push('initial data') } }
TypeScript • JavaScript + 静的型付け ◦ ECMAScript6の先行実装っぽい面も • Atomでは拡張子をtsにすると使える interface
Person { name: string } function howOld(name: Person) { return "You are 39." } howOld({ name: "tamura" })
ちょっとした懸念 • CoffeeScriptで宣言したclassをbabelのclassで継承すると ちゃんと使えるの? ◦ 逆も同様 • → 今のところ(僕は)問題なかったけど不安...
まとめ
まとめ • 未だにJavaScriptのUI周辺は流動的で追うのが大変 ◦ 今回紹介した物 + angular, polymer, etc… ◦
解析もめんどくさくなってる(特にShadow DOM) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
ありがとうございました