Fork me on GitHub

2017-11-19のJS: Firefox 57、JavaScriptのコスト、momentとLuxon

Edit on GitHub 編集履歴を見る

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

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

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

PerformanceObserverの有効化、Fetchのabortを行えるAbortControllerに対応しています。
また、Windowsの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である点などを解決しています。

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

ヘッドライン


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.nativefs.realpath.nativeprocess.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のパフォーマンス改善など


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の管理についてなどについて


JS Kongress 2017 - YouTube

www.youtube.com/playlist?list=PL8ajgHZ7PoCt3l5RXoyqVu_r7gYJU0dMx

JavaScript イベント video

JS Kongress 2017の動画一覧


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


What Web Can Do Today

whatwebcando.today/

WebPlatformAPI browser

アクセスしているブラウザでさまざまなWeb Platform APIが利用できるかを表示してくれるサイト


`performance.mark` with metadata is useful for Real user monitoring

dev.to/ben/we-welcome-a-wonderful-influx-of-new-members-from-japan-1k0

performance browser library JavaScript

performance.markにメタデータとしてFPSを付加して計測して、ボトルネックになっている行動をログから解析、可視化する方法について


stereobooster/react-snap: A zero-configuration static pre-renderer for Single Page Applications

github.com/stereobooster/react-snap

React library server

Reactをprerenderして静的なHTMLにできるライブラリ。
設定なしでcreate-react-appと協調して動作することを目標にしている。SSRで扱うことが難しい3rdパーティスクリプトやWebGLなどがオプションで対処できる。


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


moment/luxon: A library for working with dates and times in JS

github.com/moment/luxon

JavaScript library

日付や時間、インターバルを扱うライブラリ。 日付操作やパース、フォーマットを行える。Immutableであり、TimeZoneやIntlを使った国際化に対応している。 Momentとの違いをまとめたドキュメントも公開されている。


jaredpalmer/react-fns: Browser API's turned into declarative React components and HoC's

github.com/jaredpalmer/react-fns

React library

ReactのHigh Order Componentのコレクションライブラリ。
デバイスの回転や動作、オンライン/オフライン、Geo、メディアクエリー、スクロール、ロケールを扱えるコンポーネントなどが用意されている


goto-bus-stop/tinyify: a browserify plugin that runs various optimizations, so you don't have to install them all manually. makes your bundles tiny!

github.com/goto-bus-stop/tinyify

browserify plugin Tools

Browserifyでフラットbundle、unassert、productionビルド、minifyなどをまとめて行うプラグイン


jaredpalmer/razzle: ✨ Create server-rendered universal JavaScript applications with no configuration

github.com/jaredpalmer/razzle

isomorphic JavaScript Tools

UniversalなJavaScriptアプリケーションを設定なしで書き始められる開発環境ツール。
create-react-appのようなツールだが、React以外でも利用できる。


書籍関係


Pure React

daveceddia.com/pure-react/

React book

Reactについてステップバイステップで学べるサンプルを中心にした書籍。


Manning | Vue.js in Action

www.manning.com/books/vue-js-in-action

Vue book

2018年5月30日発売
Vueについての書籍


超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社

gihyo.jp/magazine/wdpress/plus/978-4-7741-9400-4

browser performance book

2017年11月23日発売
ウェブページのパフォーマンス改善についての書籍。
ネットワーク、レンダリング、スクリプトの項目ごとに測定方法や改善方法についてを扱う。


Manning | React Native in Action

www.manning.com/books/react-native-in-action

React book

2018年4月30日発売
React Nativeについての書籍


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