React

今天突然看到 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';