Fork me on GitHub

2016-06-07のJS: Shadow DOM v1、React近況、JavaScriptのプラグイン設計本

Edit on GitHub 編集履歴を見る

JSer.info #282 - What's New in Shadow DOM v1 (by examples) — hayato.ioという記事では、Shadow DOM仕様の策定者でもある@shadow_hayatoさんよるShadow DOM v0とv1の違いについて解説されています。

closed shadow rootという概念の追加や、v1では/deep/::shadowは利用できなくなり、
slot(::slotted)を利用する点など色々な違いがあります。

コード例を中心に解説されているので、Shadow DOMに興味がある人は見ておくといいです。


ReactEuropeが開催され、その動画が公開されています。

また、The state of React.js 2016 // Speaker Deckというスライドではここ半年ぐらいのReactの変化などについてまとめられています。

Reactの動向はReact Coreチームのミーティングノートが公開されているので、こちらも合わせて参照するといいです。


JavaScript Plugin Architectureという電子書籍では、JavaScriptのライブラリやツールにおけるプラグイン設計について書かれています。

現時点では、jQueryESLintConnectgulpReduxのプラグインについてそれぞれプラグインの仕組み自体を実装しつつ解説した内容が書かれています。

全部まとめて読むというよりは気になったものをパッと見るリファレンス的な感じになっています。


ECMAScript便り〆

5月に行われたTC39 Meetingの記録が公開されたので、主要なできごとを簡単に書いておきます。
詳しくはミーティングノートを読んでください


ヘッドライン


V8 JavaScript Engine: Release 5.2

v8project.blogspot.com/2016/06/release-52.html

V8 ReleaseNote

V8 5.2リリース。
Exponentiation operator **のサポート、Array.isArrayin operator、Function#bindのパフォーマンス改善など


アーティクル


Getting Started with TDD in React - Semaphore

semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react

React JavaScript testing

Enzymeを使ったReact Componentのテストについて


What's New in Shadow DOM v1 (by examples) — hayato.io

hayato.io/2016/shadowdomv1/

WebComponents

Shadow DOM v0とv1の違いについて。
@shadow_hayatoさん(仕様策定者)によるコード例を元にした解説。


Chromeのヘッドレスブラウザがやってくる。というわけで試してみた。 - Qiita

qiita.com/devneko/items/51f2e114a7e0b3389435

Chrome

Chromeのヘッドレスブラウザについて


Infinite collections with ES6 generators - Advanced Web Machinery

advancedweb.hu/2016/05/31/infinite-collections-with-es6-generators/

JavaScript

Iteratorを使った無限リストについて


Why we chose MobX over Redux for Spectacle Editor

formidable.com/blog/2016/06/02/why-we-chose-mobx-over-redux-for-spectacle-editor/

JavaScript redux

Reduxとかと同じくアプリケーションのStateを管理するMobXの特徴についての紹介


Creating A Living Style Guide: A Case Study – Smashing Magazine

www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/

CSS

スタイルガイドのケーススタディ


Improving Your CSS with Parker – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

csswizardry.com/2016/06/improving-your-css-with-parker/

CSS Tools

CSSの解析ツールであるParkerについて


webpackのDLLバンドルを使ってビルドを速くする - Qiita

qiita.com/pirosikick/items/c77db84dbed4c447a6fe

webpack performance

webpackのビルド速度の改善について。
vendorライブラリだけ別にビルドし読み込んで使うDLLバンドル、cacheDirectoryexternalsとの違いについてなど


スライド、動画関係


The state of React.js 2016 // Speaker Deck

speakerdeck.com/koba04/the-state-of-react-dot-js-2016

React スライド

Reactの最近の変更や今後の変更、非推奨になる予定の機能についてなど


ReactEurope 2016 - Day 1 - YouTube

www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A

React 動画

ReactEurope 2016の動画まとめ


Building React Applications with Idiomatic Redux - Course by @dan_abramov @eggheadio

egghead.io/courses/building-react-applications-with-idiomatic-redux

redux 動画 tutorial

Redux作者によるReduxでアプリケーションを作るスクリーンキャスト


Next Vue.js 2.0 // Speaker Deck

speakerdeck.com/kazupon/next-vue-dot-js-2-dot-0

JavaScript スライド

Vue.js 2.0のレンダリングフローについて


Flow vs TypeScript

djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/

TypeScript flowtype

TypeScriptとFlowTypeの型指定の比較についてのスライド


サイト、サービス、ドキュメント


HyperDev

hyperdev.com/

webservice node.js JavaScript

サーバも書けるJSFiddle的なサービス。
Node.jsでサーバ側、HTML/CSS/JSなフロントも一緒に書けるエディタサービス


Front-end Hyperpolyglot

jeffcarp.github.io/frontend-hyperpolyglot/

DOM library

React/Angular1,2/Ember/Polymer/Vueのテンプレートの書き方比較


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


epoberezkin/ajv: The fastest JSON schema Validator. Supports v5 proposals

github.com/epoberezkin/ajv

JavaScript JSON library

JSON Schema validatorライブラリ


MJB-code6/SkyPort: Add offline functionality to your web app

github.com/MJB-code6/SkyPort

ServiceWorker library

Service Workerを使ったオフラインモードを実現するライブラリ。


Frend — A collection of accessible, modern front-end components.

frend.co/

DOM library accessibility WAI-ARIA

AccessibleなDOM UIを実現するためのJavaScriptライブラリ。CSSフレームワークのように特定のクラスを付けた要素にWAI-ARIAの属性を付加していく。


GoogleChrome/lighthouse: auditing and performance metrics for Progressive Web Apps

github.com/GoogleChrome/lighthouse

performance Tools

Service Workerを使ってのオフライン対応の有無、Speed IndexなどのロードパフォーマンスなどProgressive Web Appsに関する計測ツール


書籍関係


JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch

efcl.info/2016/06/06/JavaScript-Plugin-Architecture/

JavaScript ebook

JavaScriptのプラグイン設計のケーススタディ本。
jQuery、ESLint、Connect、gulp、Reduxなどのプラグインの仕組みを実装しながら学ぶ電子書籍


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