Fork me on GitHub

2016-10-03のJS: Vue.js 2.0、Babel 6.17.0、複雑なJavaScript

Edit on GitHub 編集履歴を見る

JSer.info #299 Vue.js 2.0がリリースされました。

2.0ではsnabbdomをforkしたVirtual DOMを導入しているため、要素の更新やライフサイクル周りが変更されています。
(一方、snabbdom自体はcycle.jsの人達がcollaboratorになりました)

また、1.xからのマイグレーションヘルパーとガイドが公開されています。


Babel 6.17.0がリリースされました。

optimize-js関連の変更やECMAScript ProposalのStage変更を各presetに反映しています。

9月に行われたTC39 MTGによるStageの変更は次のページでまとめてあります。


複雑なJavaScriptアプリケーションを考えながら作る話というスライドでは、数万行以上になる規模のJavaScriptアプリケーションにおける設計について書かれています。

FluxとCQRSについてや、1つのものが2つの役割をもつことから生まれる複雑さの掛け算を回避するアーキテクチャなどについて書かれています。

そこから生まれた実装であるAlminを使った開発内容などのドキュメントは次のリポジトリにまとめられています。


ヘッドライン


Node v6.7.0 (Current) | Node.js

nodejs.org/en/blog/release/v6.7.0/

node.js ReleaseNote

Node v6.7.0リリース。
セキュリティアップデートが含まれる更新


Vue 2.0 is Here! – The Vue Point – Medium

medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8

JavaScript library ReleaseNote

Vue.js 2.0リリース。
1.xからのマイグレーションヘルパーも公開されている。


6.16.0 Released · Babel

babeljs.io/blog/2016/09/28/6.16.0

babel ReleaseNote

Babel 6.16.0リリース。
babel-coreがparserOptsgeneratorOptsをサポートするなど


Release v6.17.0 · babel/babel

github.com/babel/babel/releases/tag/v6.17.0

babel ReleaseNote

Babel v6.17.0リリース。
ProposalのStage変更を反映、async generatorとobject rest-spreadをstage3へ、optimize-js関連の変更など


ESLint v3.7.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2016/09/eslint-v3.7.0-released

ESLint ReleaseNote

ESLint v3.7.0リリース。
--fix対応のルールの追加など


RE:DOM is now 1.0! – RE:DOM – Medium

medium.com/re-dom/re-dom-is-now-1-0-58ec0328a59d

JavaScript DOM ReleaseNote

RE:DOM 1.0リリース
合わせてRE:DOM向けのfake domであるNO:DOMも公開されてる


Release v0.33.0 · facebook/flow

github.com/facebook/flow/releases/tag/v0.33.0

flowtype ReleaseNote

FlowType 0.33.0リリース。


Release Notes for Safari Technology Preview Release 14 | WebKit

webkit.org/blog/6969/release-notes-for-safari-technology-preview-release-14/

safari ReleaseNote

Safari Technology Preview Release 14リリース。
URLSearchParamsの実装、safaridriverも含むようになるなど


アーティクル


Node.js debugging with Chrome DevTools (in parallel with browser JavaScript)

blog.hospodarets.com/nodejs-debugging-in-chrome-devtools

Chrome debug node.js

Node.jsをChromeの開発者ツールでデバッグする方法について。
設定を有効にする手順


Master the DOM – Medium

medium.com/@pakastin/master-the-dom-bc1a2a06089b

DOM tutorial

DOM APIでのDOM Treeの基本的な操作を見ていく話。


Common CSS Mistakes (And How To Fix Them)

blog.mariano.io/common-css-mistakes-and-how-to-fix-them-8ee0f5e88d64

CSS

CSSのよくある間違いと修正方法


requestAnimationFrame とタイマーの今更な比較とデモ ::ハブろぐ

havelog.ayumusato.com/develop/javascript/e725-timer_vs_raf.html

JavaScript browser

requestAnimationFramesetTimeoutの比較。
setTimeoutは細かい処理でも影響を受けやすいという話


hemanth/es-next: stage-0 to stage-4 ECMAscript proposals.

github.com/hemanth/es-next

ECMAScript proposal

ECMAScript proposalsのStage別まとめ。
それぞれに小さなサンプルコードが書かれている。


Loading Polyfills Only When Needed — Philip Walton

philipwalton.com/articles/loading-polyfills-only-when-needed/

JavaScript library

polyfillをサポートしてない環境だけで動的に読み込みたいという話


スライド、動画関係


複雑なJavaScriptアプリケーションを考えながら作る話

azu.github.io/slide/2016/react-meetup/large-scale-javascript.html

JavaScript スライド CQRS DDD

JavaScriptで複雑なアプリケーションを作る場合にどのように考えるかというスライド。
ドメインモデルをどのように考えて作っていくかについて。 Babel、React、Almin、PostCSSがベース。


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


CodePen - React ES6 lifecycles

codepen.io/netsi1964/full/NRgyZX/

React document

Reactのライフサイクルのまとめ。
実際に動くコードがドキュメントになっていて、動作をさせながらライフサイクルメソッドの実行順について見ることができる


Web Platform Feature Availability

paulirish.github.io/web-feature-availability/

webservice browser

CanIUseとStatCounterを使いある機能がどれぐらいのプラットフォームで利用できるかを一覧できるサイト


React Status: A Free, Weekly Email Newsletter

react.statuscode.com/

React news mail

Reactについてを扱うWeeklyメールマガジン


Fix and prevent known vulnerabilities in Node.js apps | Snyk

snyk.io/

node.js security webservice

Node.js appの既知の脆弱性などを通知、修正などを行うサービス。
CIで自動的にチェックできる


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


mkwtys/bundle-size: Show bundle file size of npm packages

github.com/mkwtys/bundle-size

JavaScript Tools

指定したパッケージのファイルサイズを出力できるCLI。
Environmentを指定できるのでdevelopmentとproductionのファイルサイズをminify、gzip済みで比較できる


krasimir/navigo: A simple vanilla JavaScript router with a fallback for older browsers

github.com/krasimir/navigo

JavaScript library

シンプルなルーターライブラリ。
マッピングに正規表現も利用できる


書籍関係


TypeScript Design Patterns - O'Reilly Media

shop.oreilly.com/product/9781785280832.do

TypeScript デザインパターン book

TypeScriptでのデザインパターン本


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