Fork me on GitHub

2018-11-27のJS: Web Components入門、React-Reduxの歴史と実装、 HTTP/3 explained

Edit on GitHub 編集履歴を見る

JSer.info #411 - "Lets Build Web Components!"というWeb Componentsについての連載記事が公開されています。

Web Componentsの基本的な使い方、Polyfill、ライフサイクル、スタイルなどについて解説しています。
また、PolymerGluonjsといったフレームワークを使ったコンポーネント開発などについても書かれているためかなり幅広い内容になっています。


Idiomatic Redux: The History and Implementation of React-Redux · Mark's Dev Blogという記事では、ReduxのメンテナーのMark EriksonReact Reduxの歴史と実装について紹介しています。

v5までのReact Reduxの実装とv6 β実装されたContext APIベースの実装やパフォーマンスの問題についても書かれています。
また今後の話として、ReactのHooks APIを使った実装の提案などについても書かれています。


HTTP/2 explainedの著者でもあるDaniel StenbergによるHTTP/3 explainedが公開されています。

この書籍ではHTTP/3について解説されています。
HTTP/3自体がまだ策定中であるため、この書籍もまだ更新が予定されています。

また、ソースコードもGitHubで公開されています。


アーティクル


Lets Build Web Components! Part 1: The Standards - DEV Community 👩‍💻👨‍💻

dev.to/bennypowers/lets-build-web-components-part-1-the-standards-3e85

WebComponents article

Web Componentsについての連載。
Web Componentsの構成要素、polyfill、読み込み方法、ライフサイクル、非同期ロード。
また:host<slot>、スタイル、アクセシビリティ、Polymerなどのフレームワークについて


WebSockets - A Conceptual Deep-Dive | Ably Realtime

www.ably.io/concepts/websockets

WebSocket article library

WebSocketについての記事。 Cometのようなポーリングによる通信、WebSocketによるハンドシェイクについて。 WebSocketを使っての接続方法や著名なライブラリの紹介など


Idiomatic Redux: The History and Implementation of React-Redux · Mark's Dev Blog

blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/

React redux article

react-reduxの歴史と今後について
今までのreact-reduxの実装とv6 β実装されたContext APIベースの実装。
また、React Hooksを使った実装のProposalについてなど


ZEIT – ncc: Node.js Compiler Collection

zeit.co/blog/ncc

node.js Tools article

Node.jsのプログラムを依存含めて1つのファイルにするnccについて。
ファイル1つにまとめることで配布性や実行時の起動時間のI/Oオーバヘッドの改善を目的としている。


Malicious code found in npm package event-stream downloaded 8 million times in the past 2.5 months | Snyk

snyk.io/blog/malicious-code-found-in-npm-package-event-stream

node.js npm library security article

[email protected]flatmap-streamの問題について。
flatmap-streamにwalletsからbitcoinを盗むコードが含まれており、[email protected]がこのパッケージに依存していた問題について。
現在flatmap-streamはnpmからunpublishされている


How we made Carousell’s mobile web experience 3x faster

medium.com/carousell-insider/how-we-made-carousells-mobile-web-experience-3x-faster-bbb3be93e006

performance article

carousellにおけるパフォーマンス改善について。
PRPLパターン、Critical CSS、Lazy LOading、画像の圧縮とCDN、Service Workerの導入などについて


フロントエンド向けvalidator: favalidの紹介 - asterisc

akito0107.hatenablog.com/entry/2018/11/23/195538

JavaScript library article

バリデーターを関数で書いてcombineできるライブラリのfavalidについて


スライド、動画関係


seo_for_spa.pdf - Speaker Deck

speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b

browser SEO google slide

Google botに適切に解釈されるようにするための手法についてのスライド。
Google botがChrome 41相当であることによる制限、タイムアウトの検証、Dynamic Rendering(prerender)やSSRなどの対策についてなど


Angular Webアプリケーションの最新設計手法.pdf - Speaker Deck

speakerdeck.com/koumatsumot0/angular-webahurikesiyonfalsezui-xin-she-ji-shou-fa

Angular slide

Angularのコンポーネント設計やステート管理についてのスライド


PWA導入の成果と課題 / nikkei-pwa-html5conf2018 - Speaker Deck

speakerdeck.com/sisidovski/nikkei-pwa-html5conf2018

PWA performance slide

PWAの導入と運用しての課題についてのスライド。
Service Workerによるパフォーマンスの改善、Add to HomeScreenのハンドリング、Performance Budgetの設定方法とパフォーマンス監視などについて


HTTP and 5G (fixed1)

www.slideshare.net/dynamis/httpp-and-5g-fixed1

QUIC browser network slide

5G環境での通信試験についてのスライド。
5Gの試験環境における輻輳制御方法CUBICとBBRの比較、HTTP/1、HTTP/2、QUICの比較などについて


Class features in NodeFest Japan - Google スライド

docs.google.com/presentation/d/1nsR7QnPlyhlPj1ff4cYyARwcWrYM1j_fM7dpbFZM3K8/mobilepresent#slide=id.p

ECMAScript proposal slide

ECMAScript ProposalのPrivate fieldsについてのスライド。
privateを実現するための構文として#variableを使う理由や経緯、構文、現在のStageについてなど


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


google/js-green-licenses: JavaScript package.json License Checker

github.com/google/js-green-licenses

JavaScript library npm ライセンス

package.jsonにかかれている依存ライブラリのライセンスチェックツール。
Pull Reuqest対するチェックなども対応している


KidkArolis/jetpack: 🚀 Jetpack – a more convenient webpack dev server.

github.com/KidkArolis/jetpack

webpack Tools

webpackベースの開発サーバ、ビルドツール。
Parcelのようにデフォルトの設定があり、設定なしで利用できることを目的としている。


wasmerio/wasmer: High-Performance WebAssembly JIT interpreter

github.com/wasmerio/wasmer

WebAssembly console Tools Rust

WebAssemblyファイル(.wasm.wat)を実行できるスタンドアローンなツール。


Introduction · HTTP/3 explained

http3-explained.haxx.se/en/

http3 document

HTTP/3とQUICについての解説ドキュメント。
TCPとUDP、HTTP/2との違い、QUICの仕組みなどについて


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


developit/htm: Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

github.com/developit/htm

HTML babal jsx library

JSXライクなTagged Templatesライブラリ。babelプラグインでコンパイルも可能になっている。


areknawo/Rex: Your RegEx companion.

github.com/areknawo/rex

JavaScript 正規表現 library TypeScript

メソッドチェーンで正規表現を作成したり、マッチング、置換するライブラリ


boneskull/create-yo: Use any Yeoman generator with "npm init"

github.com/boneskull/create-yo

npm library

npm init yo <generator>できるYoeman向けのツール


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