JSer.info #363 - MSEdge(Insider build)とSafari(Technology Preview)でそれぞれService Workerが実装されたことについてのブログが公開されました。
- Service Workers: Going beyond the page - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
- Release Notes for Safari Technology Preview 46 | WebKit
これによりモダンブラウザにはService Workerが実装されることになります。
MSEdgeとSafariどちらもまだ実験的なビルドでの公開なので、正常に動かないケースもあるようです。
その場合はそれぞれのIssue Trackerに報告することが推奨されています。
- MSEdge: Microsoft Edge issue tracker - Microsoft Edge Development
- Safari: Bug List
Jest 22がリリースされました。
Node.js 4のサポート終了、Custom Runnerのコアとなるjest-workerが公開されました。
Jestは元々node-worker-farmを使い、テストの並列実行を行っていましたが、その役目をjest-workerに置き換えていました。
そして、Jestを並列実行処理の基盤として使えるCustom RunnerがJest 22で正式に公開されています。
これにより、Jestの上でjest-runner-mochaやjest-runner-eslintのように別のテストフレームワークやLint処理などを並列実行できるようになっています。
詳しくは次の動画を見てください。
またテスト結果のフォーマッタの変更、--detectLeaksの追加、Babel 7のサポートなどが行われています。
The Future of jQuery UI and jQuery Mobile | jQuery UI Blogでは、jQuery UIとjQuery Mobileのプロジェクト統合について書かれています。
jquery-mobileはjquery-uiに依存していますが、今までチームやリポジトリは別々にありました。
今回、@scottgonzalezがjQuery UIプロジェクトのリーダを辞めることになり、現在jQuery Mobileのプロジェクトリーダである@arschmitzがjQuery UIプロジェクトも見ることになりました。
jQuery MobileはUIに依存しているため、重複や無駄を避けるために2つのプロジェクトを統合したチームにしていく方針について書かれています。
また合わせて協力者を募集するためhttps://jqueryui-dev.slack.com/のslackチームを作り、意見を募集しています。
(http://bit.ly/2Btf6puからslackチームにjoinできる)
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release Notes for Safari Technology Preview 46 | WebKit
webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/
Safari Technology Preview Release 46リリース。
Service Workerがデフォルトで有効化、--useBigIntフラグつきBigIntの実装、img要素のdecoding属性のサポートなど
V8 JavaScript Engine: V8 release v6.4
v8project.blogspot.com/2017/12/v8-release-64.html
V8 v6.4リリース。
パフォーマンス、メモリ使用量の改善。named captureなどの正規表現Proposalの実装と有効化、import.meta.urlのサポートなど
Release Webpack-CLI V.2.0.0 · webpack/webpack-cli
github.com/webpack/webpack-cli/releases/tag/v.2.0.0
webpack-cli 2.0.0リリース。
addコマンド、serveコマンドの追加など
Release v2.0.0 · karma-runner/karma
github.com/karma-runner/karma/releases/tag/v2.0.0
Karma v2.0.0リリース。
Node.js 4未満のサポート終了、エラー表示の改善など
ESLint v4.14.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2017/12/eslint-v4.14.0-released
ESLint 4.14.0リリース。
パーサ向けにScope解析のhookポイントが追加された。
Jest 22: Refinements & Custom Runners · Jest
facebook.github.io/jest/blog/2017/12/18/jest-22.html
Jest 22リリース。
Node.js 4のサポート終了、カスタムRunnerのコアとなるjest-workerの公開。
テスト結果のフォーマッタの変更、--detectLeaksの追加、Babel 7のサポート、MITライセンスに変更など
アーティクル
【連載記事】JavaScriptでプログラミングを学ぶ その1：基礎と文法
sbfl.net/blog/2017/12/14/javascript-programming-1/
プログラミングを学んだことない人向けのJavaScript入門連載。
Use a Render Prop! – componentDidBlog
cdb.reacttraining.com/use-a-render-prop-50de598f11ce
Reactの子コンポーネントと値やロジックを共有するパターンとしてのrender propsについて
React 🎄
アドベントカレンダー形式のReactチュートリアル
Service Workers: Going beyond the page - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog
blogs.windows.com/msedgedev/2017/12/19/service-workers-going-beyond-page/
MSEdgeのService Workerが実装された。
Service Workerの基本的な使い方やService Workerの制限について書かれている。
The Future of jQuery UI and jQuery Mobile | jQuery UI Blog
blog.jqueryui.com/2017/12/the-future-of-jquery-ui-and-jquery-mobile/
jQuery MobileはjQuery UIに依存しているが、今までは別々のチーム/リポジトリとなっていた。
重複などの無駄があるため、チームを統合し、停滞しているプロジェクトを改善していく指針が公開された。
あわせてSlackチャンネルを開設して協力者を募集している。
Preloading modules | Web | Google Developers
developers.google.com/web/updates/2017/12/modulepreload
<link rel="modulepreload">について。
<link rel="preload">との違い、モジュールの依存関係はフラットにすべてのファイルを定義するべきかについて
Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance · Mark's Dev Blog
blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
reselectを使ったパフォーマンスの最適化について。
reselectはstateからstateを作るライブラリで、入力に対してメモ化が行われている。
これを使いReduxのstateからアプリケーションに適切な形へstateを変換させる例について紹介している
ES6 Modules のエラー処理を決定的(deterministic)にした話 - Google ドキュメント
docs.google.com/document/d/1Wuc2LVLb2Ii-itnA4sKw_KndJGvZ4mvdfw0POm5qcs4/edit#
ES Modules(仕様)のエラーがネットワークに依存したものとなっていて、毎回異なるエラーになる問題があった。
エラーが毎回同じ結果となるように、仕様をどのように修正していったかについて。
ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM — hayato.io
DOMやShadow DOMの構造や実装についての解説記事。
Shadow DOMの登場によってDOMはツリーのツリー(Super Tree)となっている。
その場合におけるCSSセレクタのマッチングやイベントパスについてなどをChromeの実装と合わせて解説している。
Lint the Web Forward With Sonarwhal ◆ 24 ways
24ways.org/2017/lint-the-web-forward-with-sonarwhal/
Sonarwhalを使ったウェブサイトのLintについての記事。
Sonarwhalの基本的な使い方や設定について解説している
Testing Angular 2 and Continuous Integration with Jest - Semaphore
semaphoreci.com/community/tutorials/testing-angular-2-and-continuous-integration-with-jest
Jestを使ったAngularのテストについて
スライド、動画関係
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa // Speaker Deck
speakerdeck.com/sisidovski/nikkei-high-performance-pwa
ウェブサイトのパフォーマンス改善についてのスライド。
アセットの配信の最適化、Resource Hintsでのpreload。
SpeedCurveを使ってのモニタリングやファイルサイズのチェック。
Service Workerでのキャッシュやデバッグなどについて
サイト、サービス、ドキュメント
amsul/react-performance: Helpers to debug and record component render performance 🚀
github.com/amsul/react-performance
React 16で動くreact-addons-perfのようなものを目指すライブラリ。
Reactコンポーネントのプロファイルを取れるライブラリ。
書籍関係
Responsively Retrofitting: Retrofitting Web Sites with HTML5 and CSS3: Christopher Schmitt: 9781449364205: Amazon.com: Books
www.amazon.com/Responsively-Retrofitting-Sites-HTML5-CSS3/dp/1449364209
2018年8月25日発売
既存のレガシーなウェブサイトをモバイル向けにリニューアルする方法についてを扱う書籍
