JSer.info #340 - WebGLフレームワークのBabylon.js 3.0がリリースされました。
WebGL 2、WebVR 1.1のサポート、Babylon.GUIの追加、morph targetのサポート、WebCamを使ったライブテクスチャに対応などが行われています。
詳しくはリリースノートなどを参照すると良さそうです。
Let's Dev: A Package Manager | Yarn Blogという記事では、Yarnのようなパッケージマネージャの作り方について書かれています。
300行ほどのコードですが、どのようにパッケージをダウンロードし、依存関係を解決しリンクをしているかについて。
また、依存関係の解決をどのように最適化することがパフォーマンスに繋がるかなどYarnのデザインについて書かれています。
samccone/bundle-buddy: A tool to identify bundle duplication across splits.というツールでは、Code Splittingを行った際に作成された各bundle(chunk)で重複してるモジュールがないかをビジュアライズしてくれます。
最近、初期ロードのサイズを小さくするためにCode Splittingを行うケースが増えてきています。
一方、一つだったbundleを分解するということは、コード間で共通して利用していたモジュールが複数のbundleから参照される可能性を作っています。この際、分解された各bundleに同じモジュールのコピーが含まれます。
このツールでは、Source Mapを使い各bundleで重複して含まれているモジュールがあるかを調査できるようになっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Announcing Babylon.js 3.0 - Building Apps for WindowsBuilding Apps for Windows
blogs.windows.com/buildingapps/2017/07/12/announcing-babylon-js-3-0/
WebGLフレームワークのBabylon.js 3.0リリース。
WebGL 2、WebVR 1.1のサポート、Babylon.GUIの追加、morph targetのサポート、WebCamを使ったライブテクスチャに対応など
Release v2.4.0 Kill la Kill · vuejs/vue
github.com/vuejs/vue/releases/tag/v2.4.0
Vue 2.4.0リリース。
SSRでasync componentのサポート、コンポーネントオプションにinheritAttrs、インスタンスのプロパティに$attrs、$listenersを追加。
commentsオプションでテンプレート中のHTMLコメントを維持できるようになるなど
Release 0.21.0 · avajs/ava
github.com/avajs/ava/releases/tag/v0.21.0
AVA 0.21.0リリース。
Bufferを使っていてため、Node.js 4.5未満で動かない問題を修正、flowの型周りを修正
Security updates for all active release lines, July 2017 | Node.js
nodejs.org/en/blog/vulnerability/july-2017-security-releases/
Node.jsのv4,6,7,8のセキュリティアップデート。 V8 snapshotsを有効化してる場合に問題があるため、デフォルトでsnapshotsが無効化された。 この問題が解決されるまでvm.runInNewContextのパフォーマンスが低下した状態となる。
Sass 3.5 is Released « Sass Blog
sass.logdown.com/posts/2026639-sass-35-is-released
Sass 3.5リリース。
::slotted()のサポート、var()をcolor functionへ渡せるように、Dart Sassの互換性向上など
Release 8.0.0 · stylelint/stylelint
github.com/stylelint/stylelint/releases/tag/8.0.0
stylelint 8.0.0リリース。
Semver policyの追加、新しいconfigとしてstylelint-config-recommendedを追加、ルールの削除やdeprecatedなど
アーティクル
JavaScript Test-Runners Benchmark – DailyJS – Medium
medium.com/dailyjs/javascript-test-runners-benchmark-3a78d4117b4
JavaScriptのテストフレームワークのベンチマーク比較。
同期的なテスト、非同期的なテストでそれぞれjasmine、mocha、AVA、Jestなど著名なテストフレームワークの実行速度を比較したもの
What's New In DevTools (Chrome 61) | Web | Google Developers
developers.google.com/web/updates/2017/07/devtools-release-notes
Chrome 61の開発者ツールの変更点について。
モバイルデバイスシミュレートにThrottlingの設定を追加、Storageの利用率の表示、Flamechartのマウスホイールの動作を設定可能に、ES Modulesのデバッグ対応など
Let's Dev: A Package Manager | Yarn Blog
yarnpkg.com/blog/2017/07/11/lets-dev-a-package-manager/
Yarnのようなパッケージ管理ツールを作りながらそのデザインを見ていくチュートリアル。
どのようにパッケージをダウンロードし、依存関係を解決し、リンクをしているかについて。
依存関係をどのように最適化するかについて
サイト、サービス、ドキュメント
samccone/bundle-buddy: A tool to identify bundle duplication across splits.
github.com/samccone/bundle-buddy
webpackなどでCode Splittingした際に、各bundleファイル間で重複して含まれているモジュールを見つけることができるツール
Learn Apollo | Hands-on GraphQL Tutorial
Apolloを使ったGraphQLクライアントのチュートリアル
Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc... ::ハブろぐ
havelog.ayumusato.com/develop/performance/e744-performance_metrics.html
ウェブクライアントサイドにおけるパフォーマンスの指標となる値やPerformance Budgetなどの用語についての解説
Redux isn't slow, you're just doing it wrong - An optimization guide | React Rocket
reactrocket.com/post/react-redux-optimization/
Reduxを使ったアプリケーションのパフォーマンス・チューニングについての記事。connectオプションの利用、コンポートに必要最小限のデータを渡す、Reselectなどを使ってデータをフラットにすることについてなど
ソフトウェア、ツール、ライブラリ関係
vadimdemedes/ink: 🌈 React for CLIs
コンソール向けのReactライクなライブラリ。
コンソールの表示をコンポーネントで描画できるようにするライブラリ
azu/immutable-array-prototype: A collection of Immutable Array prototype methods(Per method packages).
github.com/azu/immutable-array-prototype
Array#pushなどの破壊的なメソッドの非破壊的なバージョンを集めたライブラリ。
メソッド毎に個別のパッケージとしてインストールすることもできる。
indutny/webpack-common-shake: CommonJS Tree Shaker plugin for WebPack
github.com/indutny/webpack-common-shake
CommonJSのモジュールに対するTree Shakingを行うwebpackプラグイン
Atomic Lab - component guide generator based on partial templates
steelydylan.github.io/atomic-lab/
Custom ElementなどのHTMLフラグメントを実際に描画して確認できる開発環境ツール
glayzzle/php-parser: NodeJS PHP Parser - extract AST or tokens (PHP5 and PHP7)
github.com/glayzzle/php-parser
JavaScriptで書かれたPHP 5/7のパーサ。
Kornel / babel-preset-php · GitLab
gitlab.com/kornelski/babel-preset-php
PHPの構文で書かれたコードをJavaScriptの構文に変換するBabel presets
書籍関係
Practical Node.js: Building Real-World Scalable Web Apps: Azat Mardan: 9781484230381: Amazon.com: Books
2018年3月22日発売。
Practical Node.jsの第二版
