2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。

木村賢(Satoshi Kimura) @kimuyan PWAはユーザーエクスペリエンスを向上させるもの。 Webアプリであることにはかわりなく、いままでやってきたものをよりよくするもの。 #PWATokyo 2017-09-22 09:41:34

フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました

Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読

Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得

Intro Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。 https://w3c.github.io/resource-hints/ 主に以下がある。 dns-prefetch preconnect prefetch prerender 今回は本サイトでこれを適用した話。 投機的なリソース取得 例えば、ログインページの次には、そのサービスのメインページに遷移する頻度が高い。 そして、メインページでは、以下のような追加のリソースが必要になるだろう。 追加の JS 追加の CSS 追加の Image 追加の API アクセス それぞれを DNS 解決 -> TCP 接続 -> リソースのフェッチ、と繰り返していくと、イニシャル表示は必然的に時間がかかる。 ところが、この遷移に

ToKyoto.js https://kyotojs.connpass.com/event/64310/

IntersectionObserverを使っていただきたいだけの話

Real World React Native の資料です。 もともと医療に親しくなかったJSエンジニアが医療業界の事業をやっている会社で、React Nativeを用いて治療アプリを開発している話です。

pwa_study - connpassに参加してきたのでメモ。 用語 SW = Service Worker XSS = cross site scripting Fetch = Fetch API ウェルカムLT クライアントサイドDDDが行われるようになってきた クライアントサイドにロジックが寄ってきてる 難しい Service Workerもクライアントサイドにそういうロジックや仕組みがよってきたという現象の一つなのでは Service Worker Lifecycle - laco スライド: Service Worker Lifecycle by Suguru Inatomi SWのライフサイクル Service Worker のライフサイクル  |  Web  |  Google Developers これよめば大体分かる スライド -> 記事読むと良い register -

2017.09.12 Web Components 周辺の仕様とかブラウザ互換性 2017年秋 二週間後の素振り入ってます、連投ですが悪しからず。Web Components v0 から Web Components v1 へのアップデートに関しては、去年の DevFest Tokyo 2016 で発表した Web Components 2016 & Polymer v2 にまとめてあるが、それを改めて見直している。 HTML Templates HTML Templates は HTML ドキュメントに埋め込まれてもコピーして使うまで非活性であるような、本来的な雛形の機能を実現する <template> 要素の仕様である。 <script type="text/template">...</script> やら <div style="display: none">...</div> や

PWA Study( https://web-study.connpass.com/event/65267/ ) で発表した資料です。

Treebo is India’s top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production. What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interact

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to p

if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/sw.js') .then((registration) => { registration.update() .then(() => { registration.unregister(); }); }); }

Deciding on a JavaScript framework for your web application can be overwhelming. Angular and React are very popular these days, and there is an upstart which has been getting a lot of traction lately: VueJS. What’s more, these are just a few of the new kids on the block. Javascripts in 2017 — things aren’t easy these days!So, how are we supposed to decide? A pros-and-cons list never hurts. We’ll d

以前、別の記事でAkka製のチャットサーバを作ったのでシンプルなクライアントアプリも作りました。 バージョン情報 パッケージ名 バージョン WebSocketとSubjectの連携イメージ RxJSの部品は、今回 Subject を使います。Subjectは、定義したバックエンドのデータソースを Subscribe することができ、なおかつバックエンドに対して next によりデータを送出する能力をもっています。一方でWebSocketはコネクションが成立した後、 onmessage イベントに対するハンドラを登録してデータ受信時のアクションを定め、 send によってデータを送信します。この時点で Subject と WebSocketは相性が良いのではないかと考えました。実際この考えを実装した先人がいます。 WebSockets with Angular2 and RxJS – Łuk

App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす

You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で

最近こんな記事をMediumの方に書きました。 medium.com ツイッターで報告したら、Dat界隈の人たち + npm社の人たちがRTしてくれて 20k imp くらいに。びっくり。 I just published “dep: a little Node.js dependency installer” https://t.co/9umlUvCmxq— Daijiro Wachi 📦⛓️ (@watilde) August 25, 2017 せっかくなので日本語でも軽くフォローします。why, how, whatだけ。 npmの問題点 週次のリリースを月次リリースに変更、2年で3回のbreaking changeをしたにもかかわらず新機能は増加の一途。結果としてbug fixに時間が随分とかかるようになりました。原因は主に下記の3つがあります。 リリース頻度の減少 コミッター2名