JSer.info #199 - Bootstrap 3.3.0がリリースされました。
translate3dに起因するバグの修正やNormalize.css、H5BP等のアップデートに対応等が中心となっています。
詳しくは以下に書かれています。
また、Bootstrap 4の開発を開始していて、navbarの改善やpanels、thumbnailsを置き換える新しいコンポーネントの追加、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?
と言っています。
ステートレスとステートフルという言葉はCanvasやRESTの文脈で聞いたことがあると思います。
Object.observe()がネイティブにあるとデータバインディングのような機能は実装しやすくなりますが、その他のアプローチもメリットがあるはずなので、仕様にあるからという理由で未来はデータバインディングに向かうのかという疑問について書かれている感じです。
最近ではReactやvirtual-domによりView生成のコストが小さくなり、Fluxなどの新しい?アプリケーションアーキテクチャのデザインが考えられている流れもあると思います。
この辺は単純にライブラリを使うという話ではなく、何故そのようなアーキテクチャがいいのかを考える必要があると感じています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
www.w3.org/2014/10/html5-rec.html.ja
W3C HTML5が勧告された
Bootstrap 3.3.0 released · Bootstrap Blog
blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/
Bootstrap 3.3.0リリース。
HTML lintをするbootlintや4.0についても書かれている
Meteor
www.meteor.com/blog/2014/10/28/meteor-1-0
Meteor 1.0リリース
React v0.12 | React
facebook.github.io/react/blog/2014/10/28/react-v0.12.html
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
JSHint 2.5.7リリース。
ES6のSymbol、Reflect、System、ComputedPropertyNamesに対応等
Socket.IO — Socket.IO 1.2.0
socket.io/blog/socket-io-1-2-0/
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
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
RxJS 2.3リリース。
Promise、Generatorのサポート。
またES6以降のArray.fromといったメソッドと同等の機能の提供など
Release Son of Dragon · sass/libsass
github.com/sass/libsass/releases/tag/3.0.1
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 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
Fluxアーキテクチャについて分かりやすく解説されてる。
Storeが複数ある場合にwatiForを使って依存関係を解決する方法やどのようなフローで処理を行うかを図を用いて分かりやすくまとめている
Class構文が実装された - JS.next
js-next.hatenablog.com/entry/2014/11/01/034607
ES6のclass syntaxについて。
prototypeの糖衣構文であることや継承、匿名クラス、class内はstrict modeになる点について書かれている
For and against 'let'
davidwalsh.name/for-and-against-let
ES6のletについて詳しく書かれてる。
letによるブロックスコープや使い方について
Introducing SIMD.js ✩ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2014/10/introducing-simd-js/
SIMD APIについて。 SIMDとは何か、polyfillのSIMD.jsについて
Why we should stop using Grunt & Gulp
blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/
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
Web Componentsを使ってシングルページアプリケーションを作るチュートリアル
The Fine Art of JavaScript Error Tracking — Medium
medium.com/@jico/the-fine-art-of-javascript-error-tracking-bc031f24c659
JavaScriptのエラーレポートを集めるサービスについて。
またエラーレポートはノイズにも成り得る。Sentryでは重要と思われるエラーを優先的表示やどのブラウザなのかについて表示してくれる
- Application Performance Management & Monitoring | New Relic
- Error Monitoring, Error Tracking, and Notification for Ruby on Rails 2, 3 and 4 - Honeybadger - Honeybadger
- {Track:js} Javascript Error and Event Logging
- Sentry: Track exceptions with modern error logging for JavaScript, Python, Ruby, Java, and Node.js
スライド、動画関係
CSP Lv.2の話
ja.slideshare.net/yagihashoo/csp-lv2
CSP Level2の機能についての紹介スライド。
Path matching、Nonce source、Source hash、frame-ancestors、referrer、sandbox等についてよくまとまっている
Model-View-Intent and the Virtual DOM
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/
Object.observeについてのスライド。
Object.observeはオブジェクトの変更を監視できるが、Imuutabilityとは逆の事になってしまう。
Immutableなしくみを提供するmori等のライブラリや同様にDOMでもStatelessなDOMを提供するReactやVirtual DOMがある。
現在のシンプルなバインディングはMutableデータをStateful DOMへ結びつける。
未来のレンダリングはImmutableデータをStateless DOMにする?
- The Future of JavaScript MVC Frameworks
- presentation-a-state-of-change-object-observe/REFERENCES.md at master · markdalgleish/presentation-a-state-of-change-object-observe
ブラウザーに優しくて、アニメーションを滑らかに
people.mozilla.org/~bbirtles/pres/html5j-2014/#/
Web Animationについてのスライド。
どのようなフローでスタイルが決定され、レンダリングが行われているか。
またどうすれば、レンダリングやレイアウトのコストを減らせるかについて等の最適化について。
レイヤーやwill-changeなどについても触れている
ソフトウェア、ツール、ライブラリ関係
jwerle/w625
6to5を使ってES6で書けるREPLの実装。
特定のウェブサイトに繋いで、コンソール的に使うことも出来る
Zolmeister/promiz
ES6 Promisesのpolyfill。
