Fork me on GitHub

2017-12-19のJS: JavaScript開発者アンケート2017、Reactのインフラ、CQRS/EventSourcing

Edit on GitHub 編集履歴を見る

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 Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Node v9.3.0 (Current) | Node.js

nodejs.org/en/blog/release/v9.3.0/

node.js ReleaseNote

Node.js 9.3.0リリース
--trace-event-categoriesnode.async_hooksを追加、module.builtinModulesでビルトインモジュールの一覧を取得できるようになるなど


moment/CHANGELOG.md at 2.20.0 · moment/moment

github.com/moment/moment/blob/2.20.0/CHANGELOG.md

JavaScript library ReleaseNote

moment 2.20.0リリース。
HTML5 inputに対応するフォーマットの追加、UTCへの変換しないオプションがtoISOStringに追加された


Introducing Docusaurus · Docusaurus

docusaurus.io/blog/2017/12/14/introducing-docusaurus.html

document ReleaseNote Tools

OSSのドキュメントサイト生成ツールであるdocusaurusが正式公開された。
docusaurusが作られた理由や使い方について


Release "Fast" By Default · TypeStrong/ts-node

github.com/TypeStrong/ts-node/releases/tag/v4.0.0

TypeScript ReleaseNote node.js

ts-node 4.0.0リリース。
--fastがデフォルトとなった。
--type-checkを使うことで型チェックを合わせて行うように変更。
transformersオプションのサポートなど


アーティクル


Enter AudioWorklet  |  Web  |  Google Developers

developers.google.com/web/updates/2017/12/audio-worklet

audio webworker JavaScript

Chrome 64でフラグ付きの実装が入るAudioWorkletについての解説


The State of JavaScript 2017: Introduction

stateofjs.com/2017/introduction/

JavaScript アンケート まとめ

JavaScriptの開発者アンケートの結果が公開された。
JavaScriptのフロントエンドからバックエンドまで幅広くツールや言語、ライブラリ、CSSなどについて扱っている


モバイル開発に役立つJSデバッグ術 - Mercari Engineering Blog

tech.mercari.com/entry/2017/12/13/103000

Chrome debug article

Chrome開発者ツールの機能紹介をしている記事。
Responsive表示、ネットワークスロットリング、CPUスロットリング、全ファイル検索など


The Current State of Implementation and Planning for ESModules

medium.com/the-node-js-collection/the-current-state-of-implementation-and-planning-for-esmodules-a4ecb2aac07a

node.js module article

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

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

www.stefanjudis.com/today-i-learned/the-global-reflect-object-its-use-cases-and-things-to-watch-out-for/

JavaScript article

Reflectの使い方について。
Proxyと合わせて使うものでオブジェクトの変更のloggingを例解説している。


How to debug front-end: Elements – Pragmatists

blog.pragmatists.com/how-to-debug-front-end-elements-d97da4cbc3ea

Chrome debug

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 performance Tools browser Extension

Reactコンポーネントのパフォーマンス計測ツール。
Reactのperformance.measureの結果を使い、react-addons-perfのような計測結果を表示できるブラウザ拡張とツール


Polymer 2 and Googlebot – Dev Channel – Medium

medium.com/dev-channel/polymer-2-and-googlebot-2ad50c5727dd

google SEO Chrome JavaScript WebComponents

PolymerとGoogle Botへの対応について。
Google BotはChrome 41相当であるため、TranspilerやPolyfill、確認方法などについて


calirojas506/vue-inspector: Vue.js Inspector for Mobile Devices

github.com/calirojas506/vue-inspector

Vue debug mobile library

VueのInspectorライブラリ。
モバイルデバイス上でVueコンポーネントのデバッグをする目的のツール


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


nik-garmash/hyntax: Straightforward HTML parser

github.com/nik-garmash/hyntax

HTML library

HTMLパーサライブラリ


developit/microbundle: 📦 Zero-configuration bundler for tiny modules.

github.com/developit/microbundle

JavaScript Tools

設定ファイルなしでbundleする目的のRollupのラッパーツール。


xtuc/js-webassembly-interpreter: WebAssembly interpreter

github.com/xtuc/js-webassembly-interpreter

WebAssembly JavaScript Tools

WebAssemblyインタープリタ


Popmotion - A functional JavaScript motion library

popmotion.io/

JavaScript animation library

関数でモーションを扱うアニメーションライブラリ


ballercat/walt: Walt is a JavaScript-like syntax for WebAssembly text format WIP

github.com/ballercat/walt

WebAssembly flowtype Tools

JavaScript/Flowのサブセットのように書けて、WebAssemblyにコンパイルできる言語とツール


franciscop/state: State management tool using Proxy()

github.com/franciscop/state

JavaScript library

Proxyを使ったステート管理ライブラリ。


sveltejs/sapper: Combat-ready apps, engineered by Svelte

github.com/sveltejs/sapper

JavaScript library

SvelteをつかったNext.jsのようなフレームワーク


書籍関係


Manning | Electron in Action

www.manning.com/books/electron-in-action

Electron book

2018年5月1日発売
Electronについての書籍


Patterns for designing flexible architecture in node.js (CQRS/ES/Onion)

medium.com/@domagojk/patterns-for-designing-flexible-architecture-in-node-js-cqrs-es-onion-7eb10bbefe17

node.js TypeScript CQRS EventSourcing DDD JavaScript

TypeScriptを使ってCQRS+EventSourcingのパターンでNode.jsアプリを実装する記事。
サンプルプロジェクトと共にコマンドからイベントを作りそれをRepositoryに保存する流れを紹介してる。


この記事へ修正リクエストをする
JSer.info Slackに参加する