JSer.info #374 - MobX 4.0.0がリリースされました。
- MobX 4: Better, simpler, faster, smaller – Michel Weststrate – Medium
- mobx/CHANGELOG.md at master · mobxjs/mobx
Decorator proposal(@decorator)を使わずにObservableオブジェクトを作成するdecorate関数の追加、Object apiの追加、whenやflowのような非同期サポートの補助する関数の追加などが行われています。
破壊的な変更としてshareGlobalStateの削除、observable mapにMapを使うように、extras関係のAPIのリネーム、mobxモジュールがdefault exportをしなくなるなどが行われています。
次のページにマイグレーションガイドが公開されています。
また、現在開発中のMobX 5(15?)ではObservableにES Proxyを使ったものを予定しているようです。
Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js | LinkedIn Engineeringという記事では、同じアプリをPreactとGlimmer.jsで実装し、ページロードに関するパフォーマンスの比較実験をした結果について書かれています。
それぞれのアプリでページ表示に関する値を指標として比較した時に、極端な差はでませんでした。
- Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc... ::ハブろぐ
- First Meaningful PaintやTime to Interactiveについての解説
Preact(3kb)とGlimmer.js(30kb)ではファイルサイズに差がありますが、その差がそのままページの表示時間に出てないことについて書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
DoneJS 2.0 Released
www.bitovi.com/blog/donejs-2.0
DoneJS 2.0リリース。
CanJS 4.0に対応、CIやデプロイの設定をdonejs addで行えるように、donejs upgradeでマイグレーションができるようになっている。
HTTP/2 pushを使ったインクリメンタルレンダリングの対応改善など
We have released version 3.0 of OpenPGPjs, an open source OpenPGP library - ProtonMail Blog
protonmail.com/blog/openpgpjs-3-release/
OpenPGPの実装であるOpenPGP.js 3.0リリース
New in Chrome 65 | Web | Google Developers
developers.google.com/web/updates/2018/03/nic65
Chrome 65の変更点について。
CSS Paint API、Server Tming API、display: contentsの対応、Feature Policyの対応など。
またdocument.allが上書きできなくなるようになるなど
MobX 4: Better, simpler, faster, smaller – Michel Weststrate – Medium
medium.com/@mweststrate/mobx-4-better-simpler-faster-smaller-c1fbc08008da
MobX 4リリース。
Decorator proposal(@decorator)を使わずに同じことをするdecorate関数の追加、コレクション向けのUtility APIを追加、whenの追加など。
またshareGlobalStateの削除、APIのリネーム、default exportをしないようにするなどの破壊的変更が行われている。
Release Futura · sass/libsass
github.com/sass/libsass/releases/tag/3.5.0
libsass 3.5リリース。 引数のtrailing commasサポート、content-exists関数のサポート、CSSのCustom Property、var()のサポートなど
アーティクル
An imperative guide to forms in React – LogRocket
blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a
Reactを使ったフォームの扱いについての記事。
Formikを使ったフォームの作成などについて
Emscripting a C library to Wasm | Web | Google Developers
developers.google.com/web/updates/2018/03/emscripting-a-c-library
Emscriptenを使いCのコードをWebAssemblyにして実行するチュートリアル。
libwebpをwasmにコンパイルする話
Feature Policy による Permission Delegation | blog.jxck.io
blog.jxck.io/entries/2018-03-08/feature-policy-permission-delegation.html
iframe sandbox、CSP、Feature Policyの役割について。
sandboxはホワイリトストでの機能制限、CSPはブラックリストでの機能制限、Feature Policyは権限の設定をオリジンに対して行う。
またsandboxとFeature Policyの機能重複はしないことについて
Web Workers to the rescue – Rastislav Svarba – Medium
Web Workerを使った処理の移譲のコストと効果についての記事。
データの取得と処理をWorkerに移動した場合の処理時間とWorkerへのデータ受け渡しのコストについて
The npm Blog — Introducing `npm ci` for faster, more reliable...
blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable
pacakge-lock.jsonから常にクリーンインストールするnpm ciについて。 現在の存在するnode_modulesディレクトリを削除し、pacakge-lock.jsonを元にインストールする。 キャッシュを使わないCI環境向けのインストールコマンド。
Lighter than Lightweight: How We Built the Same App Twice with Preact and Glimmer.js | LinkedIn Engineering
engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs
同じアプリをPreactとGlimmer.jsで実装し、ページロードに関するパフォーマンスの比較実験をした結果について。
ファイルサイズは重要であるが、ファイルサイズがすべてを決めるわけではないという点について
サイト、サービス、ドキュメント
andrew--r/frontend-case-studies: 💼 A curated list of technical talks and articles about real-world enterprise frontend development
github.com/andrew--r/frontend-case-studies
フロントエンドのケーススタディのまとめ。
色々な企業の事例が書かれている。
30 Seconds of CSS
atomiks.github.io/30-seconds-of-css/
CSSのスニペットとその解説をまとめたもの。
ソフトウェア、ツール、ライブラリ関係
Boxy SVG Editor
SVGエディタアプリ
pshihn/workly: A really simple way to move a stand-alone function/class to a web worker. 🏋️♀️→ 😄
ProxyとWebWorkerを使い既存の関数やクラスをWorkerで処理するライブラリ
midwayjs/pandora: A Manageable, Measurable and Traceable Node.js Application Manager represented by Alibaba powered by TypeScript
Alibaba製のNode.jsアプリケーションの管理ツール。
アプリケーションプロセスの管理、計測、監視、トラブルシューティングのためのデバッグの仕組みなどが持っている。
Run
Node.js製のデプロイツール。
"Resource"という単位で設定を行い、S3へデプロイといったことを行える。
Resourceは自分で作成することができ、どのようなオプションを受け取るかやオプションを受け取って処理を記述できる。
zipson | JSON parse and stringify with compression
JSON.stringify/JSON.parseの代替ライブラリ。
データの圧縮やStreamingのサポートを目的にしている
Rough.js
手書き風の線を描くCanvasライブラリ
