Fork me on GitHub

2017-06-26のJS: React入門、sonar - linting for web、Angularパフォーマンス改善

Edit on GitHub 編集履歴を見る

JSer.info #337 - React Expressというサイトでは、Reactでのアプリケーション開発についてのチュートリアルが書かれています。
Reactから始める開発という形なので、npmなどの関連するツールやES2015など周辺環境についても簡単に紹介されています。
基本的に実行できるサンプルコードと共にReactについて紹介されているので、触りながら理解するのに役立ちそうです。


sonar, a linting tool for the webというウェブサイトに対するESLintのようなツールがJS Foundationの元で公開されました。

元々はMSEdgeのチームによって作られたもので、ESLintのようにカスタムルールを書くことができます。

ウェブサイトのHTML要素をトラバースしながら処理したり、リソースに対するリクエストに関する処理などをルールとして書くことができます。

FAQによると、aXeSSL Server Testなど既存ツールやサービスと連携したLintingツールとすることを目的としているようです。(そのためルールも非同期処理に対応している)

sonar doesn’t want to reinvent the wheel. For that reason it tries to integrate other tools and services that do a great job and contribute back where appropriate. For example, we are using axe for accessibility, SSL Server Test for checking the certificate configuration, etc.


Improve SPA Performance with Angular App // Speaker Deckというスライドでは、メモリリークが起きやすいパターンやChrome開発者ツールを使った計測方法について書かれています。
また、AngularにおけるメモリリークのパターンやChange Detectionの処理を削減する方法などについて書かれています。


ヘッドライン


Dev.Opera — What’s new in Chromium 59 and Opera 46

dev.opera.com/blog/opera-46/

Opera ReleaseNote

Opera 46 (based on Chromium 59)リリース。
Animation PNG、SVGファビコン、バックグラウンドタブのスロットリング、MediaError.messageのサポートなど


New Release: 2.9.5

jshint.com/blog/2017-06-22/release-2-9-5/

JavaScript Tools ReleaseNote

JSHint 2.9.5リリース。
trailingcommaオプションの追加、バグ修正など


ESLint v4.1.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/06/eslint-v4.1.0-released

ESLint ReleaseNote

ESLint 4.1.0リリース。 globベースのoverrides設定の追加、無視ファイルをpackage.jsonに定義できるように


アーティクル


JS scope: static, dynamic, and runtime-augmented – Dmitry Soshnikov – Medium

medium.com/@DmitrySoshnikov/js-scope-static-dynamic-and-runtime-augmented-5abfee6223fe

JavaScript

JavaScriptのスコープについて。
作ったときに参照が解決できるStatic scope、呼び出し元によって参照が決まるDynamic scope、witHevalによるRuntime-augmented scopeについて


React Express

www.react.express/

React tutorial document

Reactのチュートリアルサイト。
実行できるサンプルと共にReactの使い方や、npm/webpack/ES2015など関連するツールや知識について解説してる。


Redux Architecture Guidelines | joeellis.la

joeellis.la/redux-architecture/

redux opinion article

ケースバイケースではあるけど、Reduxを使ったアーキテクチャのガイドライン。
stateのネストを避けるためにnormalizeする、stateにはsourceとなるデータを入れる、ReactのstateよりReduxのState。
Standard Action、Container componentについてなど


Aligned Input Events  |  Web  |  Google Developers

developers.google.com/web/updates/2017/06/aligning-input-events

JavaScript event article Android

Pointer EventsのgetCoalescedEventsについて。
入力デバイスは60-120Hzに対して、モニタが60Hzである場合にポインタのイベントをすべて処理するのは無駄となる。
その無駄を回避するためにイベントをまとめてくれるgetCoalescedEvents()について


Codemods: A Quick and Easy Way to Automate Code Refactoring — SitePoint

www.sitepoint.com/getting-started-with-codemods/

JavaScript Tools article AST

codemodを使ったリファクタリングツールの作り方についての記事


✨Locally Scoped CSS Variables: What, How, and Why | Una Kravets Online✨

una.im/local-css-vars/

CSS JavaScript article

CSS Custom Propertiesについて。
利用方法、ローカルスコープ、サポート状況についてなど


スライド、動画関係


High Performance JS in V8 - Google スライド

docs.google.com/presentation/d/1KCcA-WAyhGs0SEOrfU21fjaTWTxvNxYLwmNlGIbuZFw/edit#slide=id.p

V8 performance slide

V8のES2015+のパフォーマンスについてのスライド。
CrankshaftはES2015を最適化しないため遅かった。またtry-catchなどがあると最適化できなかった。
新しいpipelineのIgnition + Turbofanではその部分が改善されているという話。


Improve SPA Performance with Angular App // Speaker Deck

speakerdeck.com/manakuro/improve-spa-performance-with-angular-app

JavaScript DOM performance Angular slide

メモリリークのパターン、Chromeの開発者ツールを使っての計測方法について。
Angularにおける意図しないメモリリークを避ける方法やChange Detectionのコストを削減する方法についてなど


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


mgechev/angular-performance-checklist: Cheatsheet for developing ⚡lightning⚡ fast progressive Angular applications.

github.com/mgechev/angular-performance-checklist

Angular performance document

Angularのパフォーマンスチェックリスト


faceyspacey/redux-first-router: 🎖 seamless redux-first routing -- just dispatch actions

github.com/faceyspacey/redux-first-router

redux JavaScript library

Redux向けのルーターライブラリ。
URLパターンにマッチしたActionを発行することをベースにしてルーティングできるようにしている


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


sonar, a linting tool for the web

sonarwhal.com/

JavaScript ESLint Tools

ウェブサイト(URL)に対するESLintのようなLintツール。
カスタムルールを自分で定義することができ、axeやSSL Server Testなど既存のツールを簡単に統合して利用できるようにする目的。


await-to-js - NMOTW

nmotw.in//github/await-to-js/

JavaScript library

awaitと組み合わせて使うことで、go言語のように[error, value]の値を返すようにするライブラリ


medikoo/date-from-timezone: Construct dates with timezone context

github.com/medikoo/date-from-timezone

JavaScript i18n library

Intl.DateTimeFormatを使うことで、JavaScriptでタイムゾーン情報を付与してnew Dateを行うライブラリ


OptimalBits/redbird: A modern reverse proxy for node

github.com/OptimalBits/redbird

node.js proxy

HTTPSやHTTP/2に対応したNode.jsでのリバースプロキシライブラリ


書籍関係


O'Reilly Japan - アイソモーフィックJavaScript

www.oreilly.co.jp/books/9784873118079/

JavaScript book React Angular

2017年7月4日発売
Isomorphic JavaScriptについての書籍。
実現する方法や各種フレームワークReact/Angular/Brisketを使った方法、ケーススタディなど


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