Fork me on GitHub

2018-03-13のJS: MobX 4.0.0、PreactとGlimmerのパフォーマンス比較実験

Edit on GitHub 編集履歴を見る

JSer.info #374 - MobX 4.0.0がリリースされました。

Decorator proposal(@decorator)を使わずにObservableオブジェクトを作成するdecorate関数の追加、Object apiの追加、whenflowのような非同期サポートの補助する関数の追加などが行われています。

破壊的な変更として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で実装し、ページロードに関するパフォーマンスの比較実験をした結果について書かれています。
それぞれのアプリでページ表示に関する値を指標として比較した時に、極端な差はでませんでした。

Preact(3kb)とGlimmer.js(30kb)ではファイルサイズに差がありますが、その差がそのままページの表示時間に出てないことについて書かれています。


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

JSer.info Sponsors

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


ヘッドライン


DoneJS 2.0 Released

www.bitovi.com/blog/donejs-2.0

JavaScript library Tools ReleaseNote

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/

JavaScript library ReleaseNote

OpenPGPの実装であるOpenPGP.js 3.0リリース


New in Chrome 65  |  Web  |  Google Developers

developers.google.com/web/updates/2018/03/nic65

Chrome ReleaseNote

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

JavaScript library ReleaseNote

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

ReleaseNote Sass library

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 library article

Reactを使ったフォームの扱いについての記事。
Formikを使ったフォームの作成などについて


Emscripting a C library to Wasm  |  Web  |  Google Developers

developers.google.com/web/updates/2018/03/emscripting-a-c-library

WebAssembly JavaScript article

Emscriptenを使いCのコードをWebAssemblyにして実行するチュートリアル。
libwebpをwasmにコンパイルする話


Feature Policy による Permission Delegation | blog.jxck.io

blog.jxck.io/entries/2018-03-08/feature-policy-permission-delegation.html

browser security article

iframe sandbox、CSP、Feature Policyの役割について。
sandboxはホワイリトストでの機能制限、CSPはブラックリストでの機能制限、Feature Policyは権限の設定をオリジンに対して行う。
またsandboxとFeature Policyの機能重複はしないことについて


Web Workers to the rescue – Rastislav Svarba – Medium

rast.io/web-workers-rescue

JavaScript webworker article

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

article npm

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

JavaScript article performance

同じアプリを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

JavaScript 企業 まとめ

フロントエンドのケーススタディのまとめ。
色々な企業の事例が書かれている。


30 Seconds of CSS

atomiks.github.io/30-seconds-of-css/

CSS tutorial

CSSのスニペットとその解説をまとめたもの。


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


Boxy SVG Editor

boxy-svg.com/

SVG editor software

SVGエディタアプリ


pshihn/workly: A really simple way to move a stand-alone function/class to a web worker. 🏋️‍♀️→ 😄

github.com/pshihn/workly

JavaScript library

ProxyとWebWorkerを使い既存の関数やクラスをWorkerで処理するライブラリ


midwayjs/pandora: A Manageable, Measurable and Traceable Node.js Application Manager represented by Alibaba powered by TypeScript

github.com/midwayjs/pandora

node.js library Tools

Alibaba製のNode.jsアプリケーションの管理ツール。
アプリケーションプロセスの管理、計測、監視、トラブルシューティングのためのデバッグの仕組みなどが持っている。


Run

run.tools/

node.js Tools

Node.js製のデプロイツール。
"Resource"という単位で設定を行い、S3へデプロイといったことを行える。
Resourceは自分で作成することができ、どのようなオプションを受け取るかやオプションを受け取って処理を記述できる。


zipson | JSON parse and stringify with compression

jgranstrom.github.io/zipson/

JavaScript JSON library

JSON.stringify/JSON.parseの代替ライブラリ。
データの圧縮やStreamingのサポートを目的にしている


Rough.js

roughjs.com/

JavaScript canvas library

手書き風の線を描くCanvasライブラリ


この記事へ修正リクエストをする
JSer.info Slackに参加する