#1 Frontend 前端分享 by Howard

Transcript

1. JS @前端 2016/04/02 Howard
2. About me • Mentor at training program • Host at 好想工作室 • Web application training • Technical lead at HWTrek • Developer at Inpuman • Member at TMI
3. 什麼是(網頁) 前端？
4. 前端 三 劍客
5. 1991 ~ 1999 HTML
6. 2000 ~ 2006 HTML CSS Javascript
7. 2007 ~ 2010 HTML CSS Javascript
8. 2011 ~ HTML CSS Javascript
9. 對前端工程師來說... Javascript 的程度決定薪水的高度 ps. 以上文字有效期限五年
10. 不過還是要備註一下... 前端工程師不是只需要處理 Javascript ps. 詳細內容請參閱附錄一
13. Javascript 竄起因素 • Jquery 出世 (但這個是有後遺症的) • Browser 大戰 (終於可以脫離 IE 那個智障兒) • Application Web 化
14. 前端 鑑古知今 傳送門...
15. 到底 Javascript 可以做什麼
16. • 前端 Interaction • 特效 • ajax • Call API • 自動化測試 • 瀏覽器外掛 • 渲染畫面 • 控制瀏覽器 • 讀取 cookie • WebGL • Game • 後端 service 開發 • API 建置 • 資料庫連接 • 桌面程式開發 • Mobile app 開發 • 硬體介接 • IOT • 爬蟲 • 自動化部屬
17. 新手該從哪邊著手？
18. React X
19. 在前端 framework、tool、library 蓬勃發展的年代 不能只靠 一招打天下
22. 認識快、理解快、學習快、應用快
23. 無招勝有招 沒有一定非要 xx 不可 只有當前情況下最適合的作法
24. 求知若渴 知己知彼，時時保持好奇心 去了解各種 tool、framework、library 使用的時機
25. Jquery - Dom operation 互動多、特效多適宜
26. Angular - Rich application Object 互動多、CRUD多事宜
27. Ractive - Template-driven 渲染多、互動單純適用
28. React - One-way reactive data flow 畫面互動多、狀態多適宜
29. D3.js - Data-driven documents Data 視覺呈現適宜
30. 講那麼多... 所以到底新手該從哪邊著手
31. HTML & CSS 是的 你沒看錯...科科 ps. 請參閱附錄二
32. Javascript 基礎名詞 • Asynchronous • Callback • Promise • Error first • Object & Array • Function • Ajax • Closure
33. 前端工程師基本不外乎三件事情 • Deal Interaction • Call API • Render HTML
34. 以下開始(放) Live demo ps. 據說 live 會有高達 90% 卡住
35. Live demo 留言板 • Get comment tempate • Get comment data from api • Use template engine render html • Register btn event • Rerender page
36. QA Time
37. 工商時間
38. 好想工作室 Roadmap • (Techincal) Co-working space • Web application training campus ◦ Froentend developer ◦ Backend developer ◦ Architecher developer ◦ Joomla CMS • iOS application training campus • Browser extenstion training campus
39. 附錄一 前端工程師
40. 附錄一 前端工程師 • https://github.com/JacksonTian/fks • https://github.com/unruledboy/WebFrontEndStack
41. 附錄二 前端學習順序建議 • https://li-xinyang.gitbooks.io/frontend- notebook/content/
42. 附錄三 Reference • http://www.ractivejs.org/ • http://momentjs.com/docs/ • http://bootsnipp.com/snippets/nPdXz • https://github.com/AutumnsWind/Front-end-tutorial