Fork me on GitHub

2017-07-18のJS: Babylon.js 3.0、Yarnの作り方、Code splittingの重複モジュール検査

Edit on GitHub 編集履歴を見る

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で重複して含まれているモジュールがあるかを調査できるようになっています。


ヘッドライン


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 ReleaseNote JavaScript library 3D

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 ReleaseNote

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

JavaScript testing library ReleaseNote

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/

ReleaseNote node.js security

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 ReleaseNote

Sass 3.5リリース。
::slotted()のサポート、var()をcolor functionへ渡せるように、Dart Sassの互換性向上など


Release 8.0.0 · stylelint/stylelint

github.com/stylelint/stylelint/releases/tag/8.0.0

CSS Tools ReleaseNote

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 testing benchmark

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 debug article

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 JavaScript tutorial article

Yarnのようなパッケージ管理ツールを作りながらそのデザインを見ていくチュートリアル。
どのようにパッケージをダウンロードし、依存関係を解決し、リンクをしているかについて。
依存関係をどのように最適化するかについて


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


samccone/bundle-buddy: A tool to identify bundle duplication across splits.

github.com/samccone/bundle-buddy

webpack JavaScript Tools

webpackなどでCode Splittingした際に、各bundleファイル間で重複して含まれているモジュールを見つけることができるツール


Learn Apollo | Hands-on GraphQL Tutorial

www.learnapollo.com/

GraphQL tutorial JavaScript

Apolloを使ったGraphQLクライアントのチュートリアル


Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc... ::ハブろぐ

havelog.ayumusato.com/develop/performance/e744-performance_metrics.html

browser performance

ウェブクライアントサイドにおけるパフォーマンスの指標となる値やPerformance Budgetなどの用語についての解説


Redux isn't slow, you're just doing it wrong - An optimization guide | React Rocket

reactrocket.com/post/react-redux-optimization/

redux performance

Reduxを使ったアプリケーションのパフォーマンス・チューニングについての記事。connectオプションの利用、コンポートに必要最小限のデータを渡す、Reselectなどを使ってデータをフラットにすることについてなど


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


vadimdemedes/ink: 🌈 React for CLIs

github.com/vadimdemedes/ink

React console library

コンソール向けのReactライクなライブラリ。
コンソールの表示をコンポーネントで描画できるようにするライブラリ


azu/immutable-array-prototype: A collection of Immutable Array prototype methods(Per method packages).

github.com/azu/immutable-array-prototype

JavaScript library npm

Array#pushなどの破壊的なメソッドの非破壊的なバージョンを集めたライブラリ。
メソッド毎に個別のパッケージとしてインストールすることもできる。


indutny/webpack-common-shake: CommonJS Tree Shaker plugin for WebPack

github.com/indutny/webpack-common-shake

webpack node.js JavaScript

CommonJSのモジュールに対するTree Shakingを行うwebpackプラグイン


Atomic Lab - component guide generator based on partial templates

steelydylan.github.io/atomic-lab/

HTML CSS debug Tools

Custom ElementなどのHTMLフラグメントを実際に描画して確認できる開発環境ツール


glayzzle/php-parser: NodeJS PHP Parser - extract AST or tokens (PHP5 and PHP7)

github.com/glayzzle/php-parser

AST JavaScript php library Tools

JavaScriptで書かれたPHP 5/7のパーサ。


Kornel / babel-preset-php · GitLab

gitlab.com/kornelski/babel-preset-php

babel php library

PHPの構文で書かれたコードをJavaScriptの構文に変換するBabel presets


書籍関係


Practical Node.js: Building Real-World Scalable Web Apps: Azat Mardan: 9781484230381: Amazon.com: Books

www.amazon.com/dp/1484230388

node.js book

2018年3月22日発売。
Practical Node.jsの第二版


この記事へ修正リクエストをする
記事を紹介する