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
15
5k
Webサービスの終活
tyage
0
820
ディストピアブラウザ
tyage
0
2.4k
Other Decks in Technology
See All in Technology
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
150
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
380
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
Building Products in the LLM Era
ymatsuwitter
10
5.5k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
140
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
2.5Dモデルのすべて
yu4u
2
870
The Future of SEO: The Impact of AI on Search
badams
0
200
デスクトップだけじゃないUbuntu
mtyshibata
0
120
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
19
7.8k
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.4k
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
100
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Building Adaptive Systems
keathley
40
2.4k
Bash Introduction
62gerente
611
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
450
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A better future with KSS
kneath
238
17k
Music & Morning Musume
bryan
46
6.3k
Code Reviewing Like a Champion
maltzj
521
39k
Thoughts on Productivity
jonyablonski
69
4.5k
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) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
ありがとうございました