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

Project Quantumと呼ばれていたFirefoxの大規模書き換えの初回のリリースとなっています。
新たに書き直されたQuantum CSS(Stylo)と呼ばれるCSSエンジンが含まれるリリースであるため、既存のCSSとの挙動にさまざまな違い(バグ修正も含む)があります。

詳しくは次の記事を読むと良さそうです。

PerformanceObserverの有効化、Fetchのabortを行えるAbortControllerに対応しています。
また、WindowsのFirefoxにおいてデフォルトのフォントが変更されています。

日本語の既定フォントが変更されました | Firefox サイト互換性情報

The Cost Of JavaScript – Dev Channel – Mediumという記事ではJavaScriptのコストについて書かれています。

JavaScriptのコストとはネットワークからのロード、パース、コンパイル、実行から構成されています。
このパースとコンパイルが低スペックのデバイスでは大きな割合となることがあります。
そのため、同じサイズのJavaScriptと画像ファイルでは、実行 or 描画までの時間は異なります。

これらのコストについての解説や対策方法の一つとしてのPRPLパターンやPerformance Budgetについて書かれています。

moment/luxon: A library for working with dates and times in JSという日付周りのライブラリがαリリースされています。

元々、moment-labプロジェクトから始まったライブラリで、momentの問題点であるmutableである点などを解決しています。

Wondering about the future of Moment, modularization, etc? We have what we'll call a 'moment-labs' project here: https://t.co/tFxIq9lEjm
— moment.js (@momentjs) October 11, 2017

Want a smaller, immutable date library for modern browsers? Luxon has officially joined the family! https://t.co/HSjRuRuZG1
— moment.js (@momentjs) October 27, 2017

For Moment usersにも書かれていますが、MomentとAPIの互換性はありません。

特徴としては、日付/時間/インターバルの操作/パース/フォーマットを行うことができ、momentとは異なりImmutableなAPIとなっています。また、TimeZoneやIntlを使った国際化に対応しています。

そして、LuxonはネイティブのDate、Moment、Date-fnsとは異なりmonthを1-indexedな値として扱います。

// 2017-01-01
const date20170101 = new Date("2017-01-01T00:00:00.000Z");
// Luxon - 1-index
const { DateTime }  = require('luxon');
console.log("Luxon:get:" + DateTime.fromJSDate(date20170101).month); // => 1
console.log("Luxon:set:" + DateTime.fromJSDate(date20170101).set({ month: 1 }).month); // => 1
// date-fns - 0-indexed
const {getMonth, setMonth} = require('date-fns');
console.log("date-fns:get:"+ getMonth(date20170101)); // => 0
console.log("date-fns:set:"+ getMonth(setMonth(new Date(2017, 1, 1), 0))); // => 0
// moment - 0-indexed
const moment = require('moment');
console.log("moment:get:"+ moment(date20170101).month()); // => 0
console.log("moment:set:"+ moment(date20170101).month(0).month()); // => 0

Luxon - data-fns - moment | RunKit

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

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

Release v0.59.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.59.0

flowtype ReleaseNote

Flow 0.59.0リリース。
$ReadOnly<T> utility typeの追加、パフォーマンスの改善、/* flowlint sketchy-null:error */のようなコメントでLintを有効化できるように

Node v9.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v9.2.0/

node.js ReleaseNote

Node.js 9.2.0リリース。
fs.realpathSync.native、fs.realpath.native、process.ppidがexposeされた

Release Notes for Safari Technology Preview 44 | WebKit

webkit.org/blog/8035/release-notes-for-safari-technology-preview-44/

safari ReleaseNote

Safari Technology Preview 44リリース。
Payment Requestがデフォルトで有効化、createImageBitmap()の実装、OffscreenCanvasのIDLを追加など

Introducing security alerts on GitHub

github.com/blog/2470-introducing-security-alerts-on-github

github security JavaScript ruby news

GitHubリポジトリにnpmやgemのセキュリティアラート機能が追加された。

Release v4.0.0-beta.1 · reactjs/redux

github.com/reactjs/redux/releases/tag/v4.0.0-beta.1

redux JavaScript TypeScript ReleaseNote

Redux v4.0.0-beta.1リリース。
TypeScriptの更新、INITをランダムな値に変更、IE11未満のサポートを終了、Dispatchのパフォーマンス改善など

Redux 4 breaking changes · Issue #1342 · reactjs/redux

Firefox — Notes (57.0) — Mozilla

www.mozilla.org/en-US/firefox/57.0/releasenotes/

firefox ReleaseNote

Firefox 57リリース。
CSSエンジンの書き直しが行われ挙動の変更とパフォーマンスの改善、watch/unwatchメソッドが非推奨化、PerformanceObserverの有効化、Fetchのabortに対応。
WebRTCのRTCDataChannelのメッセージファイルサイズを指定できるように

Release 2.6.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v2.6.0

Chrome performance ReleaseNote

lighthouse 2.6.0リリース。
redirectsなどのチェックツールの追加。
各スクリプトの起動時間を計測するbootup-time、ページの実行時間を計測するmainthread-work-breakdownなどのAuditを追加

アーティクル

Refactoring React Components with Jest’s Snapshot – Michael Romani – Medium

medium.com/@mr4227/refactoring-react-components-with-jests-snapshot-7ed1b9d332cc

React testing article

Jestのsnapshotテストを使ったReactコンポーネントのリファクタリングについての記事。
スナップショットを取ってから、でかいコンポーネントの細分化をテストしながら行う話

How Redux Works: A Counter-Example

daveceddia.com/how-does-redux-work/

redux tutorial article

Reduxでカウンターアプリを作りながらReduxの使い方や仕組みについてを学ぶチュートリアル。

The Cost Of JavaScript – Dev Channel – Medium

medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

JavaScript performance article

JavaScriptの実行までのコストについてを解説した記事。
ダウンロード、パース、実行のステップを踏む。同じサイズのJSと画像のコストは異なる点。
PRPLパターン、Performance Budgetについて。

JavaScript. The Core: 2nd Edition – ds.laboratory

dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/

JavaScript ECMAScript article

ECMAScript/JavaScriptにおける用語の定義やその概念の解説。
ECMAScriptの仕様に近いコアな内容。

Clean Code vs. Dirty Code: React Best Practices - American Express Engineering Blog

americanexpress.io/clean-code-dirty-code/

React opinion article

Reactを題材にしたクリーンなコードについて。
ネーミングやコンポーネントの分割、デフォルト値の扱いなど良くない例とそれを改善した例を元に解説している。

スライド、動画関係

React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 - ランサーズ（Lancers）エンジニアブログ

engineer.blog.lancers.jp/2017/11/react-redux-spa-manage-tips/

React redux slide JavaScript

React+Redux+Sagaを使ったプロジェクトについてのスライド。
ディレクトリ構成や基本的な処理の流れ、HOCを使ったコンポーネントの拡張、ダイアログやストレージへの保存などユースケース毎の実装方法について。
またテスト、Sentryを使ったエラー解析、SEO、APIの管理についてなどについて