Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tyage
May 16, 2015

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

tyage

May 16, 2015
Tweet

More Decks by tyage

Other Decks in Technology

Transcript

  1. class NiigataMiniCamp extends View @content: -> @div => @h1 "日程"

    @p "5/16 - 5/17" (new NiigataMiniCamp).appendTo "body" Space pen
  2. • facebook製のUIフレームワーク ◦ サーバサイドでHTMLを生成する感じでHTML作れる • VirtualDOM, one way data flow,

    jsx, flux… • Atomでは去年の7月ごろにReactで書かれたエディタがデ フォルトで使われるように ◦ jQueryからの脱却! React
  3. • テンプレートオブジェクトから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!
  4. • テンプレートオブジェクトから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
  5. • ただし、速度が落ちると困る ◦ stateが変わるたびにDOMを更新しているとリフローで遅そう • VirtualDOMは速いらしいぞ ◦ <div onClick=...>から生成されるのは実際のDOMではなくVirtualDOM ◦

    VirtualDOM同士の差分を計算して、必要なところだけ一気更新するから速 いらしい ▪ さっきの例だと、textNodeだけ置き換える ▪ requestAnimationFrameのタイミングで更新? React
  6. • SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM

    • → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
  7. • Atomでは去年の10, 11月ごろにCustom Elementや Shadow DOMといった要素を取り入れた ◦ どちらもWebComponentsの仕様 • WebComponents

    ◦ Webの機能をコンポーネント化してプラグインとして使えるように ◦ 上記以外にHTML Imports, HTML Templatesを含む WebComponents
  8. • <my-element> みたいなオレオレ要素が定義できる ◦ 既存の要素の拡張もできる Custom Element class SecCamp extends

    HTMLElement { createdCallback() { this.textContent = '応募締め切りは6/22' } } secCampElem = document.registerElement('sec-camp', SecCamp) console.log(new secCampElem())
  9. 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'
  10. • SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM

    • → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
  11. CoffeeScript • Atomでは拡張子をcoffeeにすると使える • Atomはほぼこれで書かれてる • Ruby, Pythonっぽく書ける point =

    () -> Math.random * 100 result = if point > 50 then 'good' else 'bad' data = name: 'tarou' result: result
  12. TypeScript • JavaScript + 静的型付け ◦ ECMAScript6の先行実装っぽい面も • Atomでは拡張子をtsにすると使える interface

    Person { name: string } function howOld(name: Person) { return "You are 39." } howOld({ name: "tamura" })
  13. まとめ • 未だにJavaScriptのUI周辺は流動的で追うのが大変 ◦ 今回紹介した物 + angular, polymer, etc… ◦

    解析もめんどくさくなってる(特にShadow DOM) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~