迅速網站前端開發用 Python

Slide 1

Slide 1 text

迅速網站前端開發用 Python Keith Yang yang.keitheis.org

Slide 2

Slide 2 text

Minimal Viable Front

Slide 3

Slide 3 text

Keith Yang • @keitheis    • Taipei.py co-organizer • #PyConAPAC 2014 Web Chair • biideal coder 3

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

H T M L

Slide 6

Slide 6 text

曾經長這樣 < 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

Slide 7

Slide 7 text

然後世界變了 < 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

Slide 8

Slide 8 text

能有多迅速？ • 編寫又少又快 • 修改又小又快 • Code Review又少又快 • 成效又大又快又好啊！ 8

Slide 9

Slide 9 text

大綱：就是快 • 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

Slide 10

Slide 10 text

Templates in web framework • Jinja2 in Flask • Mako in Pylons, Pyramid, ... • Plim in ... biideal • Django template in Django. 10

Slide 11

Slide 11 text

發生的時機 • 後端內建 • 與網站框架緊密結合直接調用後端的 Data Model 11

Slide 12

Slide 12 text

Some popular frontend packages • AngularJS, Vue.js • Bootstrap, Ink • jQuery then... 12

Slide 13

Slide 13 text

MVC, MVVC, MVP, *.* Client side template

Slide 14

Slide 14 text

JS? Javascript? Waht?

Slide 15

Slide 15 text

In Python app?

Slide 16

Slide 16 text

AND RESTFUL APP. THANKS. 是的 <| |3

Slide 17

Slide 17 text

What, Why, When, Who, Where, How (5W1H) • 前端工程師說要用的時候 • 老闆說我們也要有的時候 • 你說怎麼可能的時候 17

Slide 18

Slide 18 text

可能怎麼可能怎麼可能怎麼可能怎麼可能

Slide 19

Slide 19 text

回到現實安裝吧寶貝.js

Slide 20

Slide 20 text

「可是 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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

剛剛是一個套件版本更新 • AngularJS 版本加個 0 . ? . ? • 成千上萬行 code 請 review！ • == 超大量的謝謝指教啊啊啊啊啊啊啊 25

Slide 26

Slide 26 text

npm npm npm npm npm npm npm npm npm node.js 內建用來管理套件的程式 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

用 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

用 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

Slide 31

Slide 31 text

Bower 31

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

用 Bower 來安裝個 jQuery

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

全手動跑 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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

用 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

Slide 38

Slide 38 text

看 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

Slide 39

Slide 39 text

例：用 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

Slide 40

Slide 40 text

小結成果 1. 前端套件版本更新容易 2. 不用 commit 前端套件 3. local 與 production 這下都要 build 了 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

直接放到 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

Slide 44

Slide 44 text

Webassets 簡介 1. “Asset management for Python” 2. 處理前端的 Javascript、CSS 等 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

用於 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

Slide 47

Slide 47 text

jqeury.%(version)s.js = > j q u e r y . a 1 b 2 c 3 d 4 . j s => 避免瀏覽器暫存 CSS、JS 檔 47

Slide 48

Slide 48 text

處理 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

Slide 49

Slide 49 text

小結成果 I I 1. 有可用的 cssmin、jsmin，以及 assets version 2. 沒有寫 grunt 或 gulp 來 build css 或 js 暫時逃過一劫（或一利：讓前端工程師來寫前端的 build） 49

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Summary: Minial Viable Frontend • 編寫快速安裝、升級 • 修改 d i f f 很少 • Code Review 減少雜訊 • 成效輕鬆上線 51