使用python開發(fā)前端

Python讓前端更輕松

基于Python的前端方案實踐潘俊勇/panjunyong易度云辦公2021/6/271前端開發(fā)的困惑2021/6/272桌面C/S時代：曾經(jīng)的美好成熟工具鏈支撐簡單快速開發(fā)2021/6/273組件編程，圖形化IDEDelphi/C++BuilderVisualStudio2021/6/274PowerBuilder：圖形化，腳本化數(shù)據(jù)庫應用開發(fā)神器2021/6/275效果更低的成本對開發(fā)人員要求低不分前后端更高的開發(fā)效率2021/6/276Web前端–B/S時代桌面安裝復雜，瀏覽器打開即用，世界進入B/S時代2021/6/277B/S模型：ThinClient服務器瀏覽器輸出Html、Css、js等渲染展示發(fā)起http請求用戶操作輸入輸出終端2021/6/278問題：更多語言需要學習HTMLCSSJavascript2021/6/279減少語言Nodejs：后端也用js來開發(fā)曾經(jīng)的KSS：用類似css的語法寫JSPythonJS：瀏覽器上Python開發(fā)翻譯為JS玩具性質2021/6/2710問題：事件變成http請求route：url地址和代碼的映射安全性無狀態(tài)：cookie/session2021/6/2711用約定來簡化RailsDjango2021/6/2712問題：不成熟的瀏覽器Html/js/css都在不斷在發(fā)展Javascript自身的缺陷各種瀏覽器兼容問題第三方組件兼容性問題2021/6/2713還好有前端框架TwitterBootstrapSemanticUIJQueryUI國內(nèi)的淘寶BUI百度BlendUI…2021/6/2714Web前端–應用時代移動端和體驗要求，系統(tǒng)要求更開放，進入單頁面應用時代2021/6/2715單頁面應用模型：FatClient服務器SPA（瀏覽器）輸出json數(shù)據(jù)渲染展示發(fā)起http請求API用戶操作單頁面應用服務接口SPA：SinglePageApplication，單頁面web應用2021/6/2716特點大量邏輯前移到瀏覽器服務端只提供API對搜索引擎支持不好前端特別重2021/6/2717OpenERP：前端有多重？OpenERP6.1版，對web端了SPA重構2021/6/2718OpenERP6.02021/6/2719OpenERP6.12021/6/2720前端MVC框架，蜂擁而至BackBoneAngularJSKnockoutReactJS…2021/6/2721前端開發(fā)工具鏈CoffeescriptLess/SassRequireJS/SeaJSBowerYeomanGrunt2021/6/2722前端的迷失前端開發(fā)變得異常復雜各種框架輪番上陣各自存在問題互不兼容仍未終結前端程序員很渺小2021/6/2723另外的聲音：前端去框架才是趨勢去框架：讓開發(fā)者開發(fā)所謂的微框架或者小框架，然后呢讓它們之間能夠彼此相容，然后你競爭去采用比較好的東西2021/6/2724我們懷念桌面時代的美好2021/6/2725前端欠發(fā)展前端太難優(yōu)秀的web前端很貴….技術一定往簡化發(fā)展前端可能是碗青春飯2021/6/2726怎么破？修修補補，還是根源解決？如何省時、省人、省力，技術上可持續(xù)發(fā)展？2021/6/2727微軟的嘗試：修修補補：如何恢復桌面時代的美好2021/6/2728組件：ASP.NETHelpers在網(wǎng)頁中內(nèi)嵌幫助器，簡化控件的創(chuàng)建2021/6/2729WebForm服務器控件：失敗內(nèi)嵌在html中，弱化http協(xié)議，轉為事件驅動2021/6/2730GooGLE的方案GWT、dartlang、Polymer2021/6/2731GWT用java開發(fā)web前端：編譯為jsRIA：全端回到桌面時代GoogleAdwards,GoogleWallet問題：搜索引擎不友好位置逐漸被Dart取代2021/6/2732Dart:替代JS語言更干凈自帶開發(fā)工具支持polymer組件化開發(fā)一種語言，支持前后端可編譯為高效的js，支持各種瀏覽器快速進入語言排行前202021/6/2733Polymer:WebComponent實現(xiàn)W3Cweb組件技術規(guī)范CustomElementTemplateShadowDOMHTMLimport實現(xiàn)：Polymer代表web未來是終點嗎？2021/6/2734號外：PyjamasPython版本的GWT自帶UI陳舊用戶不多2021/6/2735易度前端的演進一個小(DiaoSi)團隊如何不被技術浪潮摧毀2021/6/2736作為一個小公司技術主管不大懂javascript招不起昂貴專業(yè)的前端害怕技術選型錯上賊船歷史負擔：自制前端框架技術更新，成本非常高如何平滑支持移動端2021/6/2737作為一個開發(fā)平臺解放開發(fā)者專注業(yè)務需求少折騰技術技術延續(xù)性目標：力求最簡三腳貓功夫，也能開發(fā)快速開發(fā)屏蔽實現(xiàn)細節(jié)2021/6/2738嘗試過backbone當年Zope時代的感覺泥潭里掙扎3個月，完成前端框架革命成本太高放棄2021/6/2739只能演進，而非革命盡量少的人最少的技能快速開發(fā)實用、少折騰2021/6/2740LIFEISSHORT

USEPYTHON2021/6/2741易度前端:FitClient易度WebPlayer瀏覽器版易度MobilePlayer移動版易度應用Python渲染UI組件接受View指令易度Player：不胖不瘦，剛好事件處理事件處理Web適配移動適配完全用Python寫應用2021/6/2742分層：前端引擎和應用易度Player（前端引擎）：20%javascript基礎整體外觀風格欄目導航加載進度出錯處理動態(tài)組件渲染展示交互事件觸發(fā)界面行為控制易度應用：80%python輸出UI界面交互事件處理控制界面行為2021/6/2743前端引擎和應用前端框架UIVIEW各種業(yè)務應用(Python)應用層WebPlayer引擎層招一個NB的前端維護引擎即可前端技術革新，只需升級引擎層2021/6/2744使用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’)2021/6/2745UI組件示例2021/6/2746UI組件庫使用Python表單類似Bootstrap的組件系統(tǒng)所有功能組件化2021/6/2747View指令集view.message(‘出錯了’,type='error',)view.modal(form,width=600)view.layout.main().set_content(form)view.layout.right().set_content(form)2021/6/2748可視化制作表單form=root.packages.get_form_obj(‘zopen.test:form’)ui.form(title,description,action)\ .fields(form)\.button(‘submit’,‘提交’)\ .on(‘submit’,‘@zopen.test:submit_form’)2021/6/2749組件選擇(DOM)和操作#向WebComponent致敬view.closest('tabs')\.active_panel()\.set_content(ui.h1(‘hello,world’))view.find('tree#leftnav')\ .expand()2021/6/2750用戶觸發(fā)事件處理ui.link(‘clickme’)\

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

view.trigger(‘dataitem-removed’,\

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

ui.script().on('dataitem-removed',"@zopen.test:refresh")2021/6/2752示例：珠三角沙龍活動頁面2021/6/2753示例：投票應用2021/6/2754Python就是一種DSLPython的表達能力，不比html差Bootstrap版本升級，重寫html工程浩大Python寫界面，與具體實現(xiàn)隔離2021/6/2755回歸桌面開發(fā)模式一切皆python學習更簡單幾乎不用懂web全端開發(fā)更容易codereview組件化開發(fā)：為web未來同步事件驅動：屏蔽網(wǎng)絡部分的圖形化開發(fā)：可以更多2021/6/2756WebPlayer可定制皮膚2021/6/2757引擎分離的額外收獲前端