2017-11-19のJS

Release v0.59.0 · facebook/flow

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

Node v9.2.0 (Current) | Node.js

Node.js 9.2.0リリース。 fs.realpathSync.nativefs.realpath.nativeprocess.ppidがexposeされた

Release Notes for Safari Technology Preview 44 | WebKit

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

Introducing security alerts on GitHub

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

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

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

Firefox — Notes (57.0) — Mozilla

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

Release 2.6.0 · GoogleChrome/lighthouse

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

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

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

How Redux Works: A Counter-Example

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

The Cost Of JavaScript – Dev Channel – Medium

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

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

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

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

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

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

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

JS Kongress 2017 - YouTube

JS Kongress 2017の動画一覧

What Web Can Do Today

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

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

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

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

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

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

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

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

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!

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

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

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

Pure React

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

Manning | Vue.js in Action

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

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

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

Manning | React Native in Action

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