使用python開發(fā)前端

Python讓前端更輕松基于Python的前端方案實踐潘俊勇/panjunyong

易度云辦公前端開發(fā)的困惑桌面C/S時代：曾經(jīng)的美好成熟工具鏈支撐簡單快速開發(fā)組件編程，圖形化IDEDelphi/C++BuilderVisualStudioPowerBuilder：圖形化，腳本化數(shù)據(jù)庫應(yīng)用開發(fā)神器效果更低的成本對開發(fā)人員要求低不分前后端更高的開發(fā)效率Web前端–B/S時代桌面安裝復(fù)雜，瀏覽器打開即用，世界進入B/S時代B/S模型：ThinClient服務(wù)器瀏覽器輸出Html、Css、js等渲染展示發(fā)起http請求用戶操作輸入輸出終端問題：更多語言需要學(xué)習HTMLCSSJavascript減少語言Nodejs：后端也用js來開發(fā)曾經(jīng)的KSS：用類似css的語法寫JSPythonJS：瀏覽器上Python開發(fā)翻譯為JS玩具性質(zhì)問題：事件變成http請求route：url地址和代碼的映射安全性無狀態(tài)：cookie/session用約定來簡化RailsDjango問題：不成熟的瀏覽器Html/js/css都在不斷在發(fā)展Javascript自身的缺陷各種瀏覽器兼容問題第三方組件兼容性問題還好有前端框架TwitterBootstrapSemanticUIJQueryUI國內(nèi)的淘寶BUI百度BlendUI…Web前端–應(yīng)用時代移動端和體驗要求，系統(tǒng)要求更開放，進入單頁面應(yīng)用時代單頁面應(yīng)用模型：FatClient服務(wù)器SPA（瀏覽器）輸出json數(shù)據(jù)渲染展示發(fā)起http請求API用戶操作單頁面應(yīng)用服務(wù)接口SPA：SinglePageApplication，單頁面web應(yīng)用特點大量邏輯前移到瀏覽器服務(wù)端只提供API對搜索引擎支持不好前端特別重OpenERP：前端有多重？OpenERP6.1版，對web端了SPA重構(gòu)OpenERP6.0OpenERP6.1前端MVC框架，蜂擁而至BackBoneAngularJSKnockoutReactJS…前端開發(fā)工具鏈CoffeescriptLess/SassRequireJS/SeaJSBowerYeomanGrunt前端的迷失前端開發(fā)變得異常復(fù)雜各種框架輪番上陣各自存在問題互不兼容仍未終結(jié)前端程序員很渺小另外的聲音：前端去框架才是趨勢去框架：讓開發(fā)者開發(fā)所謂的微框架或者小框架，然后呢讓它們之間能夠彼此相容，然后你競爭去采用比較好的東西我們懷念桌面時代的美好前端欠發(fā)展前端太難優(yōu)秀的web前端很貴….技術(shù)一定往簡化發(fā)展前端可能是碗青春飯怎么破？修修補補，還是根源解決？如何省時、省人、省力，技術(shù)上可持續(xù)發(fā)展？微軟的嘗試：修修補補：如何恢復(fù)桌面時代的美好組件：ASP.NET

Helpers在網(wǎng)頁中內(nèi)嵌幫助器，簡化控件的創(chuàng)建WebForm服務(wù)器控件：失敗內(nèi)嵌在html中，弱化http協(xié)議，轉(zhuǎn)為事件驅(qū)動GooGLE的方案GWT、dartlang、PolymerGWT用java開發(fā)web前端：編譯為jsRIA：全端回到桌面時代GoogleAdwards,GoogleWallet問題：搜索引擎不友好位置逐漸被Dart取代Dart:替代JS語言更干凈自帶開發(fā)工具支持polymer組件化開發(fā)一種語言，支持前后端可編譯為高效的js，支持各種瀏覽器快速進入語言排行前20Polymer:WebComponent實現(xiàn)W3Cweb組件技術(shù)規(guī)范CustomElementTemplateShadowDOMHTMLimport實現(xiàn)：Polymer代表web未來是終點嗎？號外：PyjamasPython版本的GWT自帶UI陳舊用戶不多易度前端的演進一個小(DiaoSi)團隊如何不被技術(shù)浪潮摧毀作為一個小公司技術(shù)主管不大懂javascript招不起昂貴專業(yè)的前端害怕技術(shù)選型錯上賊船歷史負擔：自制前端框架技術(shù)更新，成本非常高如何平滑支持移動端作為一個開發(fā)平臺解放開發(fā)者專注業(yè)務(wù)需求少折騰技術(shù)技術(shù)延續(xù)性目標：力求最簡三腳貓功夫，也能開發(fā)快速開發(fā)屏蔽實現(xiàn)細節(jié)嘗試過backbone當年Zope時代的感覺泥潭里掙扎3個月，完成前端框架革命成本太高放棄只能演進，而非革命盡量少的人最少的技能快速開發(fā)實用、少折騰LIFEISSHORT

USEPYTHON易度前端:FitClient易度WebPlayer瀏覽器版易度MobilePlayer移動版易度應(yīng)用Python渲染UI組件接受View指令易度Player：不胖不瘦，剛好事件處理事件處理Web適配移動適配完全用Python寫應(yīng)用分層：前端引擎和應(yīng)用易度Player（前端引擎）：20%javascript基礎(chǔ)整體外觀風格欄目導(dǎo)航加載進度出錯處理動態(tài)組件渲染展示交互事件觸發(fā)界面行為控制易度應(yīng)用：80%python輸出UI界面交互事件處理控制界面行為前端引擎和應(yīng)用前端框架UIVIEW各種業(yè)務(wù)應(yīng)用(Python)應(yīng)用層WebPlayer引擎層招一個NB的前端維護引擎即可前端技術(shù)革新，只需升級引擎層使用UI組件ui.panel()\

.add(ui.button(‘Clickme’)\

.add(ui.text(‘Hello,world’))\+ui.button(‘新增’)\

.icon(‘a(chǎn)dd’)\

.loading(‘正在提交….’)\

.on(‘click’,‘@zopen.test:test’)UI組件示例UI組件庫使用Python表單類似Bootstrap的組件系統(tǒng)所有功能組件化View指令集view.message(‘出錯了’,type='error',)view.modal(form,width=600)view.layout.main().set_content(form)view.layout.right().set_content(form)可視化制作表單form=root.packages.get_form_obj(‘zopen.test:form’)ui.form(title,description,action)\

.fields(form)\

.button(‘submit’,‘提交’)\

.on(‘submit’,‘@zopen.test:submit_form’)組件選擇(DOM)和操作#向WebComponent致敬view.closest('tabs')\.active_panel()\.set_content(ui.h1(‘hello,world’))view.find('tree#leftnav')\

.expand()用戶觸發(fā)事件處理ui.link(‘clickme’)\

.on(‘click’,‘@zopen.test:test’)所有腳本提交到服務(wù)端腳本用Python處理自定義事件：界面聯(lián)動觸發(fā)刪除事件：

view.trigger(‘dataitem-removed’,\

{'uid':12312,'title':'123123'})多處處理事件：

ui.script().on('dataitem-removed',"@zopen.test:refresh")示例：珠三角沙龍活動頁面示例：投票應(yīng)用Python就是一種DSLPython的表達能力，不比html差Bootstrap

版本升級，重寫html工程浩大Python寫界面，與具體實現(xiàn)隔離回歸桌面開發(fā)模式一切皆python學(xué)習更簡單幾乎不用懂web全端開發(fā)更容易codereview組件化開發(fā)：為web未來同步事件驅(qū)動：屏蔽網(wǎng)絡(luò)部分的圖形化開發(fā)：可以更多WebPlayer可定制皮膚