Fork me on GitHub

2017-03-07のJS: Marko 4.0、CoffeeScript+ReactからJavaScriptへ

Edit on GitHub 編集履歴を見る

JSer.info #321 - UIコンポーネントライブラリのMarko 4.0がリリースされました。

MarkoはeBayで開発され使われているUIコンポーネントライブラリです。

Marko 4.0ではクライアントレンダリングとサーバサイドレンダリング(HTML文字列を出力)で異なる手法を使うことで、
サーバサイドレンダリングを高速化しています。


Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6という記事では、CoffeeScript + React(cjsx)からJavaScript + Reactの環境へ移行した手法について書かれています。

CoffeeScriptをJavaScriptへ変換するdecaffeinateはcjsx(CoffeeScriptにJSXを書けるもの)をサポートしていません。

そのため、一度coffee-react-transformReact.createElementベースのJSに変換し、react-codemodでJSXに再変換しています。
また、変換したコードベースをprettiereslintを使い自動整形し、読みやすくするまでの流れが書かれています。

それらをまとめたDepercolatorというツールを作り公開されていて、今のJavaScriptは機械変換でかなりのタスクができている部分が面白いかもしれません。


ヘッドライン


Release v3.5.0 · petkaantonov/bluebird

github.com/petkaantonov/bluebird/releases/tag/v3.5.0

JavaScript Promises library ReleaseNote


Bluebird v3.5.0リリース。
catch時に処理を行いエラー自体はそのまま次のcatchへ渡す.tapCatchの追加など


Marko 4.0 is here 🚀 🎉 – Medium

medium.com/@mlrawlings/marko-4-0-is-here-837884c5f60d

JavaScript template library ReleaseNote VirtualDOM


Marko 4.0リリース。
コンポーネントベースのUIライブラリ(テンプレート)で、クライアントとサーバのそれぞれのモードを持っているため、サーバサイドレンダリングが高速。


Node.js - Quality with Speed | Node.js

nodejs.org/en/blog/community/quality-with-speed/

node.js opinion


Node.jsの開発プロセスやリリースサイクル、またそれらを支えるテスト基盤について。


ESLint v3.17.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2017/03/eslint-v3.17.0-released

ESLint ReleaseNote


ESLint 3.17.0リリース。
ルール開発者向けの機能追加、no-compare-neg-zerononblock-statement-body-positionのルールを追加など


Release v0.22.0 · yarnpkg/yarn

github.com/yarnpkg/yarn/releases/tag/v0.22.0

npm node.js Tools ReleaseNote


yarn 0.22.0 プレリリース。
--non-interactiveのオプションを追加、v8-compile-cacheを利用し起動速度を改善、Docker image(yarnpkg/node-yarn)の追加など


zertosh/v8-compile-cache: Require hook for automatic V8 compile cache persistence

github.com/zertosh/v8-compile-cache

V8 node.js library


Node v5.7.0から導入されたV8のcode cacheを保持するrequire hookを提供するライブラリ。
yarnやnuclideなどの起動速度改善に使われてる


アーティクル


ゼロから始めるJavaScript入門 : DESIGNMAP

designmap.info/category/lecture/javascript-introduction/

ECMAScript tutorial JavaScript


ES2015ベースにしたJavaScript入門チュートリアル


A Step-By-Step Guide for Building Master-Detail User Interfaces with AngularTelerik Developer Network

developer.telerik.com/content-types/tutorials/step-step-guide-building-master-detail-user-interfaces-angular/

AngularJS JavaScript tutorial


Angularでよくあるリストビューと詳細ビューからなるアプリを作るチュートリアル


PWA(Progressive Web Apps)の現状とその開発方法 | フロントエンドBlog | ミツエーリンクス

www.mitsue.co.jp/knowledge/blog/frontend/201702/23_2217.html

ProgressiveWebApp article


PWAの概要についてまとめられた記事。
Googleによるケーススタディや開発方法について


JavaScript void Keyword

cmichel.io/javascript-void-keyword/

JavaScript article


JavaScriptのvoidキーワードについて。
if(condition) { return void console.log(""); }のようなケースで利用できるという話。


Bugsnag Blog - Converting a large React Codebase from Coffeescript to ES6

blog.bugsnag.com/converting-a-large-react-codebase-from-coffeescript-to-es6/

CoffeeScript JavaScript React article


coffee-react(cjsx)からJavaScriptへのマイグレーションについての記事。
decaffeinateはcjsxをサポートしていないため、React.createElementベースのJSに変換し、react codemod toolでJSXに再変換する。
変換したコードベースをprettierで整形し、eslintで細かいところを直す。
それらをまとめたDepercolatorというツールを作った話


V8: Behind the Scenes (February Edition feat. A tale of TurboFan) | Benedikt Meurer

benediktmeurer.de/2017/03/01/v8-behind-the-scenes-february-edition/

V8 JavaScript article


ChromeのTurboFanプロジェクトの歴史について。
2013年から開始したプロジェクトで、Crankshaftはfast pathにフォーカスしていたが、TurboFanはslow pathにもフォーカスしているという話。
V8において予測できないパフォーマンス問題を作っていたFunction#bindやPromiseの話。
TurboFanのアーキテクチャについての解説など


nodebox/opentype.js: Read and write OpenType fonts using JavaScript.

github.com/nodebox/opentype.js

JavaScript fonts library


OpenTypeフォントの読み書きを行うライブラリ


How to Optimize CPU-Intensive Work in Node.js – Medium

medium.com/@graeme_boy/how-to-optimize-cpu-intensive-work-in-node-js-cdc09099ed41

node.js tutorial article


Node.jsでCPUバウンドなプログラムを別プロセスで処理する方法について。
child_processの扱い方について書かれた記事


A Link: rel=preload Analysis From the Chrome Data Saver Team – reloading – Medium

medium.com/reloading/a-link-rel-preload-analysis-from-the-chrome-data-saver-team-5edf54b08715

browser Chrome HTTP2 article


(Chromeの)rel=preloadがどのように動いているのかの解説記事。
クリティカルリソースを宣言的に先読みするもので、優先度については仕様では未定義。
Chromeにおけるpreloadの優先度やpreloadとasync属性の違いなどについて


A Detailed Introduction To Webpack – Smashing Magazine

www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

webpack tutorial


webpackについてのチュートリアル。
loader、動的ロード、コード分割について


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


snyk/vulndb: Snyk's public vulnerability database

github.com/snyk/vulndb

security npm webservice


Snykによるnpmやrubygemの脆弱性についてを集めたデータベース。


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


Artillery - a modern load testing toolkit

artillery.io/

testing performance HTTP


HTTPやWebSocketのロードテストを行うことができるツール。
シナリオを元にしたテストもできる。


typicode/pkg-ok: Prevents publishing a module with bad paths

github.com/typicode/pkg-ok

npm Tools console


npmで公開するパッケージのmainbinが正しいかをチェックするツール。


Kegsay/flow-jsdoc: Use JSDoc to represent Flow annotations

github.com/Kegsay/flow-jsdoc

JSDoc flowtype Tools


JSDocの型をFlowTypeの型アノテーションへ変換するツール


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