JSer.info #327 - JavaScriptの整形ツールであるprettier 1.0がリリースされました。

Releasing Prettier 1.0

Go言語のgofmtやReasonのrefmtのようなコード整形ツールです。

prettierは言語側が提供するツールではないのであくまでopinionatedな整形にすることで設定項目を少なくしています。1.0では利用者でも意見が割れやすいセミコロンやタブ/スペースなどについてはオプションが追加されています。
(それでもオプションは10個以下なのでかなり少ないです。)

JavaScriptは利用者によって書き方が異なることについては、JavaScriptの作者である@BrendanEichが次のように書いてたりもします。

JavaScriptは、癖をゆるさないとか制限がきついなどとは、まるで反対の立場だ。だから、効果的な(effective)プログラムを目指すJavaScript開発者は、(...中略...)より良いスタイル、適切な使い方、ベストプラクティスを学び、追求する必要がある。
-- Effective JavaScriptの序文より
-- Effective JavaScript - Devid Herman - Google ブックス

prettierはJavaScript/JSX/Flowをサポートしていますが、TypeScriptのサポートを進めていく予定のようです。

Windows 10 Creators Updateに含まれているEdgeHTML(MSEdgeのレンダリングエンジン) 15が公開されました。
Brotli、CSS Custom Properties、Intersection Observer、Payment Request API、Web VR、CSP Lv2などのサポートが追加されています。

また、Async/awaitがデフォルトで有効となり、FIDO 2.0 Web APIの仕様追従などが行われています。

Twitter Lite and High Performance React Progressive Web Apps at Scaleという記事では、Twitter Liteのパフォーマンス改善について書かれています。

webpackを使ってbundleしたJavaScriptの分割、スムーズな無限スクロールの実装、
ReactやReduxにおいてるボトルネックの改善について書かれています。
また、SWでのロードキャッシュについてなど実践的なクライアントサイドの最適化手法について書かれています。

無限スクロールについては次の記事も読むと良いです。

Infinite List and React - @itszero

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

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

JSer.info Sponsors

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

ヘッドライン

Announcing TypeScript 2.3 RC | TypeScript

blogs.msdn.microsoft.com/typescript/2017/04/10/announcing-typescript-2-3-rc/

TypeScript ReleaseNote

TypeScript 2.3RCリリース。
noImplicitAny, strictNullChecks,noImplicitThisなどをまとめたstrictオプションの追加.

Generator/IteratorをES3/ES5互換のコードへ変換できるように、Async Generator/Iteratorの対応、 Generic defaultsの対応など

TypeScript 2.3 RC 変更点 - Qiita

What’s new in Microsoft Edge in the Windows 10 Creators Update - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

blogs.windows.com/msedgedev/2017/04/11/introducing-edgehtml-15/

MSEdge ReleaseNote

EdgeHTML 15(Windows 10 Creators Update)のリリースノート。
Brotli、CSS Custom Properties、Intersection Observer、Payment Request API、Web VR、CSP Lv2のサポートなど。

Releasing Prettier 1.0

jlongster.com/prettier-1.0

JavaScript Tools ReleaseNote opinion

JavaScriptやFlowに対応した整形ツールのPrettier 1.0リリース。
Prettierはできるだけオプションを持たないopinionatedな整形ツールだが、相反する人が多いセミコロンやタブ/スペースなどについてはオプションが用意されている。

Release v0.44.0 · facebook/flow

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

flowtype ReleaseNote

Flow v0.44.0リリース。
パフォーマンスの改善など

React v15.5(6) and v16 - blog.koba04.com

blog.koba04.com/post/2017/04/14/react-dot-js-v155-and-v16/

React

React 15.5と16での変更点について。
v15.5で非推奨となった機能やパッケージ、
v16でv15の互換モードで導入されるFiberについて

koba04/react-fiber-resources: resources for ReactFiber

Release v2.4.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v2.4.0

webpack ReleaseNote

webpack v2.4.0リリース。
import()にコメントでchunk nameを指定できるように、require.ensureにエラーコールバックを指定できるようになるなど

Feature: Add named chunk for `import()` by specified comment format. by mc-zone · Pull Request #4573 · webpack/webpack

アーティクル

Introducing Moon – Hacker Noon

hackernoon.com/introducing-moon-1d44a99635f0

JavaScript Vue library

Vue版Preact的なライブラリであるMoonについて。
VueのようなAPIを持ち、Vueよりファイルサイズが小さい。

Moon

What's New In DevTools (Chrome 59) | Web | Google Developers

developers.google.com/web/updates/2017/04/devtools-release-notes

Chrome debug

Chrome 59で入る開発者ツール周りの機能について。
カバレッジ、フルページスクリーンショット、Block Request、Workspaceの改善など

Debugging Tips and Tricks | CSS-Tricks

css-tricks.com/debugging-tips-tricks/

JavaScript CSS debug

ウェブサイト、JavaScript、CSSなど色々なデバッグTipsについて。
CSS animation、CSS Gridのデバッグ、回線速度のデバッグ、timed debugger、シミュレーターなど

スライド、動画関係

React London 2017 - YouTube

www.youtube.com/channel/UCV4LIEkC0S9KUAPDm2g4mNQ

React video イベント

React London 2017の動画一覧

React London

An Introduction to Flow - Sessions by Pusher

pusher.com/sessions/meetup/js-monthly-london/flow

JavaScript flowtype video slide

Flowについての発表動画。
Flowの基本的な使い方について

React + FLUX + Redux + Redux Saga のお話

www.slideshare.net/yossy222/react-flux-redux-redux-saga

redux JavaScript Flux

redux-sagaについてのスライド。
Flux、Redux、redux-sagaのフローについて。
またredux-sagaを導入した際に、Actionが必ずsagaを通るようにする設計について

Using React (-Native) with Redux and Redux-Saga. A new proposal?

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

Twitter Lite and High Performance React Progressive Web Apps at Scale

medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

webpack React performance redux

webpackのCommonsChunkPluginを使った分割、jankのない無限スクロールの実装。
ReactにおいてはshouldComponentUpdateでの最適化、componentWillMountからcomponentDidMountへの処理の移動。
dangerouslySetInnerHTMLを避ける、遅延描画など。
Reduxにおいては、テキスト入力毎のStoreの更新を避ける、Batch Actionでの最適化など。
SWでのロードキャッシュについてなど実践的な最適化手法について書かれている。