迅速網站前端開發用 Python

(Update: 說來這講題偏向「前端佈署用 Python」)

Web 的前端工程複雜度隨著建構工具愈趨豐富與深入，身為 Python Web Developer 怎麼善用即有工具快速得到一個「敏捷式堪用的」解決方案呢？講題會從傳統後端網站框架的樣版 (Templates) 系統開始介紹，介接近來前端工程的發展（npm、Bower），最後結合 Web assets 的概念組成一個 Minimal Viable Frontend 的解決方案。

Transcript

1. 迅速網站前端開發 用 Python Keith Yang yang.keitheis.org
2. Minimal Viable Front
3. Keith Yang • @keitheis    • Taipei.py co-organizer • #PyConAPAC 2014 Web Chair • biideal coder 3
5. H T M L
6. 曾經長這樣 < d i v c l a s s = " C S S " s t y l e = " c o l o r : w h i t e " > < p > H e l l o H T M L 6
7. 然後世界變了 < d i v n g - a p p = " N o N G " c l a s s = " c o l - m d - 6 " > < p n g - c o n t r o l l e r = " E v e r C t r l a s e v e r C t r l " > { { e v e r C t r l . h e l l o } } Pythonista: 「對啊不知道為什麼又不是 Python 3」 7
8. 能有多迅速？ • 編寫又少又快 • 修改又小又快 • Code Review又少又快 • 成效又大又快又好啊！ 8
9. 大綱：就是快 • Templates in web frameworks • Use Fabric with npm & Bower • Used with web assets • f r o m a l l i m p o r t p r o f i t , f u n 9
10. Templates in web framework • Jinja2 in Flask • Mako in Pylons, Pyramid, ... • Plim in ... biideal • Django template in Django. 10
11. 發生的時機 • 後端內建 • 與網站框架緊密結合 直接調用後端的 Data Model 11
12. Some popular frontend packages • AngularJS, Vue.js • Bootstrap, Ink • jQuery then... 12
13. MVC, MVVC, MVP, *.* Client side template
14. JS? Javascript? Waht?
15. In Python app?
16. AND RESTFUL APP. THANKS. 是的 <| |3
17. What, Why, When, Who, Where, How (5W1H) • 前端工程師說要用的時候 • 老闆說我們也要有的時候 • 你說 怎麼可能 的時候 17
18. 可能怎麼可能 怎麼可能怎麼 可能怎麼可能
19. 回到現實 安裝吧寶貝.js
20. 「可是 j s . . . 我過慣好日子了。」 p i p i n s t a l l - r r e q u i r e m e n t . t x t
22. 手動安裝模式 1. 下載回來 2. 放入 static 資料夾 3. Commit 到版本控制系統裡 22
23. 手動更新模式 1. 下載回來？ 2. 放入 static 資料夾？ 3. Commit 到版本控制系統裡？ 23
25. 剛剛是一個套件版本更新 • AngularJS 版本加個 0 . ? . ? • 成千上萬行 code 請 review！ • == 超大量的謝謝指教啊啊啊啊啊啊啊 25
26. npm npm npm npm npm npm npm npm npm node.js 內建用來管理套件的程式 26
27. s t a t i c / p a c k a g e . j s o n { . . . " d e v D e p e n d e n c i e s " : { " b o w e r " : " * " , . . . 這裡用來放 bower 之外用到的東西 27
28. 用 npm 安裝 Bower 1. cd static && npm install 2. Bower 指令會裝到 s t a t i c / n o d e _ m o d u l e s / . b i n / b o w e r 28
29. n p m i n f a b f i l e . p y f r o m f a b r i c . a p i i m p o r t l c d , l o c a l d e f n p m ( * a r g s ) : c m d = ' n p m ' w i t h l c d ( " m y a p p / s t a t i c " ) : l o c a l ( c m d + ' ' . j o i n ( a r g s ) ) 29
30. 用 Fabric 來跑 npm f a b n p m : i n s t a l l f a b n p m : u p d a t e TBD: p i p i n s t a l l i n v o k e 0 1 . 0 2 . 30
31. Bower 31
32. Bower node.js 外建用來管理（前端）套件的程式 bower 基本指令 b o w e r i n s t a l l b o w e r u p d a t e 0 1 . 0 2 . 32
33. 用 Bower 來 安裝個 jQuery
34. s t a t i c / b o w e r . j s o n { . . . " d e p e n d e n c i e s " : { " j q u e r y " : " * " , . . . " i g n o r e " : [ " * * / . * " , " n o d e _ m o d u l e s " , " p a c k a g e s " ] , 34
35. 全手動跑 bower c d m y a p p / s t a t i c n o d e _ m o d u l e s / . b i n / b o w e r i n s t a l l n o d e _ m o d u l e s / . b i n / b o w e r u p d a t e 0 1 . 0 2 . 0 3 . 35
36. B o w e r i n f a b f i l e . p y f r o m f a b r i c . a p i i m p o r t l c d , l o c a l d e f b o w e r ( * a r g s ) : c m d = ' n o d e _ m o d u l e s / . b i n / b o w e r ' w i t h l c d ( " m y a p p / s t a t i c " ) : l o c a l ( c m d + ' ' . j o i n ( a r g s ) ) 36
37. 用 Fabric 來跑 bower f a b b o w e r : i n s t a l l f a b b o w e r : u p d a t e 來來來，大家一起來 f a b n p m : i n s t a l l b o w e r : i n s t a l l 0 1 . 0 2 . 37
38. 看 Bower 安裝到哪 Default: s t a t i c / c o m p o n e n t s / { p a c k a g e } # 可以在很不明顯的 .bowerrc 裡更改 38
39. 例：用 bower 裝好的 jQuery s t a t i c / c o m p o n e n t s / j q u e r y / ├ ─ ─ M I T - L I C E N S E . t x t ├ ─ ─ b o w e r . j s o n ├ ─ ─ d i s t │ ├ ─ ─ j q u e r y . j s │ ├ ─ ─ j q u e r y . m i n . j s │ └ ─ ─ j q u e r y . m i n . m a p . . . 39
40. 小結成果 1. 前端套件版本更新容易 2. 不用 commit 前端套件 3. local 與 production 這下都要 build 了 40
41. Minimal d i f f - " a n g u l a r " : " ~ 1 . 2 . 1 2 " + " a n g u l a r " : " ~ 1 . 2 . 1 6 " 41
43. 直接放到 HTML 中 . . . < s c r i p t s r c = " s t a t i c / c o m p o n e n t s / j q u e r y / d i s t / j q u e r y . m i n . j s " > < / s c r i p t > . . . 43
44. Webassets 簡介 1. “Asset management for Python” 2. 處理前端的 Javascript、CSS 等 44
45. Webassets 使用案例 %: %version * . c s s  c s s m i n  % . m i n . c s s * . j s  j s m i n  % . m i n . j s s t y l u s  c s s m i n  % . m i n . c s s s t y l u s  a u t o p r e f i x e r  c s s m i n  % . c r o s s - b r o w s e r . m i n . c s s 0 1 . 0 2 . 0 3 . 0 4 . 45
46. 用於 Webassets (in Mako template) % f o r u r l i n w e b a s s e t s ( r e q u e s t , " s t a t i c / c o m p o n e n t s / j q u e r y / d i s t / j q u e r y . j s " , . . . , o u t p u t = ' b u i l d / j s / j q e u r y . % ( v e r s i o n ) s . j s ' , f i l t e r s = ' r j s m i n ' ) < s c r i p t s r c = " $ { u r l } " > < / s c r i p t > % e n d f o r 46
47. jqeury.%(version)s.js = > j q u e r y . a 1 b 2 c 3 d 4 . j s => 避免瀏覽器暫存 CSS、JS 檔 47
48. 處理 vendor 一堆 Javascript j q e u r y . j s , a n g u l a r . j s , l i v e r e l o a d . j s , . . . = > v e n d o r . a 1 b 2 c 3 d 4 . j s # Django-Compressor 也行 48
49. 小結成果 I I 1. 有可用的 cssmin、jsmin，以及 assets version 2. 沒有寫 grunt 或 gulp 來 build css 或 js 暫時逃過一劫 （或一利：讓前端工程師來寫前端的 build） 49
51. Summary: Minial Viable Frontend • 編寫快速安裝、升級 • 修改 d i f f 很少 • Code Review 減少雜訊 • 成效輕鬆上線 51
52. biideal is hiring
53. 問與答？ 謝謝