JSer.info #464 - Node.js向けのHTTPクライアントライブラリであるGot 10がリリースされました。

• Release v10.0.0 · sindresorhus/got

TypeScriptで書き直されたバージョンで、Node.js 10以降がサポート対象となっています。
Node.js 12以降を対象にBrotliのサポート、DNS Cacheのオプションを追加なども行われています。
また、オプション名のリネームを中心に破壊的な変更も多く含んでいます。

• query -> searchParams
• baseUrl -> prefixUrl
• encoding -> responseType

その他にもリトライオプションの使い方の変更、リクエストとレスポンスにおけるJSONの扱い方の変更なども含まれています。

FAB — Frontend Application Bundlesというコミュニティ仕様では、フロントエンドアプリケーションをHerokuやAWS Lambdaなどにデプロイする際のフォーマットについて決めています。

Gatsby、Next.js、Nuxt.jsなどのフレームワークごとにそのアプリケーションの出力形式が異なるため、現状でホスティング環境へデプロイするためにはそれぞれにあわせた設定が必要になります。
FABはその間となるFramework adaptersとなる中間フォーマットを定義して、フレームワークとホスティング環境の相互運用性の向上を試みるプロジェクトです。

FAB Structureでは、アセットを配置する_assetsというディレクトリとNode.jsサーバとAPIを決めたserver.jsをzipでパッケージングしたものが定義されています。

またさまざまIssueがあるため、実際に利用されるようになるかはわかりませんが、
LincのCTOが主となって仕様を作っているようです。

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

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

JSer.info Sponsors

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

ヘッドライン

Release Workbox v5.0.0-rc.1 · GoogleChrome/workbox

github.com/GoogleChrome/workbox/releases/tag/v5.0.0-rc.1

JavaScript ServiceWorker library ReleaseNote

Workbox 5.0.0 RC1リリース

Release v10.0.0 · sindresorhus/got

github.com/sindresorhus/got/releases/tag/v10.0.0

node HTTP library ReleaseNote

Node.js向けHTTPクライアントのGot 10.0.0リリース。
TypeScriptで書き直されたバージョン。
Node.js 10未満のサポート終了、queryをsearchParamsにリネーム、encodingをresponseTypeにリネーム、jsonオプションの変更など。
DNS cacheのサポート、maxRedirectsオプションの追加など

アーティクル

JavaScript frameworks security report 2019 | Snyk

snyk.io/blog/javascript-frameworks-security-report-2019/

Angular React jQuery security article

Angular(JS)、React、jQueryについてのセキュリティレポート。
脆弱性の個数や影響範囲、脆弱性報告、セキュリティ機能についてなど

I created the exact same app in Vue and Svelte. Here are the differences.

medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-vue-and-svelte-here-are-the-differences-c649f8d4ce0a

JavaScript Vue article

VueとSvelteで同じTodoアプリを作成しての比較記事。

Announcing GraalWasm — a WebAssembly engine in GraalVM

medium.com/graalvm/announcing-graalwasm-a-webassembly-engine-in-graalvm-25cd0400a7f2

WebAssembly Java VM article

GraalVMでWebAssemblyのサポート。
GraalVMのTrufle API使ってWebAssemblyバイナリに対するインタープリタを実装し、Wasmを実行できるようにしている。

スライド、動画関係

connor4312/cockatiel: A resilience and transient-fault-handling library that allows developers to express policies such as Backoff, Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback. Inspired by .NET Polly.

github.com/connor4312/cockatiel

JavaScript TypeScript library .net

.NET Pollyをインスパイアしたエラーハンドリングと復帰処理ライブラリ。
バックオフアルゴリズム、キャンセル、リトライ、サーキットブレーカー、タイムアウト、同時呼び出しの制限、フォールバックなどを行う

• App-vNext/Polly: Polly is a .NET resilience and transient-fault-handling library that allows developers to express policies such as Retry, Circuit Breaker, Timeout, Bulkhead Isolation, and Fallback in a fluent and thread-safe manner. From version 6.0.1, Polly targets .NET Standard 1.1 and 2.0+.

GraphQLを用いたサイトに
おけるパフォーマンス改善
（ECサイトを題材に）/ Improving online shopping site performance which using the GraphQL - Speaker Deck

speakerdeck.com/nobuhikosawai/improving-online-shopping-site-performance-which-using-the-graphql

GraphQL performance slide

GraphQLのパフォーマンス改善についてのスライド。
Datadog APMを使ったサーバサイドのGraphQLのクエリトレースの読み方、フロントエンドの不必要なデータを取得するクエリの改善方法について。
クエリと画面を紐付けるためにFragmentとColocation

• Using fragments - Client (React) - Apollo GraphQL Docs

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

open-source-labs/reactime: Chrome extension for state debugging in React applications

github.com/open-source-labs/reactime

React debug Chrome Extension

ReactアプリケーションのStateをデバッグするブラウザ拡張。
その時点のStateの表示、Stateの変化を記録して、特定の時点のStateを再現できる。

Style Guide · Redux

redux.js.org/style-guide/style-guide

redux document

Reduxのスタイルについての公式ドキュメント。
Essential、Strongly Recommended、Recommendedの3つのカテゴリでスタイルに対するガイドをまとめている

Who Can Use

whocanuse.com/

accessibility Tools

背景色、文字色、文字サイズを指定してプレビューでき、コントラスト比やWCAGグレードを算出してくれるツール

FAB — Frontend Application Bundles

fab.dev/

JavaScript bundler Tools spec document

フロントエンドアプリケーションをホスティングにデプロイする際のパッケージングや配信するNode.jsサーバについて決めた仕様。
フレームワークごとに出力形式が異なり、ホスティング環境ごとに設定が異なるのを補うための中間フォーマット

• @fab/static

Linc – The Perfect CI/CD Pipeline for your Frontend

linc.sh/

CI CD webservice JavaScript

フロントエンドアプリケーション向けのCI。CDウェブサービス。
https://fab.dev/ のパッケージをサポートしており、コミットごとテスト、アプリケーションのプレビューができる。

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

KilledByAPixel/JSONCrush: Compress JSON into URL friendly strings

github.com/KilledByAPixel/JSONCrush

JSON URL library JavaScript

JSON文字列をURLセーフにエンコード/デコードするライブラリ

grubersjoe/reflow: Babel plugin to transpile Flow code to TypeScript with CLI wrapper

github.com/grubersjoe/reflow

flowtype TypeScript console Tools

FlowのコードをTypeScriptのコードに変換するCLI。

billinghamj/fix-es-imports: Fixes your ES import paths - from Node-style to explicit filenames

github.com/billinghamj/fix-es-imports

node ECMAScript module Tools

requireでは省略可能なモジュールインポートのindex.jsや拡張子を追加するツール。
ECMAScriptでは拡張子などは省略できないため、import文を修正する目的のツール

neomjs/neo: The webworkers driven UI framework (BETA version)

github.com/neomjs/neo

JavaScript webworker library UI

WebWorkerベースのUIフレームワーク。
Worker内でコンポーネントの処理を行う

• neomjs/neo: The webworkers driven UI framework (BETA version)
• neo/VISION.md at dev · neomjs/neo

書籍関係

子どもから大人までスラスラ読める JavaScriptふりがなKidsプログラミング ゲームを作りながら楽しく学ぼう！ - インプレスブックス

book.impress.co.jp/books/1118101174

JavaScript book

JavaScriptのコードと本文にふりがなをふったプログラミングの書籍
HTMLとJavaScriptを使ったゲームを作りながらプログラミングについてを学ぶ内容