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

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

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

Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue

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

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

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

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

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

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

ヘッドライン

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ライブラリ(テンプレート)で、クライアントとサーバのそれぞれのモードを持っているため、サーバサイドレンダリングが高速。

Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue

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-zeroとnonblock-statement-body-positionのルールを追加など

ESLint v3.17.0 - Qiita

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

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のアーキテクチャについての解説など