網站重構那些事兒

向Litten致謝!

濯去舊見，以來新意

距寫上一篇博客足足有兩個月了，實在是沒有臉繼續拖下去，畢竟立刻就是要入職實習的人，仍是要開始找回文字的感受，而不是成天守望着防護塔和水晶了(話說你見過敵方的水晶嗎?)

說正經的，當我準備開始撰寫時看到個人personalWeb1.0 ，我仍是願意去開黑的，1.0真是太挫了，這裏附幾張美照。

excuse me?
是否是有一種某校教務系統的感受，嗯，的確是不很清真的，因此personalWeb2.0的重構很快的定在了日程上。

不退則進

在作1.0時我考慮了不少的兼容性，然而IE6，7，8漸行漸遠，FE們也算是熬出來了，可是個人1.0還在水深火熱之中，sh_t!

重構網站是須要你用心並高效去完成的，因此不管是五黃的第七次總決賽之旅仍是德瑪西亞的號召，都不能成爲絆腳石。

言歸正傳，personalWeb1.0的技術棧是原生js+Jquery+express+mongodb，而且部署於阿里雲上。看得出來，這套技術棧適合小型應用，總體邏輯架構的設計比較簡易，不管是做爲Coder仍是做爲User，都能感覺到1.0簡單，可是過於簡陋的設計致使Coder本身也無力再去維護與開發新功能.....

So 2.0的首要任務是加強用戶體驗，核心思想是New!

React-* or Angular

不少人拿React與Angular比較，這是不對的。輕量級庫React只負責view，而重量級框架Angular卻能MVC一鍋端。那爲啥我最後選用了React？緣由很簡單，由於Angular我不會。理由不夠充分？呵呵，好吧，Angular2.0 前些日子一直 in beta，好像最近發佈正式版了，有空去研究下。

React不能和Angular比，但React的stars實在太多了，30000+相比於Angular10000+（Google又輸給了Facebook一次）。所謂人多力量大，React出現後，其附帶庫類接踵而至。react-router是典型表明，是SPA(not spa!)的路由核心。

React我就不細講了，有問題出門右轉瞭解React系。做爲博客起家的網站，2.0確定會繼承1.0的數據量，所以我須要找到一個容器來管理個人大量數據。Facebook在React出來就提出過Flux架構，當前比較好的實現是Redux。

Koa or Express

TJ還在Node社區時發佈的兩大NodeJs框架express 和 koa，express自帶大量middleware，而koa只提供了一個核心函數庫，middleware能夠本身開發，也能夠看看koa-*。並且koa開始使用了ES6的相關特性generator，配合babel開發，能夠更快速瞭解掌握ES6語法。因此koa是大勢所趨。

Need A Girlfriend Learned Design

很羨慕具有D2(Design and Developing)水平的FE，可他們卻沒有一個尋找A Girlfriend Learned Design的夢想。

光從設計開始想，我真的很想使用hexo，樣式都直接寫好了，可現改hexo成本太大，最後仍是選擇了以React重構hexo ，翻了半天github上面的hexo-theme，Litten的yilia主題讓我印象深入，這纔是完美的男人! 這哥們兒還在Tencent，因而手動follow了一下。

Yilia
待會還會推出Yilia React

開發前準備

端午節3天1
react1 + react-router1 + redux1(後續推出) + koa1 + mongodb1
可愛的男孩紙*1

組件式開發

*目前暫不使用redux，忽略reducers與actions目錄 須要有這麼一個目錄:

所謂組件式開發就是把web結構分區域佈局，公用部分組件或者是數據固定的展現型組件放在components中，而複合組件或者是數據會改變的組件放在containers中，containers要引入components。

./components: 基礎級組件
./containers: 容器級組件
./routes react-router路由組件

開發源碼React Yilia
文檔等在下考完試後呈上

personalWeb2.0 == React Yilia1.0

目前網站上還有不少路由不通的地方，請見諒。
近期會一直保持更新，歡迎保持關注。

若你對這個主題感興趣:

Litten的Yilia地址
Sharlly用React重構的React Yilia

注:Yilia基於hexo，可是React Yilia與hexo沒有半點關係，只是純粹的引入了樣式，因此數據庫鏈接仍是要靠本身完善，小夥伴們動起手來吧！