Upgrade to Pro — share decks privately, control downloads, hide ads and more …

迅速網站前端開發用 Python

迅速網站前端開發用 Python

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

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

D1804d3c315cbb850aaa88d2fbadc3cf?s=128

Keith Yang

May 27, 2014
Tweet

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
  4. None
  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
  21. None
  22. 手動安裝模式 1. 下載回來 2. 放入 static 資料夾 3. Commit 到版本控制系統裡

    22
  23. 手動更新模式 1. 下載回來? 2. 放入 static 資料夾? 3. Commit 到版本控制系統裡?

    23
  24. None
  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
  42. None
  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
  50. None
  51. Summary: Minial Viable Frontend • 編寫快速安裝、升級 • 修改 d i

    f f 很少 • Code Review 減少雜訊 • 成效輕鬆上線 51
  52. biideal is hiring

  53. 問與答? 謝謝