JSer.info #360 - npm 5.6.0(beta)が公開されています。
- The npm Blog — v5.6.0 (2017-11-27)
- 2017-11-27時点ではβリリース
Fully cross-platform package-lock.json
-- Stop dropping failed optional deps by iarna · Pull Request #19054 · npm/npm
上記のように、package-lock.jsonに関してクロスプラットフォーム間での互換性があり一意のロックファイルが生成されるようになりました。
この問題はshrinkwrapとoptionalDependenciesの頃からあるので、5年がかりの修正となりました。
React v16.2.0がリリースされています。
React v16.2.0ではFragment(<></>)がサポートされました。
<></> または<Fragment>要素を使うことでフラグメントを扱うことができるようになっています。
render() {
return (
<>
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
JSXの構文としての追加となるためFlow、TypeScriptやBabelなどパースするツール側の更新も必要です。
著名なツールはサポート済みであるためアップデートするだけで利用できそうです。
61st meeting of Ecma TC39が行われ、ECMAScript proposalsのステータスが更新されています。
String.prototype.replaceAllや Decimalといった新しいProposalの追加がされています。
また既存のProposalの更新も行われ、JSON supersetがStage 2へ、Numeric separators とArray.prototype.{flatMap,flatten}がStage 3へ、Class Field関係のProposalの分解などが行われています。
詳しくは次のページにまとめてあります。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
React v16.2.0: Improved Support for Fragments - React Blog
reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
React 16.2.0リリース。
Framentsのサポート。
<></> または<Fragment>要素を使うことでフラグメントを扱うことができる
Release v3.9.0 · webpack/webpack
github.com/webpack/webpack/releases/tag/v3.9.0
webpack 3.9.0リリース。
スキーマによるバリデーションのエラーメッセージの改善など
Release v0.60.0 · facebook/flow
github.com/facebook/flow/releases/tag/v0.60.0
Flow 0.60.0リリース。
server monitorを追加して変更検知の改善、Flow linterにunclear-type、untyped-importの追加、$Valuesと$Keysの修正など
Video.js 6.5.0 Release | Video.js Blog
blog.videojs.com/video-js-6-5-0-release/
Video.js 6.5.0リリース。
プログレスバーのアニメーションを滑らかに、play()のハンドリングの改善など
The npm Blog — v5.6.0 (2017-11-27)
blog.npmjs.org/post/167963735925/v560-2017-11-27
npm 5.6.0(beta)の変更点について。 クロスプラットフォームでpackage-lock.jsonの互換性が保てるようになった。 pacakge-loc.jsonを生成するだけの--package-lock-onlyオプションの追加、--node-optionsの追加など
アーティクル
Debugging React performance with React 16 and Chrome Devtools.
building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
React 16でのパフォーマンスプロファイルの読み方について
What's New In DevTools (Chrome 64) | Web | Google Developers
developers.google.com/web/updates/2017/11/devtools-release-notes
Chrome 64の開発者ツールの変更点について。
パフォーマンスモニタ、Consoleサイドバー、コンソールログをグループ化など
shallow-equal for Object/React props | Web Scratch
efcl.info/2017/11/30/shallow-equal/
Shallow Equalを扱うライブラリについて。
ReactのshouldComponentUpdateをDeep Equal(JSON.stringify)で実装した場合とShallow Equalの速度差について。
またShallowな比較で済むように必要な状態管理についてなど。
Chromium のソースコードの歩き方
nhiroki.jp/2017/12/01/chromium-sourcecode
Chrome/Blinkのプロジェクト構造について。
ディレクトリ構造やそれぞれのディレクトリの意味などについて。
browserとrendererでの大枠やBlink内の分け方、コードOwnerや依存の見かたについてなど
JavaScript Performance Optimization Tips: An Overview — SitePoint
www.sitepoint.com/javascript-performance-optimization-tips-an-overview/
JavaScriptとパフォーマンスについての概要を紹介した記事
パフォーマンスがよいという定義としてのRAIL、JavaScript実行までのコスト、bundleサイズなどについて
Measuring the Performance of Firefox Quantum with RUM - Akamai Developer Blog
developer.akamai.com/blog/2017/11/29/measuring-performance-firefox-quantum-rum/
Firefox 52(ESR)とFirefox 57(Quantum)のAkamaiによるロードパフォーマンス比較。
AkamaiのRUMによるとDOM Content Loadedの時間が24%改善されたとのこと
最近のselenium-webdriverの話 - Qiita
qiita.com/nazomikan/items/61143cbf01274c05b654
selenium-webdriverのPromiseManager廃止の経緯とネイティブのPromiseを使った書き方への変更について
Almin.js がやってくれること - Qiita
qiita.com/kmdsbng/items/dc03d89c0ca5acc30a44
ビジネスロジックをViewなどとは分けた状態にして、DDDをやるための土台としてのAlminについて。
Alminで書いた場合のアプリケーションの処理の流れやドメインオブジェクトの独立性について。
Monitoring the performance of a Node.js web application - Sqreen Blog | Modern Application Security
Node.jsのasync_hookモジュールを使ったUser Timing APIとAsync Hooks APIを使ったパフォーマンス計測について
ECMAScript proposal updates @ 2017-011 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2017/12/05/ecmascript-proposal-updates
2017年10月のTC39ミーティングの結果を反映したECMAScript Proposalの変更点まとめ
eslint-plugin-vue を作っている話 - Qiita
qiita.com/mysticatea/items/860ce3bf0ff387f166ac
Vue向けのESLintプラグインであるeslint-plugin-vueの紹介とオンラインデモについて
Vue.jsでD3.jsを使わずにグラフを実装する - Qiita
qiita.com/haribote/items/0bbf6cf5720b078039ff
Vueを使ってSVGでグラフを描画する話。
データドリブンで折れ線グラフ、棒グラフ、円グラフなどをSVGで描画する仕組みの作り方について
Performance Calendar » Evolution of ![]()
: Gif without the GIF
calendar.perfplanet.com/2017/animated-gif-without-the-gif/
GIFと<video>でのアニメーション画像について。
Safari Technology Previewが<img src=".mp4">をサポートした話。
<video>よりも<img>の方がパフォーマンスのよい理由。
GIF、WebP、mp4でのファイルサイズの違いなどについて
WebRTCで統計情報を収集する - Qiita
qiita.com/yusuke84/items/dc6e5a4ed109c4631b66
WebRTCでの使用コーデック、送受信ストリーム情報などのメディアやネットワークに関する統計情報を取得する方法について
スライド、動画関係
New Web Platform APIs // Speaker Deck
speakerdeck.com/arnellebalane/new-web-platform-apis
最近増えた色々なWebplatform APIについてのスライド。
Broadcast Chennel、Network Information、Web Share、Credential Management、Payment API、Resize Observerなど
サイト、サービス、ドキュメント
reactjs/react-a11y: Identifies accessibility issues in your React.js elements
Reactコンポーネントのアクセシビリティに関する問題を見つけるライブラリ
ソフトウェア、ツール、ライブラリ関係
ReactPrimer/ReactPrimer: React component prototyping tool that generates fully connected class component code.
github.com/ReactPrimer/ReactPrimer
Reactコンポーネントのプロトタイピングツール
WeiChiaChang/stacks-cli: 📊 Analyze website stack from the terminal 💻
github.com/WeiChiaChang/stacks-cli
指定したURLが使っているライブラリやCDN、アクセス解析ツール、サーバなどを解析してくれるツール
書籍関係
Web Development with Node and Express, 2nd Edition - O'Reilly Media
shop.oreilly.com/product/0636920084266.do
Node.jsとExpressでのウェブアプリ開発についての書籍
