JSer.info #333 - npm v5.0.0がプレリリースされました

npm i -g npm@5

でnpmだけを更新することができます。
(Windowsの場合はfelixrieseberg/npm-windows-upgrade: Upgrade npm on Windowsを利用したほうが安全だとは思います。)

The npm Blog — v5.0.0
Release v5.0.0 · npm/npm (内容は同じ)

npm@5は2017-05-30リリース予定(日本時間だと明日)のNode.js 8.0.0に同梱される予定となっています。

追記: Node v8.0.0 (Current) | Node.jsリリースされました。

npm@5の変更点としてはインストール速度の改善され、npm installの--saveオプションがデフォルト化しています。
加えて従来のshrinkwrapとは別のロックシステムとしてpackage-lock.jsonの導入されています。
package-lock.jsonはnpm installする際にデフォルトで作成/更新される点はYarnと同様です。
Gitで依存してるモジュールもprepareが呼ばれるように、--offline/--prefer-online/--prefer-offline、sha512のサポートなどが追加されています。

npm install ../のように相対パスでインストールした時の挙動が変更されています。
従来は相対パス先のディレクトリをまるごとコピーする挙動でしたが、npm@5からはsymlinkを貼るようになりました。

symlink

npm 2.0.0でローカルモジュールを使ってrequire('../../../')を回避する | Web Scratch
- 古い挙動について書かれてる

この相対パスのインストールは将来的にはlink:という識別子に変更される可能性がありそうです(今はfile:のまま)
Yarnも同様の仕組みをサポートする予定です。

:link dependencies by mgcrea · Pull Request #34 · yarnpkg/rfcs

sha512についてもnpm registryの都合でYarnもSHA1を使っていましたが、こちらも追従するようです。

SHA1 -> SHA256 · Issue #816 · yarnpkg/yarn

Notes: Yarnは今1.0に向けてIssueのtriageとyarn workspace(Lernaみたいなもの)のサポートを進めています。

What's New In DevTools (Chrome 60) | Web | Google Developersという記事ではChrome 60の開発者ツールの機能について紹介されています。

AuditパネルがLighthouseを使ったものに変更され
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化などデバッグ周りの改善が含まれています。

Google Chrome Canaryなどを使うと試すことができます。

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

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

JSer.info Sponsors

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

ヘッドライン

[WIP] 8.0.0 Release Proposal by jasnell · Pull Request #12220 · nodejs/node

github.com/nodejs/node/pull/12220#issuecomment-303699926

node.js ReleaseNote

Node.js 8.0.0 RC1リリース

Release v5.0.0 · npm/npm

github.com/npm/npm/releases/tag/v5.0.0

ReleaseNote npm

npm v5.0.0プレリリース。ローカルパスのnpm installはsymlinkとなるように、--saveがデフォルト化、Gitで依存してるモジュールもprepareが呼ばれるように、package-lock.jsonの導入、インストール速度の改善、--offline、sha512のサポートなど

npm v5 がリリースされた - from scratch

アーティクル

All About Recursion, PTC, TCO and STC in JavaScript

lucasfcosta.com/2017/05/08/All-About-Recursion-PTC-TCO-and-STC-in-JavaScript.html

JavaScript ECMAScript article

JavaScriptの末尾呼び出し最適化についての解説記事。
Proper Tail Calls (PTC)、Syntactic Tail Calls (STC)について

Altering the DOM with JavaScript | Zell Liew

zellwk.com/blog/js-in-dom/

DOM JavaScript tutorial

DOM APIの基本的な使い方のついての記事。
querySelectorでの要素選択、addEventListenerでのイベント登録、classListでのクラス処理、要素の追加/更新などについて

TypeScriptのInterfaceとType aliasの比較 - Qiita

qiita.com/tkrkt/items/d01b96363e58a7df830e

TypeScript

TypeScriptのinterfaceとtype aliasについての比較まとめ

Node.js Streams: Everything you need to know – freeCodeCamp

medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93

node.js stream article

Node.jsのStreamについての解説記事

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

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

Chrome debug article

Chrome 60の開発者ツールについて。
AuditがLighthouseを使ったものに変更。
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化など

GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps

Using Fetch | CSS-Tricks

css-tricks.com/using-fetch/

JavaScript tutorial article

Fetch APIの使い方についての解説。
データの取得、エラーハンドリング、レスポンスの処理、FetchのラッパーであるzlFetchについて

Event Bubbling in JavaScript? Event Propagation Explained

www.sitepoint.com/event-bubbling-javascript/

DOM event article

DOMのイベントバブリングとキャプチャフェーズについての解説。
target、currentTarget、eventPhaseeを使ってイベントの動きを可視化してる

スライド、動画関係

ReactEurope 2017 - Day 1 - YouTube

www.youtube.com/playlist?list=PLCC436JpVnK3ruJeDWd-xWIMb0l47VcxD

React イベント video

ReactEurope 2017の動画一覧

What I Learned Benchmarking React - Dominic Gannaway aka @trueadm at @ReactEurope 2017 - YouTube

www.youtube.com/watch?v=djOc1EK07Tk

JavaScript library performance video

JavaScriptライブラリのベンチマーク結果を改善する方法について。
Rollupを使ってflat bundleすることでサイズとロード時間の削減、使わないモジュールの削除、ベンチマークツールについて。
lighthouseを使ったモジュールのベンチマークについて

react/benchmark.js at f0df495f9a97c0f24a3c20761244dab7da99bd77 · facebook/react

Keynote - Andrew Clark aka @acdlite at @ReactEurope 2017 - YouTube

www.youtube.com/watch?v=QW5TE4vrklU

React video

Reactの今後のロードマップについての発表。
React v16ではFragmentsサポート、Portal、Fiber(opt-in)、エラーハンドリングの強化が行われる。
それ以降は可視領域の優先度スケジューラ、Code Spilittingの改善など

How Streaming Can Supercharge React - Sasha Aickin aka @xander76 at ReactEurope 2017 - YouTube

www.youtube.com/watch?v=UhdGiVy3_Nk

React サーバー video performance

Reactとサーバサイドレンダリングについての発表動画。
SSRには表示を早くするメリットがあるがTTIは長くなる問題がある。
これを解決するために、一定のブロックでコンポーネントをプログレッシブにレンダリングすることでTTIを改善する案について。
また、ReactにReactDOMServerStreamが追加されたことについて。

ECMAScript 2017: what’s new for JavaScript? // Speaker Deck

speakerdeck.com/rauschma/ecmascript-2017-whats-new-for-javascript

ECMAScript slide

ECMAScriptのProposalのプロセスとES2017についてのスライド。
ES2017で追加されるAsync Function、Shared Array Buffer、Object/Stringの追加メソッド、関数の引数における末尾カンマの許容について。
また現在Proposal段階の仕様の紹介