迅速網站前端開發用 Python

Keith Yang

• @keitheis
  
• Taipei.py co-organizer
• #PyConAPAC 2014 Web Chair
• biideal coder

曾經長這樣

<div
    class="CSS"
    style="color: white">
<p> Hello HTML

然後世界變了

<div ng-app="NoNG"
    class="col-md-6">
<p ng-controller="EverCtrl
  as everCtrl">
{{everCtrl.hello}}

Pythonista: 「對啊不知道為什麼又不是 Python 3」

能有多迅速？

• 編寫又少又快
• 修改又小又快
• Code Review又少又快
• 成效又大又快又好啊！

大綱：就是快

• Templates in web frameworks
• Use Fabric with npm & Bower
• Used with web assets
• from all import profit, fun

Templates in web framework

• Jinja2 in Flask
• Mako in Pylons, Pyramid, ...
• Plim in ... biideal
• Django template in Django.

發生的時機

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

Some popular frontend packages

• AngularJS, Vue.js
• Bootstrap, Ink
• jQuery

then...

What, Why, When, Who, Where, How (5W1H)

• 前端工程師說要用的時候
• 老闆說我們也要有的時候
• 你說 怎麼可能 的時候

手動安裝模式

1. 下載回來
2. 放入 static 資料夾
3. Commit 到版本控制系統裡

手動更新模式

1. 下載回來？
2. 放入 static 資料夾？
3. Commit 到版本控制系統裡？

剛剛是一個套件版本更新

• AngularJS 版本加個 0.?.?
• 成千上萬行 code 請 review！
• == 超大量的謝謝指教啊啊啊啊啊啊啊

npm npm npm npm npm npm npm npm npm

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

static/package.json

{
    ...
    "devDependencies": {
        "bower": "*",
    ...

這裡用來放 bower 之外用到的東西

用 npm 安裝 Bower

1. cd static && npm install
2. Bower 指令會裝到 static/node_modules/.bin/bower

npm in fabfile.py

from fabric.api import lcd, local
def npm(*args):
    cmd = 'npm '
    with lcd("myapp/static"):
        local(cmd + ' '.join(args))

用 Fabric 來跑 npm

fab npm:installfab npm:update

TBD: pip install invoke

Bower

Bower

node.js 外建用來管理（前端）套件的程式

bower 基本指令

bower installbower update

static/bower.json {

...
"dependencies": {
    "jquery": "*",
    ...
"ignore": [
    "**/.*",
    "node_modules",
    "packages"
],

全手動跑 bower

cd myapp/staticnode_modules/.bin/bower installnode_modules/.bin/bower update

Bower in fabfile.py

from fabric.api import lcd, local
def bower(*args):
    cmd = 'node_modules/.bin/bower '
    with lcd("myapp/static"):
        local(cmd + ' '.join(args))

用 Fabric 來跑 bower

fab bower:installfab bower:update

來來來，大家一起來

fab npm:install bower:install

看 Bower 安裝到哪

Default:
static/components/{package}
# 可以在很不明顯的 .bowerrc 裡更改

例：用 bower 裝好的 jQuery

static/components/jquery/
├── MIT-LICENSE.txt
├── bower.json
├── dist
│   ├── jquery.js
│   ├── jquery.min.js
│   └── jquery.min.map
...

小結成果

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

Minimal diff

-    "angular": "~1.2.12"
+    "angular": "~1.2.16"
    

直接放到 HTML 中

...
<script src="static/components/
        jquery/dist/jquery.min.js">
</script>
...
    

Webassets 簡介

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

Webassets 使用案例

%: %version

*.css  cssmin  %.min.css*.js  jsmin  %.min.jsstylus  cssmin  %.min.cssstylus  autoprefixer  cssmin
 %.cross-browser.min.css

用於 Webassets (in Mako template)

%for url in webassets(request, "static/components/jquery/dist/jquery.js", ..., output='build/js/jqeury.%(version)s.js', filters='rjsmin')
        <script src="${url}"></script>
%endfor
        

小結成果 II

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

Summary: Minial Viable Frontend

• 編寫快速安裝、升級
• 修改diff 很少
• Code Review 減少雜訊
• 成效輕鬆上線