JSer.info #432 - コンパイル前提のUIコンポーネントフレームワークであるSvelte 3リリースされました。

Svelte 3: Rethinking reactivity

3.0.0のCHANGELOGには"Everything"としか書かれていませんが、
今までの仕組みを大幅に書き換えたバージョンとなっています。

テンプレートの構文、コンポーネントで利用できるAPI、ステートを変更したときにUIを更新するために変更検知の仕組み(Reactiveな仕組み)が変更されています。
今までは、コンポーネントのステートを set APIなどを使ってUIに反映していました。

<p>{count} doubled is {double}</p>
<button on:click="set({ count: count + 1 })">+1</button>

<script>
    export default {
        data() {
            return {
                count: 0
            };
        },
        computed: {
            doubled: ({ count }) => count * 2
        }
    };
</script>

Svelte 3からは、次のように変更を検知したい文を$ラベル(JavaScriptのラベル)でアノテーションします。このラベルで指定した変数などの値が変更されるとUIが更新されるコードがコンパイル時に生成されます。
($$invalidateという更新を通知する処理が生成コードには含まれるようになります。)

<p>{count} doubled is {doubled}</p>
<button on:click="{() => count += 1}">+1</button>

<script>
    let count = 0;
    doubled = count * 2;

    function handleClick() {
        count += 1;
    }
</script>

この宣言的なReactivityについては次のドキュメントやRFCを見るのが良さそうです。

ものすごく簡単にまとめると、@observableのようなまだ策定中のDecorator構文ではなく、既にあるlabel文と$というラベルを使って、コンパイル時に変数などをObservableを作り出すという手法のようです。

この他にもWrite less codeに寄せた変更などが多く含まれているため詳細は公式サイトを読むのがよさそうです。

Svelte • Cybernetically enhanced web apps

Content Security Policy: A successful mess between hardening and mitigation - Speaker Deckというスライドでは、Googleの主要なドメインにおけるCSP(Content Security Policy)の導入状態などについて書かれています。

Google domainでCSPがどの程度導入されているかのカバレッジや60%以上のXSSはCSPでブロックできている点について。
また、CSP導入の4つのLevelと導入ステップ、ホワイリストの問題とnonce-based CSP、CSPとデプロイのトレードオフについてなど。
CSPのディレクティブ(設定)によってはevalやinline codeなどが利用できないため、CSP対応のリファクタリング手法やステップについて書かれています。

このスライドでも紹介されているホワイリストの問題とnonce-based CSPについては次の記事も参照するとよさそうです。

Content Security Policy Level 3におけるXSS対策 - pixiv inside

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

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

JSer.info Sponsors

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

ヘッドライン

alibaba/rax: [ v1.0 released] The fastest way to build universal application.

github.com/alibaba/rax

React library JavaScript ReleaseNote

ReactライクなAPIを持つUniversalなViewライブラリであるRax 1.0.0リリース。
Hooks APIにも対応している。

Release v5.0.0 · sindresorhus/np

github.com/sindresorhus/np/releases/tag/v5.0.0

npm ReleaseNote

npm publishするnp 5.0.0リリース。
2要素認証を新しく公開するパッケージに関しては自動で有効化、公開に失敗したときのロールバック処理の改善など

Release Notes for Safari Technology Preview 80 | WebKit

webkit.org/blog/8825/release-notes-for-safari-technology-preview-80/

safari ReleaseNote

Safari Technology Preview 80リリース。
ResizeObserverのサポート、window.openの第二引数でnoreferrerのサポート、contentWindowのサポートなど。
またLegacy Safari Extensionsのサポート終了など

Blog - Next.js 8.1 | Next.js

nextjs.org/blog/next-8-1

React AMP ReleaseNote

Next.js 8.1リリース。
AMPサポートが追加された。
コンポーネント内でAMPとの処理分岐でのhybrid対応、next exportでAMPでの出力とバリデーション

Release 10.0.0-beta.0 Reconcilertron · developit/preact

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

React library JavaScript ReleaseNote

Preact 10.0.0-beta.0リリース。
Fragmentsの安定化、条件分岐を含む描画のパフォーマンス改善、コンポーネントの上下関係を考慮した更新処理を行うように修正など

Svelte 3: Rethinking reactivity

svelte.dev/blog/svelte-3-rethinking-reactivity

JavaScript library ReleaseNote

コンパイル前提のUIフレームワークであるSvelte 3リリース。
今までの仕組みを書き直したため、テンプレート構文、API、ウェブサイトが変更されている。
変更検知の仕組みが大きく変わり、set APIではなく、reactiveな変数を$:で宣言しコンパイル時に変更を追跡するコードを生成する方法に変更された

アーティクル

TypeScript再入門「がんばらないTypeScript」で、JavaScriptを“柔らかい”静的型付き言語に（gfx執筆） - エンジニアHub｜若手Webエンジニアのキャリアを考える！

employment.en-japan.com/engineerhub/entry/2019/04/16/103000

TypeScript article

ゆるい型付けの設定で始めるTypeScriptについて。

A horrifying globalThis polyfill in universal JavaScript · Mathias Bynens

mathiasbynens.be/notes/globalthis

ECMAScript JavaScript polyfill article

globalThisのpolyfillとその動作原理についての解説。

Experimental Node.js: testing the new performance hooks

blog.logrocket.com/experimental-node-js-testing-the-new-performance-hooks-31fcdd2a747e

node.js performance article

Node.jsのperf_hooksの使い方についての記事。
モジュールのロード時間やURLへのリクエスト時間を計測を例に紹介している

The perfect unit test

javascriptplayground.com/the-perfect-javascript-unit-test/

JavaScript testing article

Unit Testの書き方について。
テストケース名の書き方、テストをSetup、コード実行、Assertの3つのステップに分解して書くことについて

A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update)

medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

JavaScript library article benchmark

"RealWorld"というベンチマークアプリの各JavaScriptフレームワークなどの実装を比較した記事。
パフォーマンス、出力されたコードのファイルサイズ、Line of Code(LOC)でそれぞれを比較した結果をまとめている

gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

スライド、動画関係

Content Security Policy: A successful mess between hardening and mitigation - Speaker Deck

speakerdeck.com/mikispag/content-security-policy-a-successful-mess-between-hardening-and-mitigation

CSP browser security slide

GoogleにおけるCSPについてのスライド。Google domainのCSPのカバレッジや60%以上のXSSはCSPでブロックできている。
CSP導入の4つのLevelと導入ステップ、ホワイリストの問題とnonce-based CSP、CSPとデプロイのトレードオフについてなど。
CSP対応のリファクタリング手法などについて