middleman install

最近專案需要用到 middleman 因此紀錄一下一些基礎的語法與使用情境。

middleman 是一個基於 ruby 的整合性 web 前端開發工具。

從開發工具到打包都幫你整合好,只需要安裝完成 middleman 就可以開始開發你的系統。

Read More

閱讀演講筆記 - QCon 全球軟體開發大會 - React 生態圈 by 郭达峰

完整的說明 React 生態圈與要解決的事情,有提到 GraphQL 講得非常生動,聽完覺得這個解決方案還不錯,後端工程師應該表示欣慰。


覺得前端世界非常快速的產生許多解決方法與技術,如:BackBone.js -> angular.js

Node.js & io.js => 合併 O_o”

前端技術正在面臨著前所未有的工程化挑戰

React 生態圈

  • 目標平台
  • 數據處理
  • 語言

目標平台

  • Server side Rendering
  • Client-Side Rendering
    • 用戶體驗比較好,只需用 ajax 替換跳不同的頁面
    • 首次打開速度
      • 需下載完 JavaScript
      • call api
    • SEO
      • 爬蟲不認得未渲染前的頁面內容

Twitter 2011 年曾經回到 Server side Rendering 的技術

我們想要的是什麼?

寫一次 UI 元件,前/後端都可以使用。

有沒有辦法後端可以先渲染出基礎的 HTML 到了用戶前端再加上 JavaScript 動態效果與操作,這讓不就可以完美解決第一次下載速度較慢,與 SEO 的問題。

其實 React Virtual DOM 就可以讓我們完成這件事情,因為在後端與前端都繪出同一個元件,既 同構 (isomorphic)

多目標平台

因為 Virtual DOM 因此可以實現。

  • 目標平台不再侷限在瀏覽器
  • React Native
    • faceBook Ads Manage
    • 85% 程式碼重複使用
  • React TUI 實現,並且可以用 CHROME 去 debug
  • 解決 SEO
  • 解決首次開啟 app 速度較慢問題

用你最熟悉的前端開發流程,和 JavaScript 語法去開發不同平台的應用程式。

數據處理

  • Flux
  • GraphQL / Relay

GraphQL 是什麼?

GraphQL 是 RESTful 之外的另一種 API 設計模式,在某些情況下,是更好的選擇。

RESTful API 的問題?

如果我要顯示一個畫面包含: 使用者資訊, 購物車內容。

我必須要去 call 兩隻 API 等到請求回應後我才能把畫面顯示上去。

Custom endpoint

你可以使用 Custom endpoint 把兩筆資料合併來解決呀!?

可是瑞凡.. 你有很多 API 你也要通通合併嗎?你如何管理這些 API 呢?

Over fetching

不同設備需要的資料 粒度 不同,如:

  • iPhone
    • 使用者名稱 + 購物車前三筆資料
  • PC
    • 使用者詳細資訊 + 購物車資料(根據螢幕大小)
  • 還記得要向下支援舊版本嗎?(資料格式不同)
  • 每次需求改變,後端都要先修改,前端才有資料可以接(功能什麼時候會好?問後端啊!(攤))

後端表示難過 Q_Q”

The REST interface is designed to be efficient for large-grain hypermedia data transfer..

  • Dr Roy T Fielding, Author of REST
    REST 作者說:REST 更適合應用在大粒度數據場景。

現在我們的場景是什麼?我們有不同的前端設備,有不同的版本,對於 API 的資料內容有不同的要求?要怎麼解決這個問題!?