Javascript

新一代戰神 Yarn 終於在昨天出爐了，Yarn 跟 Npm 一樣都是 JavaScript 套件版本管理工具，但是 Npm 令人詬病的是安裝都是非常的慢，快取機制用起來效果也不是很好，所以 Yarn 的出現解決了這些問題，透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/)，也就是只要安裝過一次，下次砍掉 node_modules 目錄重新安裝都會從 Cache 讀取。Yarn 詳細的功能架構可以參考 Facebook 發表的 Yarn: A new package manager for JavaScript，本篇不會教大家怎麼使用 Yarn，因為指令實在是太容易了，可以參考官方提供的如何從 npm 轉換到 yarn，底下則是來測試比較兩者安裝套件的速度。

不久之前寫過一篇 提升 npm install 安裝速度，但是發現速度還是沒有變快，在 DevOps 的流程花在 npm install 的時間非常冗長，造成每次測試或 Deploy 都要花大量時間等待，且吃掉很多機器的資源，本篇要提供一個小技巧改善 npm install 安裝時間，其實簡單來說就是 cache 第一次安裝好的 node_modules 目錄，之後每次安裝就拿 cache 目錄來新增或減少 packages 即可。

又看到一間網路平台公司從 Node.js 跳到 Golang 了。ScaleDrone 是一間提供了 websocket 服務的公司，讓 web 可以透過 ScaleDrone 即時將訊息傳播到各種瀏覽器，但是今天看到 ScaleDrone 即將把後端平台使用的語言從 Node.js 轉換到 Golang，為什麼要轉語言呢，官方提到大量的 Websocket 連線，讓伺服器記憶體快吃不消了，然而 ScaleDrone 用 Go 語言來實際測試，發現記憶體不但沒有增加，反而還降低了 response 及 connections 時間。底下是針對 Node.js vs Go 語言轉換比較。

在 Toptal Blog 看到 JavaScript Cheat Sheet: ES6 And Beyond 及另外一篇 A Practical CSS Cheat Sheet by Toptal Developers，這兩篇提供了一些 JavaScript ES6 及 CSS 的基礎寫法及教學，蠻適合前端工程師將 PDF 印出來貼在座位前面，cheat sheet 內提供的語法幾乎都是天天在用，像是在 ES2015 內 let vs var 語法差別，什麼時候要用 const 或 let，或 Template String，預設參數 .. 等功能，其實非常不賴。CSS 則是介紹基本的 Box Model、Selectors、Pseudo-selectors .. 等。

專案開始前，要決定好前端或後端各用什麼語言及制定符合團隊的 Coding Style，統一團隊 Style 是非常重要的，尤其是專案需要經過 Code Review 步驟，不要造成 Reviewer 困擾。底下寫了一份投影片介紹 PHP & JavaScript 及 CSS 的基本 Coding Style 及該如何透過工具來改善 Coding Style。

npm 是 Node.js 套件管理模組，相信大家對 npm 不會很陌生，如果對於 npm 不了解的，可以參考阮一峰寫的這篇文章，今天要來探討的是如何提升 npm install 的安裝速度，如果你正在嘗試 npm@3 版本，我建議可以先換到 npm@2 的版本會比較快（為什麼呢？底下有數據會說話）。Github issue 上也蠻多速度上的討論，然而前幾天有網友發表一篇關掉 progress 提升不少速度，實際上我們可以拿專案來測試 npm@2 及 npm@3 的速度看看。

今天突然看到 TJ 開了一個新 Repo 是 frontend boilerplate 嚇到我了，自從 TJ 去年發表要轉向 Go 之後，就把他自己很多的 Node.js Project 轉給其他人維護，也漸漸沒在 Github 上面活動，但是今天又看到她整理了一份 frontend boilerplate，內容含了現代流行的前端開發工具，大家可以參考看看，是個不錯的 Template:

• Webpack
• React
• Redux
• Babel
• Autoprefixer
• PostCSS
• CSS modules
• Rucksack
• Hot reloading
• Redux router
• Redux effects
• TodoMVC example

期待 TJ 能有其他新作品啊。

在這幾年的趨勢看來，JavaScript 已經環繞在各領域了，不管在 Web 前端或後端，上層或下層，都充滿了 JavaScript，其實都是托 Node.js 的福，網路上看到這篇 JavaScript in 2015，裡面講到 JavaScript 所有的工具，不管前端到後端，每一年都有新的工具跟新的 Framework，從以前寫 Backbone 到 Angular.js 到現在 React.js 改變了整個 JavaScript View 的生態，工具流程整合從 Grunt.js 到 Gulp.js 的出現，整個生態又轉換了，大家陸續將工具全都轉到 Gulp，最後又出來一套 Webpack，Webpack 出現基本上不會影響 gulp 發展，因為 Webpack 還是有很多限制，在前端或後端在上 Production 前的一些流程像是 copy 檔案等，這些是 webpack 無法整合的，看到這些工具一一出現，也不知道明年或現在會不會又跑出一套新的玩具，讓整個 JavaScript 生態整個改變。寫上層的同時，看到同事在寫底層，同事就會跑過來拍拍我肩膀說：『好險我是搞 Kernel，搞上層就要跟你們一樣天天追新技術，永遠沒有停止的一天』。看一下全世界 Job Trends

Laravel Auto Presenter 是一套用在 view 裡的 decorates objects，搭配資料庫時，如果有需要組合或整合欄位來顯示相關資訊，這套就非常適合使用在 Laravel View 裡，如果不是透過 Laravel Auto Presenter，開發者也可以利用 Laravel Accessors & Mutators 來實現這方法，只是這要寫在 Model 層，寫法如下，此做法寫起來蠻亂的，而且也並不是每個地方都需要擴充這些欄位。

/**
 * The accessors to append to the model's array form.
 *
 * @var array
 */
protected $appends = [
    'is_twitter',
];
/**

Get the user’s is_twitter flag.

@param  string  $value
@return string
*/
public function getIsTwitterAttribute()
{
return (bool) ($this->attributes[‘options’] & self::$OPTIONS[‘is_twitter’]);
}

寫 Facebook React 就是要搭配 Webpack，Webpack 已經是前端開發的必備工具，要測試 React Component 就是要用 Facebook 開發的 Jest 框架，使用 Webpack 也許會搭配 Less or Sass Loader 讓每個 component 都可以獨立有 CSS 檔案。要在 JS 內直接引入 CSS 檔案寫法如下

import '!style!css!less!./Schedule.less';
import React, { Component } from 'react';