Fork me on GitHub

2014-07-22のJS: Chrome36、Web ComponentsとPolyfillとCustom Element

Edit on GitHub 編集履歴を見る

JSer.info #184 - Chrome 36.0がリリースされました。

同じくChromium 36ベースのOpera23もリリースされています。 Operaのリリースノートの方が変更内容が分かりやすいかもしれません。


何故かWeb Components(主にPolymer)に関する記事が色々出ていたのでまとめて紹介します。

Web Componentsの概要について知りたい方はまずTender Surrender: なぜ Web Components はウェブ開発に革命を起こすのかを見るといいでしょう。

The roles of AngularJS and Polymer という記事では、AngularJSとPolymerは役割の違いについてまとめられています。

AngularJSはDIやルーティング等ウェブアプリ開発向けのデザインで、PolymerはCustom Element開発向けに最適化されているという話が書かれています。 この2つに興味がある人はHere’s the difference between Polymer and Angular - Binpressも読むといいかもしれません。

同じく比較系の記事としてPolymer vs. X-Tag - Here’s the difference · Pascal Prechtでは、PolymerとX-Tagの違いについて書かれています。

X-TagはCustom Elementについて扱うライブラリなので、この記事ではCustom Elementを中心に解説されています。

また、WebReflection/document-register-elementという別のCustomElement polyfillが公開されているので、こちらもみてみるといいかもしれません。


以下の2つの記事では、Polymer(platform.js)がどこまでpolyfillをやってくれているのかについて書かれています。

主にShadow DOMのCSSのスコープについて等、polyfillすることが不可能な部分についての検証がされています。


お知らせ

先週からJu U-Yeongさんによる JSer.info の韓国語訳が以下のサイトで公開されています。

このブログで書いてる文章は CC-BY で利用できるようにしてあります。

クリエイティブ・コモンズ・ライセンス

また、先週書いていたTumblr -> Jekyllへの移行の件ですが、移行することに決めたので手伝ってくださる方がいらしたらお知らせ下さい。


ヘッドライン

ChromeReleaseNote

Chrome 36 stableリリース。

Object.observe()element.animate()、 HTML Imports等が入った

OperaReleaseNotebrowser

Opera 23リリース。

Chromium36がベースとなっていて、CSS touch-action、CSS will-change、CSS Transformsからprefixの削除、Web Animationsの一部実装、Object.observe()、HTML Importsの実装等が入ってる。

基本的にChrome36と同様の機能が入っていて、それぞれ簡単な解説が書かれているのでChromeと合わせて読むといいです。

node-webkitReleaseNote

node-webkit v0.10.0リリース。

Chromium 35、Node.js 0.11.13にアップデート、ネイティブメニューの改善、グローバルショートカットのサポート等

TypeScriptReleaseNote

TypeScriptがGitHubへ移行した。

WikiもGitHubへ移行。

また新しいコンパイラの開発していて、現在のものより5倍早くコンパイルできているが、まだ機能は完全ではなく開発中との事。

webservicebrowser

Caniuseの新しいデザインが公開された。

国別のブラウザ利用率の表示や、それぞれの機能についてブラウザシェアを反映したサポート対象の表示などが見られるようになっている。

ECMAScriptReleaseNote

ES6 draft Rev26リリース。

アーティクル

AngularJSWebComponents

AngularJSとPolymerの役割の違い。

Angularはアプリ開発に最適化したデザイン(DIやルーティング等)、PolymerはCustom Element開発に最適化したデザイン。

2つは競合なのかどうかについて書かれてる。

WebComponentsbrowser

WebCompoentsをサポートしてないブラウザでのplatform.jsのpolyfillの挙動について。

createShadowRoot() と Shadow DOMのCSSスコープについて

WebComponentslibrarybrowser

Polymerのplatform.jsによるpolyfillとX-Tagの違い。

X-TagはCustom Elementについて扱う。

polymer-elementにnoscript属性を入れる意味等Polyfillを使ったCustom Elementについて詳しく書かれている

jQueryAPI

jQueryのソースコードを読んでの知見。

コメント欄にも書かれているからundocumentなAPIについてが多い

MVClibrary

MV*フレームワークで見られるデータバインディングの実装方法について

JavaScripttesting

JavaScript一般で良くないパターンを、あえてテストにおいては使用することで改善できるという話。

グローバル変数の利用、同期的なコードにする(Sinon.JS、Generator)、DRYじゃないコードを書く事で得られる点について

Sass

Sass 3.4.0のselector-replace() 関数について

スライド、動画関係

ECMAScriptJavaScriptスライド歴史

ES6の主要な機能について概要スライド。

Module, Class, Iterator, Syntaxについての紹介。

またES7や8に入るかもしれない機能についてやECMAScriptについてはどこを参照すればいいかについて書いてある。。

WebRTC動画

SFHTML5のWebRTCイベントの動画

node.jsstream動画

node.jsのStreamについてのスクリーンキャスト。

ランダムな単語を流すStreamを作り、transform streamで変換してWriteStreamに流すサンプルについて

サイト、サービス

WebComponentsまとめbrowser

ブラウザごとのWebComponentsのサポート状況、仕様についてまとめてるサイト

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

WebComponents

WebComponentsのCustom Elementsのpolyfillライブラリ

CSSASTlibrary

CSS パーサーライブラリ

JavaScriptlibraryTools

AutoprefixerのJavaScript版的なツール。

対象となるコードとサポートブラウザの範囲を指定して、必要なPolyfillコードを生成してくれる

JavaScriptbackbone.jslibrary

HumanJSの作者によるJavaScriptアプリ向けのフレームワーク。

Backbone.jsを使っていた経験から、機能を細かくNodeモジュールとして分けてBrowserifyでコンパイルして利用出来るようになってる。

JavaScriptMVClibrarybrowserify

モジュール指向なフレームワーク。

Input(Controller),State(Model),Render(View)

ReactのようにVirtual DOM持っていて、データバインディングはモデルクラス方式。

AngularJStestingSeleniumlibrary

AngularJS向けのWebdriverを使ったE2EテストフレームワークであるProtractorが公開された。

デフォルトではテストコードはJasmineで書く事ができ、MochaやCucumberも利用できる。

書籍関係

WebGLbook

Three.jsについての書籍

この記事へ修正リクエストをする
記事を紹介する