休息一下，看看其他人-筆記（1）

2017 iT 邦幫忙鐵人賽

DAY 3

Modern Web

師父領進門修行在個人系列第 9 篇

2017鐵人賽

法蘭克

2016-12-17 14:22:48

1948 瀏覽

分享至

暫時脫離自己規劃的行程一天，研究一下在鐵人賽看到有興趣的文章，並實做看看。
自己大概每10天會做一次這樣的事情與大家共同學習。

自己有在Follow的文章：

Vue 相關
1. 實作小範例入門Vue & Vuex 2.0 推！寫得很詳細，收穫頗多。
2. Vue.js且戰且飛滿簡潔的，算是輔助我完成第一項的參考。
  
  推薦的學習資源
CSS 相關
1. Css 實戰心法大推，趁機來練自己一直沒有搞清楚的gulp等等。
2. 前端UI軍火庫前端大雜燴整理的不錯，當作學習新知。
React 相關（比較想先學好Vue，晚上有機會再補充）
1. React - DOM界的彼方目前講滿多ES6的，所以應該以這個為主。
2. 零基礎學習Reactjs 30天
3. 線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗這有點酷，影片統整，可以好好練功。

筆記(1)

實作小範例入門Vue & Vuex 2.0

Question:

setup
	webpack?

router.vuejs
vuex
vue-loader

小結論:

單純的資料宣告就放在 data 需要經過計算才顯示的 data 就放在 computed !!

v-if: 當條件成立時，會在瀏覽器上繪製此元素。
v-show: 當條件不成立時，會使用隱藏的方式，不顯示元素。

包含著一個大區塊的判斷式會比較建議使用 v-if 
小型區、頻繁切換的條件或只是文字/ 顏色切換，可以使用 v-show 既可。

Vuex
	action: 可以處理非同步的事件，再利用 commit 與 mutation 溝通。
	mutation: 在處理事件是同步的。

錯誤流程：
action
    1. commit
mutation
    1. call API
    2. 等待
    3. server response
    4. 計算邏輯改變 state
現在我們將這些事件，往前一層到 action 去處理的話，就可以保證到了 mutation 資料都是即時的，計算後的狀態也是現在進行式。
正確流程：
action
    1. call API
    2. 等待
    3. server response
    4. commit
mutation
    1. 計算邏輯改變 state

紀錄

1. Day2 - Basic
    1. 數據綁定到 template
        1. {{ xxx  }} 
    2. 使用者輸入的值要立即顯示在畫面上
        1. v-model = “數據名稱”
    3. 使用 checkbox 做雙向綁定
2. Day3- 使用 vue-router 建構 Single Page Application ?
    1. (方便讓我們切換兩個不同的頁面，而不是將所有功能寫在同一頁上面，利用 if 去切換)
    2.  npm install vue-router --save-dav
3. redo Day4-  實作一個功能，讓使用者可以輸入一個攝氏溫度，上方同步顯示轉換後的華氏溫度。
    1. 使用 computed.
        1.  這個 API 主要負責把原本需撰寫在 template 上面一連串的計算 model 的式子，收成一個類似於 data 的屬性，與 data 不同的地方在於 computed 在 data 改變後會立即回傳計算後的結果。
    2. 加入一個 input tag 作為使用者輸入使用。
    3. 增加一個顯示區域，作為轉換華氏溫度顯示
4. Day5 - II 今天要介紹 4 個 API 延續使用昨天的範例增加功能既可。
    1.  v-if, v-show, v-on, methods
    2.  vue option methods
        1. 是 vue 建構子當中存放 function 的地方，如 onclick 按下後執行的函式可以放在這個區域。
        2.  this 指向這個 vue 元件本身。
5. Day6 - 
    1.  將此頁面移植到 vue 裡面
        1. CSS, image 載入 (要放哪?)
        2. 新增 router path
    2. 將此頁面，拆解成 3 個以上的 component 並重新組合。
        1. component 拆解
        2. 引用 component
6. Day7-  重要 !!! 使用 component
    1. 重複的地方使用 v-for
    2. 資料改成是從 page 傳給 component
7. Day8 - Slot: 我有兩個頁面上面的 nav 大致上功能一樣，只有少部分不同，可以幫我設計一個 nav 做到這件事嗎？
    1.  關鍵就在於 div 的 attribute: slot
        1. 我們告訴 vue 要將這段 code 插到 navbar 這元件裡面的 slot 名稱為 right 中。
8. Day 9 - Vuex  只有 mutation 可以改變 state！
9. Day 10 卡關 晚上繼續

Redo youtube 這個小Project 有稍微了解vue & vuex了推薦大家也來試試：

Css 實戰心法

bootstrap
Bootstrap 本身在使用上難度並不高，就基於元件如何使用官方文件上介紹以非常完整，本篇會開始會介紹 Bootstrap 的進階使用及設計模式去介紹，讓 Bootstrap 可以依據專案需求去做調整及延伸(Bootstrap 甚至能作為大型開發專案的基底)。

導入框架至網站時，還要考慮框架是否符合網站風格以及往後的維護性。Bootstrap 雖然設計上是要給開發者直接運用的，但實際上他所設計的彈性非常之高，也很適合做客製化，甚至 fork 作為公司團體的 Style Guide。

why?
研究後會發現他並非我想的那麼缺乏特色，完全看開發者的使用及熟練度。
對於大型網站、系統來說，自己寫 CSS 也會產生幾個問題：
* 持續性的維護：架構是否良好將影響 CSS 是否好維護
* 套件的使用：再引用其他第三方套件時，是否能夠依據需求調整 CSS 符合風格 (很多套件相容於 Bootstrap)。
* 對於 CSS 的熟練度

bootstrap優點

Bootstrap 不能算是具有特色的前端框架，但也就和 jQuery 一樣好上手，在框架裡沒有太多浮誇的效果，大多是基於 HTML 規範去做樣式的調整。也因為如此，大多略有經驗的開發者僅需看過文件就能學會如何使用。解決問題如下：
* 不需要重頭開始寫
* 降低學習曲線
* 開源框架，Bug 少
* 延伸插件多
* 快速自定義


使用

Bower 是前端的套件管理工具，也有許多開發者會使用 NPM 來一起管理，但我個人除了使用 Webpack 以外還是習慣用 Bower 在管理前端套件。

使用 Bower 以前要先安裝 Bower 的工具，而它分為兩個部分，全域的 Bower 指令與專案的 bower.json：

導入gulp 完成自動化


!!! Boostrap自定義樣式
每一個變數的後方都會接上一個 !default 在後方做為預設，所以在修改變數時需要同時將 !default 移除

CSS 自動化

 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享
本系列文都是著重在 CSS 的開發，所以不會介紹 Javascript 的自動化工具。

gulp
1Basic
是一個前端任務管理工具，它可以做到如Fire.app、Prepros、Grunt等等所能做的事情，簡單內容如下：
* 編譯 SASS、Coffeescript
* 壓縮 .CSS, .JS, 甚至圖檔
* web server with Livereload
* 享受自己動手做Task工具的快感
* others..
可以用gulp客製化屬於該專案使用的工具。

2 prefix
其實現在的 CSS 有 9 成以上的 prefix 都沒有加入的必要，相信在短期內除了測試的 CSS 以外，都不需要再加入 prefix。

現在寫入 prefix 以後還要移除也是個大工程，這時候推薦使用 PostCSS 的 autoPrefixer。PostCSS 類似 Sass，但是他是直接編譯 .css 檔案，另外他的套件都是用插件的方式載入，並不是像 Sass 已經有固定的寫法。這邊特別推薦他的 autoPrefixer 套件，使用上也非常容易，對於往後的維護也是無痛更新。

3.定義預設開發環境 again
讓大家在使用 Gulp 時就能相容於目前的環境 


4.在本地端製作 Icon Fonts

現在的 icon 都傾向使用 web fonts 來處理，因為 web font 所製作的 icon 有以下的好處：
* 載入容易，HTML 只要載入一隻 CSS 就搞定
* 套用容易，只要透過 Class 就能套用
* 可自由調整大小、色彩
雖然只能使用單色，但在開發的便利性上還是有不少人選擇 icon font，目前大家所選擇主流 icon fonts 有以下：
* FontAwesome：http://fontawesome.io/
    * 相當完整的 web font icons
    * 可滿足大多的開發需求
* IcoMoon：https://icomoon.io/
    * 可以自選 icons
    * 可以自定義 icons
    * 付費可以使用它們的 CDN
* Google Material Icon：https://material.io/icons/
    * 很潮，Google 出的
    * icon 可以被搜尋、選取

5.Webserver
Gulp 很適合搭配任何其他的前後端結構，就先前介紹的幾個章節，只要略為修改輸入及輸出的路徑即可；除了搭配其他後端結構外，Gulp 也有適合直接開發的方法，本章會在介紹 Gulp Webserver，這樣就能夠直接在 Gulp 中開啟 Webserver。

已經掌握大部分 Gulp 所使用的手法，接下來僅需要調整到合適的搭配環境即可；如果在開發上遇到 Gulp 不足的地方，可以到 NPM 的網站上透過 gulp 作為關鍵字，搜尋是否有其他套件可以使用。


6. 加入bootstrap again