JSer.info #362 - The State of JavaScript 2017: IntroductionにてJavaScriptを使う開発者向けアンケートの結果が公開されています。
JavaScriptのフロントエンドからバックエンド、ツール、言語、ライブラリ、CSSなど幅広く扱った内容になっています。
またそれらの結果と給料や経験年数などを組み合わせた結果を見れます。
たとえば、#StateOfJS 2017 Results: Front-end Frameworksではフロントエンドのフレームワークとして何を使っているかという質問の結果が掲載されています。
結果としてはReact、何も使ってない、Angularとなっていて、それらのフレームワークをまた使いたいかどうかや組み合わせて使っているのかなどの投票結果が書かれています。
去年の結果もhttp://2016.stateofjs.com/で見れるため、比べて見ると面白いかもしれません。
Behind the Scenes: Improving the Repository Infrastructure - React Blogという記事では
facebook/reactリポジトリの開発インフラ整備について書かれています。
かなり幅広く(ライブラリにおける)プロジェクト管理や改善方法について書かれています。
Prettierでのコード整形、monorepoとyarn workspace、モジュール構造といった開発環境の整備。
rollupでのflat bundle、Closure Compilerでの圧縮、加えてそれらのproductionビルドに対するテストについて。
また、Public APIに対するテストの重要性やnpm pack
でのpublish状況再現してのテストなど。
Internalにおけるビルドシステムの改善やそれらのモジュールをリリースする仕組みの整備など、大きくなったライブラリ/フレームワークにおけるインフラを細かく紹介しています。
Patterns for designing flexible architecture in node.js (CQRS/ES/Onion)という記事では、TypeScriptを使ってCQRS/EventSourcing(ES)パターンでNode.jsアプリを実装する話が書かれています。
記事中に出てくるサンプルアプリはdomagojk/beenion: Online adaptation of a scientific journal publishing and peer reviewingで公開されています。
かなりしっかりとCQRS/ESパターンについて書かれているのでFluxやRedux(redux-saga)に興味がある人は読んでみると面白いかもしれません。
- Write side(Command side)
- Command
- Command handler
- domain model
- Repository
- Event
- Read side(Query side)
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v9.3.0 (Current) | Node.js
nodejs.org/en/blog/release/v9.3.0/
Node.js 9.3.0リリース
--trace-event-categories
にnode.async_hooks
を追加、module.builtinModules
でビルトインモジュールの一覧を取得できるようになるなど
moment/CHANGELOG.md at 2.20.0 · moment/moment
github.com/moment/moment/blob/2.20.0/CHANGELOG.md
moment 2.20.0リリース。
HTML5 inputに対応するフォーマットの追加、UTC
への変換しないオプションがtoISOString
に追加された
Introducing Docusaurus · Docusaurus
docusaurus.io/blog/2017/12/14/introducing-docusaurus.html
OSSのドキュメントサイト生成ツールであるdocusaurusが正式公開された。
docusaurusが作られた理由や使い方について
Release "Fast" By Default · TypeStrong/ts-node
github.com/TypeStrong/ts-node/releases/tag/v4.0.0
ts-node 4.0.0リリース。
--fast
がデフォルトとなった。
--type-check
を使うことで型チェックを合わせて行うように変更。
transformers
オプションのサポートなど
アーティクル
Enter AudioWorklet | Web | Google Developers
developers.google.com/web/updates/2017/12/audio-worklet
Chrome 64でフラグ付きの実装が入るAudioWorkletについての解説
The State of JavaScript 2017: Introduction
stateofjs.com/2017/introduction/
JavaScriptの開発者アンケートの結果が公開された。
JavaScriptのフロントエンドからバックエンドまで幅広くツールや言語、ライブラリ、CSSなどについて扱っている
モバイル開発に役立つJSデバッグ術 - Mercari Engineering Blog
tech.mercari.com/entry/2017/12/13/103000
Chrome開発者ツールの機能紹介をしている記事。
Responsive表示、ネットワークスロットリング、CPUスロットリング、全ファイル検索など
The Current State of Implementation and Planning for ESModules
Node.jsのES Modulesの実装状況や優先度についての説明。
CommonJSとの相互運用性、mjsのサポート、hook apiのサポート、コアモジュールの対応、import.meta
についてなど
Behind the Scenes: Improving the Repository Infrastructure - React Blog
reactjs.org/blog/2017/12/15/improving-the-repository-infrastructure.html
Reactのリポジトリのインフラ改善について。
Prettierでのコード整形、monorepoとyarn workspace、モジュール構造、rollupでのflat bundle、Closure Compilerでの圧縮。
productionビルドに対するテスト、Public APIに対するテスト、npm pack
でのpublish状況再現。
カスタムビルドの対応、リリースフロー整備など
The global `Reflect` object, its use cases and things to watch out for
Reflect
の使い方について。
Proxy
と合わせて使うものでオブジェクトの変更のloggingを例解説している。
How to debug front-end: Elements – Pragmatists
blog.pragmatists.com/how-to-debug-front-end-elements-d97da4cbc3ea
Chromeの開発者ツールの使い方について。
デバッガー、Element inspector、Source、スタイルなどについて
サイト、サービス、ドキュメント
nitin42/react-perf-devtool: A Chrome developer tool extension to inspect performance of React components.
github.com/nitin42/react-perf-devtool
Reactコンポーネントのパフォーマンス計測ツール。
Reactのperformance.measure
の結果を使い、react-addons-perf
のような計測結果を表示できるブラウザ拡張とツール
Polymer 2 and Googlebot – Dev Channel – Medium
medium.com/dev-channel/polymer-2-and-googlebot-2ad50c5727dd
PolymerとGoogle Botへの対応について。
Google BotはChrome 41相当であるため、TranspilerやPolyfill、確認方法などについて
calirojas506/vue-inspector: Vue.js Inspector for Mobile Devices
github.com/calirojas506/vue-inspector
VueのInspectorライブラリ。
モバイルデバイス上でVueコンポーネントのデバッグをする目的のツール
ソフトウェア、ツール、ライブラリ関係
nik-garmash/hyntax: Straightforward HTML parser
HTMLパーサライブラリ
developit/microbundle: 📦 Zero-configuration bundler for tiny modules.
github.com/developit/microbundle
設定ファイルなしでbundleする目的のRollupのラッパーツール。
xtuc/js-webassembly-interpreter: WebAssembly interpreter
github.com/xtuc/js-webassembly-interpreter
WebAssemblyインタープリタ
Popmotion - A functional JavaScript motion library
関数でモーションを扱うアニメーションライブラリ
ballercat/walt: Walt is a JavaScript-like syntax for WebAssembly text format WIP
JavaScript/Flowのサブセットのように書けて、WebAssemblyにコンパイルできる言語とツール
franciscop/state: State management tool using Proxy()
Proxy
を使ったステート管理ライブラリ。
sveltejs/sapper: Combat-ready apps, engineered by Svelte
SvelteをつかったNext.jsのようなフレームワーク
書籍関係
Manning | Electron in Action
www.manning.com/books/electron-in-action
2018年5月1日発売
Electronについての書籍
Patterns for designing flexible architecture in node.js (CQRS/ES/Onion)
TypeScriptを使ってCQRS+EventSourcingのパターンでNode.jsアプリを実装する記事。
サンプルプロジェクトと共にコマンドからイベントを作りそれをRepositoryに保存する流れを紹介してる。