Fork me on GitHub

2014-11-02のJS: Bootstrap 3.3.0、CSP Lv.2、Object.observe()の未来

Edit on GitHub 編集履歴を見る

JSer.info #199 - Bootstrap 3.3.0がリリースされました。
translate3dに起因するバグの修正やNormalize.css、H5BP等のアップデートに対応等が中心となっています。

詳しくは以下に書かれています。

また、Bootstrap 4の開発を開始していて、navbarの改善やpanelsthumbnailsを置き換える新しいコンポーネントの追加、IE8のサポート終了等が含まれるそうです。


CSP Lv.2の話 というスライドでは、CSP (Content Security Policy)のLv.2で追加された機能などについて書かれています。

CSP Lv.1は既存のプロダクトに適応するのが難しい感じでしたが、Lv.2ではインラインスクリプトも一定のルールで許可できたりより柔軟な設定ができるようになっています。

CSPを適応してるTwitterの@ndmさんが書いたスライドも併せて見るといいかもしれません。

CSP Lv1についてはAn Introduction to Content Security Policy - HTML5 Rocks (翻訳)やContent Security Policy Playground等を見てみるといいと思います。


A State of Change — On the future of Object.observeというスライドでは、Chromeでは既に使えるようになっているObject.observe()には議論の余地があることについて書かれています。

簡単な概要のメモを書きましたが、Object.observe()はオブジェクトの変更を検知してコールバックを呼び出すことが出来るES7+で入る予定の機能です。

オブジェクトの変更を検知という事はMutableなオブジェクトを扱いその変更結果をDOMに反映させるという使い方、つまりよく見るデータバインディングに適した機能と言えると思います。

逆にImmutableなオブジェクトを扱い、そのオブジェクトから前回の状態を引き継いでないDOMを作る、つまりReactのような仕組みを持ったものが今流行っています。

スライドではデータバインディングのような仕組みを持つ前者を

Mutable data to a Stateful DOM

と表現して、Reactやmercuryのような仕組みを持つ後者を

Immutable data to a Stateless DOM?

と言っています。

ステートレスとステートフルという言葉はCanvasRESTの文脈で聞いたことがあると思います。

Object.observe()がネイティブにあるとデータバインディングのような機能は実装しやすくなりますが、その他のアプローチもメリットがあるはずなので、仕様にあるからという理由で未来はデータバインディングに向かうのかという疑問について書かれている感じです。

最近ではReactやvirtual-domによりView生成のコストが小さくなり、Fluxなどの新しい?アプリケーションアーキテクチャのデザインが考えられている流れもあると思います。

この辺は単純にライブラリを使うという話ではなく、何故そのようなアーキテクチャがいいのかを考える必要があると感じています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

www.w3.org/2014/10/html5-rec.html.ja

HTML5 ReleaseNote

W3C HTML5が勧告された


Bootstrap 3.3.0 released · Bootstrap Blog

blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/

CSS library ReleaseNote

Bootstrap 3.3.0リリース。

HTML lintをするbootlintや4.0についても書かれている


Meteor

www.meteor.com/blog/2014/10/28/meteor-1-0

JavaScript node.js ReleaseNote

Meteor 1.0リリース


React v0.12 | React

facebook.github.io/react/blog/2014/10/28/react-v0.12.html

React library ReleaseNote

React 0.12正式リリース。

用語やAPIの変更、JSXの変更、ChromeのDevTools拡張の改善、ライセンスがApache 2から修正BSDに変更


Release JSHint 2.5.7 · jshint/jshint

github.com/jshint/jshint/releases/tag/2.5.7

JavaScript Tools ReleaseNote

JSHint 2.5.7リリース。

ES6のSymbol、Reflect、System、ComputedPropertyNamesに対応等


Socket.IO — Socket.IO 1.2.0

socket.io/blog/socket-io-1-2-0/

node.js JavaScript library ReleaseNote

Socket.IO 1.2.0リリース。

サーバとクライアントのバグ修正。

IE10みたいにXDRとXHR Lv2がある場合はXHRを優先するように、PhantomJSのサポート等


Sinon.JS/Changelog.txt at v1.11.1 · cjohansen/Sinon.JS

github.com/cjohansen/Sinon.JS/blob/v1.11.1/Changelog.txt

JavaScript testing ReleaseNote library

Sinon.JS 1.11.0リリース。

AMDサポートの改善、xhrに.responseプロパティの追加、バグ修正


Release RxJS Version 2.3 · Reactive-Extensions/RxJS

github.com/Reactive-Extensions/RxJS/releases/tag/v2.3.12

JavaScript library ReleaseNote

RxJS 2.3リリース。

Promise、Generatorのサポート。

またES6以降のArray.fromといったメソッドと同等の機能の提供など


Release Son of Dragon · sass/libsass

github.com/sass/libsass/releases/tag/3.0.1

Sass ReleaseNote

libsass 3.0.1リリース


アーティクル


Spy-js 2.0: New level of JavaScript tracing | JetBrains WebStorm Blog

blog.jetbrains.com/webstorm/2014/10/spy-js-2-0-new-level-of-javascript-tracing/

WebStorm node.js JavaScript

WebStorm 9のspy-js 2.0について。

実行時の結果からコードの補完候補の追加、breakpointを貼らなくてもinspectionで変数の中身を見られるように、Node.jsサポート、トレース結果の共有、ES6サポート等


Getting To Know Flux, the React.js Architecture ♥ Scotch

scotch.io/tutorials/javascript/getting-to-know-flux-the-react-js-architecture

JavaScript Flux React

Fluxアーキテクチャについて分かりやすく解説されてる。

Storeが複数ある場合にwatiForを使って依存関係を解決する方法やどのようなフローで処理を行うかを図を用いて分かりやすくまとめている


Class構文が実装された - JS.next

js-next.hatenablog.com/entry/2014/11/01/034607

JavaScript V8 ECMAScript

ES6のclass syntaxについて。

prototypeの糖衣構文であることや継承、匿名クラス、class内はstrict modeになる点について書かれている


For and against 'let'

davidwalsh.name/for-and-against-let

ECMAScript

ES6のletについて詳しく書かれてる。

letによるブロックスコープや使い方について


Introducing SIMD.js ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2014/10/introducing-simd-js/

JavaScript ECMAScript performance

SIMD APIについて。 SIMDとは何か、polyfillのSIMD.jsについて


Why we should stop using Grunt & Gulp

blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/

JavaScript Grunt gulp Tools

GruntやGulpのようなTask Runnerではなく、npm runを使う話。

Task Runnerはそれ自体のアップデート変更や別の選択肢が出てきた時のコストやpluginの挙動の不満等からnpm runで行う事について


Building single page apps using web components - Polymer

www.polymer-project.org/articles/spa.html

WebComponents tutorial

Web Componentsを使ってシングルページアプリケーションを作るチュートリアル


The Fine Art of JavaScript Error Tracking — Medium

medium.com/@jico/the-fine-art-of-javascript-error-tracking-bc031f24c659

JavaScript debug webservice

JavaScriptのエラーレポートを集めるサービスについて。

またエラーレポートはノイズにも成り得る。Sentryでは重要と思われるエラーを優先的表示やどのブラウザなのかについて表示してくれる


スライド、動画関係


CSP Lv.2の話

ja.slideshare.net/yagihashoo/csp-lv2

CSP スライド セキュリティ

CSP Level2の機能についての紹介スライド。

Path matching、Nonce source、Source hash、frame-ancestors、referrer、sandbox等についてよくまとまっている


Model-View-Intent and the Virtual DOM

staltz.com/mvi-freaklies/#/

VirualDOM JavaScript スライド MVC

Reactiveなパターンについてのスライド。

MVCが絡み合って複雑になるのをイベントバスを使ってどう解決するか。

Model、View(Virtual DOM)、Intentでのアーキテクチャについて


A State of Change — On the future of Object.observe

markdalgleish.github.io/presentation-a-state-of-change-object-observe/

JavaScript スライド

Object.observeについてのスライド。

Object.observeはオブジェクトの変更を監視できるが、Imuutabilityとは逆の事になってしまう。

Immutableなしくみを提供するmori等のライブラリや同様にDOMでもStatelessなDOMを提供するReactやVirtual DOMがある。

現在のシンプルなバインディングはMutableデータをStateful DOMへ結びつける。
未来のレンダリングはImmutableデータをStateless DOMにする?


ブラウザーに優しくて、アニメーションを滑らかに

people.mozilla.org/~bbirtles/pres/html5j-2014/#/

JavaScript CSS SVG animation スライド

Web Animationについてのスライド。

どのようなフローでスタイルが決定され、レンダリングが行われているか。

またどうすれば、レンダリングやレイアウトのコストを減らせるかについて等の最適化について。

レイヤーやwill-changeなどについても触れている


ソフトウェア、ツール、ライブラリ関係


jwerle/w625

github.com/jwerle/w625

JavaScript console Tools

6to5を使ってES6で書けるREPLの実装。

特定のウェブサイトに繋いで、コンソール的に使うことも出来る


Zolmeister/promiz

github.com/Zolmeister/promiz

JavaScript Promises library

ES6 Promisesのpolyfill。


この記事へ修正リクエストをする
JSer.info Slackに参加する