以CodeIgniter為基礎的網頁前端程式設計

By  Fillano

自我介紹

•  渾名：Fillano、費大公  •  本名：馮旭平  •  工作：後端…有時兼前端  •  常用語言：Javascript,  PHP,  Java,  C#,  HTML,  CSS  

•  出沒地點：iT邦幫忙、?、G+、plurk、twiEer…（帳號皆為fillano）

講題

•  前端工程師的工作  •  與CodeIgniter合作的前端工作  •  前端工程師的難處  

• 讓前端工作更快樂

前端工程師的工作

前端工程的歷史

•  最早，Web只有前端（WWW:  1990,  HTML:  1993）  

•  經由HTTP傳送內容（0.9:  1991,    1.0:  1996,  1.1:  1997）  

•  對於動態資料的需求，產生了後端工程  •  對於網頁呈現的需求，產生了前端工程  –  Javascript,  1995  – CSS,  1996  – DOM,  1998

前端工程師的工作

•  AJAX的應用大約在2005開始發展，網頁的工作越來越複雜，前端工程師這個職務應運而生  

•  主要工作內容範疇(from  wiki)  – Assessbility：讓網頁可以在更多裝置上正常瀏

覽  – Usability：讓操作介面更好用  – Performance：讓應用程式效能更好

Accessibility

•  需要處理瀏覽器相容性的問題  – Reset  – Normalize  – Hacks…  

•  需要處理裝置解析度的問題  – RWD…  

•  需要能管理日趨複雜的CSS  – 架構方法：OOCSS,  SMACSS,  BEM…  – 中介語言：LESS,  SASS,  COMPASS…  

Usability

•  UI/UX…各種人機介面設計、用戶體驗方法與考量  – 視覺效果  – 資訊呈現  – 互動方式  

Performance

•  包含從資料由伺服器丟出來之後所有的效能問題  – 傳送時間  – 瀏覽器呈現資料的速度  – 網頁中的程式執行

為了解決這些問題…

•  我們會使用許多Javascript  Library  •  我們會使用Javascript  Framework  •  我們會使用Bootstrap  •  我們會使用最佳化工具  •  我們會使用各種中介語言  – Compile  to  Javascript  – Compile  to  CSS

與CODEIGNITER合作的前端工作

只要知道靜態檔放哪裡就好了

•  CodeIgniter安裝好後，會有幾個目錄跟檔案  –  .htaccess  –  index.php  – system  – applicadon  

•  為了管理方便，可以把靜態檔案全部放在一個目錄，例如assets

設定

•  假設規劃靜態檔案都放在assets目錄  •  可以透過在applicadon/config/config.php中，

設定基底url：$config[‘base_url’]  =  ‘/codeigniter/’;  

•  然後在applicadon/config/autoload.php中，設定$autoload[‘helper’]  =  array(‘url’…);  

•  在view中，呼叫<?=base_url()?>/assets/path/stadc_file，就可以取得正確的url

接下來

•  除非…  – 有什麼理由需要用到html  /  form 等helper，或

是Javascript  Driver  – 需要透過AJAX跟後端API收發資料  

•  前端的工作跟CodeIgniter基本上就沒關係了XD

前端工程師的難處

客戶會直接看到

•  我的經驗  – 客戶常常在Wireframe階段都沒感覺，看到畫面

才開始發揮想像力  – 對細節吹毛求疵  – 需求書通常規範了流程、資料、模組等東西，

對於呈現的部份反而比較模糊

常常在工作流程的最後面

•  需求=>設計=>伺服器端程式=>套版=>驗收  •  前面任一階段的延遲，壓力都會在後面爆

發

技術瑣碎複雜

•  HTML  x  Javascript  x  CSS  x 瀏覽器版本  •  為了解決一些問題，需要使用更多的工具…

讓需要的技能更複雜了  •  技術的知識，對前端工程師來說是宿命  •  透過工具，還是可以讓工作更順利

讓前端工作更快樂

還是利用工具

•  Bower：套件管理  •  Grunt：自動化  •  Yeoman：專案架構生成  •  Gulp：另一個自動化工具  •  這些工具，都是使用Javascript（node.js）開

發的，對於前端工程師來說，比較沒有進入障礙  

套件管理

•  專案常常會使用許多不同的Library及Framework  ，他們各自有版本及相依性，會造成維護上的困難  

•  安裝時，還需要自己到不同的專案網站下載，會很麻煩  

•  利用套件管理工具，只要用一個工具就可以完成這些工作  

套件管理正夯

•  Java很早就有Maven可以做自動化及套件管理  

•  PHP有Composer  •  Ruby有Gem  •  Node.js有NPM  •  前端的話，有bower

使用bower的好處

•  透過bower，就可以根據專案的需求，安裝需要的套件  

•  例如一個專案會使用到：  –  Bootstrap：需要jquery版本>1.9  – Angular  –  Jquery-­‐easyui：需要jquery版本>1.9，但是不支援2.x  

•  使用bower安裝時，他會根據版本的需求，自動安裝依賴的jquery，並且調整成最合適的版本

Bower怎麼用

•  先安裝node.js  •  透過`npm  install  –g  bower`來安裝bower  •  套件的預設安裝目錄是bower_components，

可以透過新增設定檔~/.bowerrc來修改預設值  

•  使用  bower  install  [套件名稱]或是[url]來安裝套件  

•  使用bower  init可以在專案目錄中加入bower.json，專案使用的套件會紀錄在這裡  

實際操練

•  安裝node.js  •  安裝bower  •  建立~/.bowerrc  •  安裝套件並觀察安裝版本變化  •  使用bower  init建立bower.json，紀錄專案使

用套件

Bower的相關資訊

•  網站： hEp://bower.io/  •  怎麼指定版本：    hEp://semver.org/  •  (npm以及bower都使用一樣的版本號標準)  

自動化

•  專案進行時，會使用各種工具進行各種工作，例如  – 用CoffeeScript寫Javascript  – 把SASS編譯成CSS  – 進行單元測試  –  Javascript壓縮  –  CSS壓縮  – 圖檔最佳化  – 版本管理  

•  使用不同的工具，還需要各自下命令，很麻煩

自動化工具的好處

•  不用每次都自己下命令  •  可以把不同工作，依照「相依性」組合起

來，批次作業  

常見的專案自動化工具

•  Java  – Ant  – Maven  

•  PHP  – Phing  

•  Ruby  – Rake  

•  在Node.js  / 前端最常用的則是：Grunt及Gulp  

安裝Grunt

•  同樣要先安裝Node.js  •  用npm安裝： `npm  install  –g  grunt`  •  使用npm  init或是手動建立package.json（至

少要有name,  version,  devDependencies）  •  依照需求安裝不同的任務(task)  – 例如要拷貝檔案，可以使用copy任務，他的npm套件名稱是grunt-­‐contrib-­‐copy  

– 安裝指令就是 `npm  install  grunt-­‐contrib-­‐copy  -­‐-­‐save-­‐dev`  

使用grunt

•  在專案根目錄新增Grunxile.js檔案  •  檔案內容是Javascript程式，但是不難理解  •  根據自己的需求，搜尋合適的任務  •  使用  `npm  install  [任務]  -­‐-­‐save-­‐dev`  命令來安

裝任務  •  撰寫Grunxile.js的內容  •  使用 `grunt  [任務名稱]`  來執行任務

Grunxile.js的結構

•  最外層程式：  – module.exports  =  funcdon(grunt)  {  …  }  

•  任務設定：  – grunt.initConfig()  

•  載入任務的npm模組  – grunt.loadNpmTasks(“模組名稱”)  

•  註冊任務  – grunt.registerTask(“任務名”,  [“其他任務”,  “其他

任務”])  

Grunt的概念

•  任務皆以「設定」的方式，建立他執行的規則  

•  使用grunt.loadNpmTasks()載入的任務，使用他的任務名稱就可以直接執行  

•  可以用grunt.registerTask()自定任務，把經由任務模組載入的任務以及自定的任務組合起來執行

檔案指定的規則

•  大部分的任務設定，都是在處理檔案，所以一定要知道在Grunxile.js中怎麼指定檔案  

•  除了使用檔案及目錄名稱，萬用字元*有特定的意義：  – 「*」代表目錄下的所有檔案（代表任意數目的

字元，但是不包含「/」）  – 「**」代表目錄下的所有目錄及檔案（代表任

意數目的字元，且包含「/」）  – hEp://gruntjs.com/configuring-­‐tasks#globbing-­‐paEerns  

實際操作

•  安裝Grunt  •  撰寫package.json  •  安裝grunt-­‐contrib-­‐clean,  grunt-­‐contrib-­‐copy,  grunt-­‐contrib-­‐uglify三個任務  

•  撰寫Grunxile.js  •  定義build以及preview這兩個任務  •  執行

還有很多好康的任務

•  grunt-­‐contrib-­‐cssmin：壓縮CSS檔  •  grunt-­‐contrib-­‐coffee：編譯Coffee  Script檔  •  grunt-­‐contrib-­‐compass：編譯SASS檔案  •  grunt-­‐contrib-­‐watch：監控檔案，有變動時

執行特定任務（ex. 編譯Coffee  Script）  •  grunt-­‐contrib-­‐imagemin：適當地壓縮，最佳

化圖檔  •  grunt-­‐s3：把檔案放到AWS  S3上

Grunt的相關資訊

•  網站： hEp://gruntjs.com/  •  查詢任務模組： hEp://gruntjs.com/plugins  •  目前有3390個任務模組  

專案架構產生器-­‐yeoman

•  使用yeoman，可以依照自己對於專案及相依性的需求，快速建立架構好的專案目錄及檔案  

•  額外的相依性，也可以透過bower在架構產生後加上去

使用情境

•  要使用的軟體、額外的相依套件夠明確，不必自己花時間拆東西、加東西  

•  願意使用別人架構好的專案架構與環境

以codeigniter為例

•  先透過npm來安裝yeoman：  `npm  install  -­‐g  yo`  

•  然後安裝generator-­‐codeigniter：  `npm  install  -­‐g  generator-­‐codeigniter  `  

•  建立專案目錄，在目錄中執行 `yo  codeigniter`  

•  使用npm、bower、composer來安裝相依的套件  

•  執行grunt  build來建構專案

Yoeman的相關資訊

•  網站： hEp://yeoman.io/  •  尋找合適的產生器： hEp://yeoman.io/generators/  

最後來看一下Gulp

•  他跟grunt一樣，都是專案自動化工具  •  不同點在於：  – Grunt使用「設定」的方式來建立任務  – Gulp則使用「寫程式」的方式來建立任務：使

用pipe把任務串接起來  

•  Grunt支援的任務比較多  •  Gulp執行效率會比較好

試用一下gulp

•  只使用gulp-­‐uglify來把stadcs/js/list_member.js壓成build/assets/js/list_member.min.js  

•  程式碼  •  執行結果

Gulp的相關資訊

•  網頁： hEp://gulpjs.com/  •  查詢任務模組： hEp://gulpjs.com/plugins/  •  目前有673個任務模組…

總之

•  能偷懶就盡量偷懶，可以交給機器做的事情，就不要自己做