Fork me on GitHub

2017-04-17のJS: prettier 1.0、MSEdge 15、Twitter Liteのパフォーマンスチューニング

Edit on GitHub 編集履歴を見る

JSer.info #327 - JavaScriptの整形ツールである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でのロードキャッシュについてなど実践的なクライアントサイドの最適化手法について書かれています。

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


ヘッドライン


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の対応など


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について


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にエラーコールバックを指定できるようになるなど


アーティクル


Introducing Moon – Hacker Noon

hackernoon.com/introducing-moon-1d44a99635f0

JavaScript Vue library

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


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の動画一覧


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を通るようにする設計について


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


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でのロードキャッシュについてなど実践的な最適化手法について書かれている。


Intercepting new Image().src requests / Stoyan's phpied.com

www.phpied.com/intercepting-new-image-src-requests/

JavaScript

ES Proxyを使ってImageのFake版を作成する話。


Eruda: Console for Mobile browsers

eruda.liriliri.io/

mobile debug JavaScript browser ブックマークレット

モバイルサイト向けのデバッグコンソールツール/ブックマークレット。
コンソール、FPS表示、要素選択、ネットワーク、リソースなど色々な情報を扱うページ内開発者ツール


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


E2E Testing React applications with TestCafe – Hacker Noon

hackernoon.com/e2e-testing-react-applications-with-testcafe-8edb605ec66c

React E2E testing

TestCafe + ReactでのE2Eテストについて。
https://github.com/DevExpress/testcafe-react-selectors を使うことでReactコンポーネントに対する検索ができる。


DmitrySoshnikov/regexp-tree: Regular expressions processor in JavaScript

github.com/dmitrysoshnikov/regexp-tree

正規表現 AST JavaScript library

正規表現をパースしてASTにしたり、traversaや変換、正規表現の最適化などを行うことができるライブラリ。


somesocks/vet: A Javascript library for data validation.

github.com/somesocks/vet

JavaScript library

色々な判定をまとめたライブラリ。
is*な関数の集まり


nickpisacane/maybe-you-meant: Catch deceptive prop typos in your react apps

github.com/nickpisacane/maybe-you-meant

React debug JavaScript library

Reactコンポーネントのpropsのtypoなどを検知して、"もしかして"を出してくれるデバッグ補助ライブラリ


書籍関係


Introduction · react-indepth

developmentarc.gitbooks.io/react-indepth/content/

React ebook book

Reactのコンポーネントやライフサイクルイベントについて詳しく書かれた電子書籍


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