Fork me on GitHub

2019-03-05のJS:Storybook 5.0.0、Preact X(αリリース)、ウェブサイトのサイズ(パーセンタイル)

Edit on GitHub 編集履歴を見る

JSer.info #425 - コンポーネント開発環境であるStorybook 5.0.0がリリースされました。

UIやキーボードショートカットやURLの構造などが変更されています。

破壊的な変更としてwebpack設定の引数の変更、options addonが非推奨になるなどの変更が入っています。
マイグレーション方法については次のページにまとめられています。


Preactの次期メジャーバージョンであるPreact X(10.0.0)のα版が公開されています。

FragmentcomponentDidCatchHookscreateContext、CSS Custom Propertiesに対応しReactのアップデートに追従しています。またpreact-compatを別パッケージではなくpreact/compatとして同梱するようになっています。

破壊的な変更として、string refやcreateClassといったすでに非推奨だったものが削除されています。
また、setStateが同期的にstateを変更しなくなる(Reactも同様)変更やVNodeのプロパティ構造の変更などが行われています。

合わせてPreact Xについての発表動画を見るとわかりやすいかもしれません。


今週のTweet

HTTP Archiveのデータをもとにウェブサイトのサイズをパーセンタイルで表現した図です。
JavaScriptのファイルサイズをみると、ウェブサイトの50%は420KB以下ですが、10%は1.2MB以上のファイルサイズとなっていることがわかります。

このHTTP Archiveの元データは誰でもBigQueryからアクセスできるようになっているので、興味がある人は以下のドキュメントを見てみると良いかもしれません。


ヘッドライン


February 2019 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/february-2019-security-releases/

node.js security ReleaseNote

Node.jsのセキュリティ修正リリース。Node.js LTS全部に対して修正がででている。
keep-alive系のDoSが2種(どちらもimpactはlow)とOpenSSL脆弱性(Node 10+は影響なし)の修正がされている。


Ember.js - Ember 3.8 Released

emberjs.com/blog/2019/02/27/ember-3-8-released.html

JavaScript library ReleaseNote

Ember 3.8リリース。
Element Modifier Managerの追加、Array helperの追加など


Release v5.0.0 · storybooks/storybook

github.com/storybooks/storybook/releases/tag/v5.0.0

JavaScript ReleaseNote UI

Storybook 5.0.0リリース。
デザインとURL構造の変更、ショートカットの変更、webpackのカスタム設定の引数を変更など


Release Preact X is here 🎉 · developit/preact

github.com/developit/preact/releases/tag/10.0.0-alpha.0

React library ReleaseNote

Preact X α版リリース。
FragmentcomponentDidCatch、Hooks、createContext、CSS Custom Propertiesに対応など。
またpreact-compatを別パッケージではなくpreact/compatとして同梱するようになるなど


TestCafe v1.1.0 Released | TestCafe

devexpress.github.io/testcafe/blog/testcafe-v1-1-0-released.html

testing JavaScript E2E ReleaseNote

TestCafe 1.1.0リリース。
TypeScript 3.3サポート、TypeScriptの型改善など


アーティクル


HTML Snapshot Testing with Node

spin.atomicobject.com/2019/02/13/html-snapshot-testing-with-node/

JavaScript article testing

HTMLのスナップショットを比較するスナップショットテストについての記事。
スナップショットテストをどのように実装するかについて


Progressive React

houssein.me/progressive-react

React article performance

Reactを中心にしたウェブアプリの改善についての話。
Reactレベルとアプリレベルでのパフォーマンスについて。
shouldComponentUpdateでの無駄なレンダリングの最小化、バンドルサイズとCode Splitting、キャッシュやSSRによる初期表示の改善、クリティカルパスの最適化などについて


webpackとBabelの基本を理解する(1) ―webpack編― - Qiita

qiita.com/koedamon/items/3e64612d22f3473f36a4

webpack babel tutorial

webpack、Babelの役割とその設定方法のチュートリアル


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


Package Diff

diff.intrinsic.com/

npm webservice library

npmパッケージのバージョン同士のDiffを表示できるサービス


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


dyatko/arkit: Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams

github.com/dyatko/arkit

JavaScript Tools SVG UML

アーキテクチャのダイアグラムをファイルから生成するツール。。
コードベースのファイルを指定して、その構造をPlant UMLやSVGなどの図に変換してくれるツール


autoNumeric/autoNumeric: autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.

github.com/autoNumeric/autoNumeric/

JavaScript DOM library

通貨の入力を扱うライブラリ。
既存の入力要素へバインディングして、通貨の入力に対するバリデーションや表示のフォーマットなどを行う


pikapkg/web: Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.

github.com/pikapkg/web

JavaScript module Development Tools

Rollupを使って既存モジュールをES Modulesに変換するツール。
変換済みのmoduleはブラウザからES moduleとしてimportできる


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