演示文稿使用開發(fā)前端

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

USEPYTHON第四十一頁，共六十頁。易度前端:FitClient易度WebPlayer瀏覽器版易度MobilePlayer移動(dòng)版易度應(yīng)用Python渲染UI組件接受View指令易度Player：不胖不瘦，剛好事件處理事件處理Web適配移動(dòng)適配完全用Python寫應(yīng)用第四十二頁，共六十頁。分層：前端引擎和應(yīng)用易度Player（前端引擎）：20%javascript基礎(chǔ)整體外觀風(fēng)格欄目導(dǎo)航加載進(jìn)度出錯(cuò)處理動(dòng)態(tài)組件渲染展示交互事件觸發(fā)界面行為控制易度應(yīng)用：80%python輸出UI界面交互事件處理控制界面行為第四十三頁，共六十頁。前端引擎和應(yīng)用前端框架UIVIEW各種業(yè)務(wù)應(yīng)用(Python)應(yīng)用層WebPlayer引擎層招一個(gè)NB的前端維護(hù)引擎即可前端技術(shù)革新，只需升級(jí)引擎層第四十四頁，共六十頁。使用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(‘出錯(cuò)了’,type='error',)view.modal(form,width=600)view.layout.main().set_content(form)view.layout.right().set_content(form)第四十八頁，共六十頁?？梢暬谱鞅韱蝔orm=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)動(dòng)觸發(fā)刪除事件：

view.trigger(‘dataitem-removed’,\

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

ui.script().on('dataitem-removed',"@zopen.test:refresh")第五十二頁，共六十頁。示例：珠三角沙龍活動(dòng)頁面第五十三頁，共六十頁。示例：投票應(yīng)用第五十四頁，共六十頁。Python就是一種DSLPython的表達(dá)能力，不比html差Bootstrap版本升級(jí)，重寫html工程浩大Python寫界面，與具體實(shí)現(xiàn)隔離第五十五頁，共六十頁。回歸桌面開發(fā)模式一切皆python學(xué)習(xí)更簡(jiǎn)單幾乎不用懂web全端開發(fā)更容易codereview組件化開發(fā)：為web未來同步事件驅(qū)動(dòng)：屏蔽網(wǎng)絡(luò)部分的圖形化開發(fā)：可以更多第五十六頁，共六十頁。WebPlay