Fork me on GitHub

2017-03-14のJS: Firefox 52.0、Polymer 2.0 RC、コンポーネントのリファクタリング戦略

Edit on GitHub 編集履歴を見る

JSer.info #322 - Firefox 52.0がリリースされました。

WebAssemblyのデフォルト有効化、CSS Gridやrel="noopener"、async/awaitのサポート、Unicode code pointを識別子として利用できるようになるなど

FirefoxのECMAScriptのサポート状況については下記の記事でまとめられています。


Polymer 2.0 Release Candidateが公開されています。

Custom Element v1Shadow DOM v1の仕様に追従した変更がされています。
ES2015 classesの対応、ライフサイクルの変更、is属性サポートの廃止、データ変更検知の仕組みの変更などが含まれています。

1.xから2.0へのマイグレーションガイドも公開されているのであわせてみると良さそうです。


Moving Airbnb Search to React – Airbnb Engineering & Data Science – Mediumという記事では、Airbnbの検索ページがFlightからReactへ移行した際の話が書かれています。

テストがなく、読むのにも時間がかかるコードベースを新しくReactで書き直すリファクタリングの戦略について書かれています。

移行する際に、FlightのeventsをReactのPropsに繋ぐ仕組みを作成したり、
リファクタリングによる(パフォーマンスの)リグレッションをどうやって検知し抑えるかという点について書かれています。

AirbnbにはExperiment Reporting Frameworkという内製のパフォーマンスメトリクスを取得するツールがあり、このレポートを見ながらリファクタリングを行った話が紹介されています。


ヘッドライン


Release Notes for Safari Technology Preview 25 | WebKit

webkit.org/blog/7432/release-notes-for-safari-technology-preview-25/

safari ReleaseNote


Safari Technology Preview Release 25リリース。


Apollo Client 1.0 is coming

dev-blog.apollodata.com/apollo-client-1-0-is-coming-23b74b13fbbb

GraphQL library ReleaseNote


GraphQLクライアントのApollo Client 1.0リリース


Firefox 52.0 リリースノート

www.mozilla.jp/firefox/52.0/releasenotes/

firefox ReleaseNote


Firefox 52.0リリース。
wasmのデフォルト有効化、CSS Gridのサポート、rel="noopener"のサポート、async/await、Unicode code pointを識別子として利用できるようになるなど


qunit/History.md at 2.2.0 · qunitjs/qunit

github.com/qunitjs/qunit/blob/2.2.0/History.md

JavaScript testing library ReleaseNote


QUnit 2.2.0リリース。
1つ以上のテストがFailのときはPassし、Todoのみが残った時はFaillするQUnit.todoの追加、通った順序を記録し検証するassert.step()assert.verifyStepsを追加など


Release Inferno 1.4.0 · infernojs/inferno

github.com/infernojs/inferno/releases/tag/1.4.0

JavaScript library ReleaseNote


Inferno v1.4.0リリース。
SVGのサポートを修正、optimize-jsの対応など


Welcome 2.0 Release Candidate! - Polymer Project

www.polymer-project.org/blog/2017-03-08-2-0-rc

JavaScript WebComponents library ReleaseNote


Polymer 2.0.0 RCリリース。
Custom Elements v1、Shadow DOM v1の仕様に追従した変更が含まれてる。
ES2015 classesの対応、ライフサイクルの変更、is属性サポートの廃止、データ変更検知の仕組みの変更など


アーティクル


Inroducing Almin 0.10.0: TypeScript, FlowType, Logger | Web Scratch

efcl.info/2017/03/08/almim0.10/

JavaScript library ReleaseNote TypeScript flowtype


FluxライブラリのAlmin 0.10.0リリース。
コードベースをTypeScript化、FlowTypeのサポート改善、開発用のロガーの改善など


MobXを使ったアーキテクチャについて - console.lealog();

lealog.hateblo.jp/entry/2017/03/08/114017

JavaScript library


State管理ライブラリであるMobXについて。


Native ECMAScript modules: nomodule attribute for the migration

blog.hospodarets.com/native-ecmascript-modules-nomodule

JavaScript ECMAScript module article


scriptタグのnomodule属性について
モジュールをサポートしてない環境でのみ実行されるscript要素で、fallbackを行う方法について


A Complete Guide to CSS Grid | Codrops CSS Reference

tympanus.net/codrops/css_reference/grid/

CSS article


CSS Gridについての詳しい解説


Moving Airbnb Search to React – Airbnb Engineering & Data Science – Medium

medium.com/airbnb-engineering/moving-airbnb-search-to-react-b85b815e166c

JavaScript opinion article


Airbnb SearchがTwitter’s FlightからReactに移行した話。
何を指標にしてリファクタリングを行うかについて。
内製のパフォーマンス計測し検証しながら移行するアプローチについて


薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog

developer.hatenastaff.com/entry/2017/03/10/190229

JavaScript DOM 設計 TypeScript


MVPアーキテクチャパターンを使ったフレームワークを使わないアプリケーション設計について。
View/Presenter/Modelに役割を分担したクラスを扱う方法について


Introduction to Web Audio API | CSS-Tricks

css-tricks.com/introduction-web-audio-api/

audio tutorial web article


Web Audio APIについてのチュートリアル。 どのようなAPI体系であるか、OscillatorNodeを使っての解説、Web Audio APIにおける時間の扱いなどについて


スライド、動画関係


14 Must Know Chrome Dev Tools Tricks - YouTube

www.youtube.com/watch?v=xkzDaKwinA8

JavaScript Chrome debug video


Console APIについてのスクリーンキャスト


WAI-ARIAの考え方と使い方を整理しよう

www.slideshare.net/nozomisawada969/waiaria-72900338

WAI-ARIA accessibility slide


WAI-ARIAについてのスライド。
aria-*属性、role属性の使い分けや意味合いについて。
ランドマーク、文書構造、ウィジェット、ライブ領域、tabindex属性などについて


Angular 4がやってくる!? 新機能ダイジェスト

www.slideshare.net/masahikoasai/20160306-angular-4

AngularJS slide


Angularのアップデートライフサイクルについてのスライド。
Angular 2.xからsemverに準拠したアップデートとなり、4.xへのメジャーアップデートどのような点が変わるのかについて。
機能追加やアップデート方法について


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


Point | A flexible CSS Framework for building modern responsive web apps

www.getpoint.io/

CSS library


Flexboxを使ったモバイルファーストなCSSフレームワーク


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


brave/muon: Build browsers and browser like applications with HTML, CSS, and JavaScript

github.com/brave/muon

Electron security


BraveのElectron fork。
Chromiumのソースを直接使うように、Chrome extensionsのサポート、renderer processからNode.jsを完全に除去するのが目的


hyperapp/hyperapp: 1kb JavaScript library for building frontend applications.

github.com/hyperapp/hyperapp

JavaScript DOM library


JSX/Hyperxを使ったDOM記述、Router、State管理をまとめて扱えるライブラリ


staltz/html-looks-like: Assert that an HTML string looks approximately the same as another HTML

github.com/staltz/html-looks-like

HTML testing library


HTML文字列同士を大まかに比較できるテストライブラリ。


BafS/Gutenberg: Modern framework to print the web correctly.

github.com/BafS/Gutenberg

CSS


印刷向けのCSSライブラリ


Sazerac

sazeracjs.com/

JavaScript testing library


データにフォーカスしたassertion/テストライブラリ。
Jasmine、Jest、Mochaと一緒に動作する。
データごとのテストケースを作るようなパラメタライズドテストを行える。


書籍関係


Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう:書籍案内|技術評論社

gihyo.jp/book/2017/978-4-7741-8819-5

Electron book


2017年3月28日発売
Electronについての書籍


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