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.7k
Atomエディタで振り返る、昨今のWeb周辺事情
tyage
May 16, 2015
Tweet
Share
More Decks by tyage
See All by tyage
Webフロントエンドの脆弱性つまみ食い 2024年版
tyage
17
5.7k
Webサービスの終活
tyage
0
920
ディストピアブラウザ
tyage
0
2.5k
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
1
330
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
160
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
620
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
いまさら聞けない ABテスト入門
skmr2348
1
210
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
110
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
110
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
310
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
4
1k
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
340
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Code Review Best Practice
trishagee
72
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Fireside Chat
paigeccino
40
3.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
88
4.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for Performance
lara
610
69k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Visualization
eitanlees
148
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
ありがとうございました