使用python开发前端.pptx

1、Python让前端更轻松,基于Python的前端 方案实践潘俊勇 易度云办公,前端开发的困惑,桌面C/S时代：曾经的美好,成熟工具链支撑简单快速开发,组件编程，图形化IDE,Delphi/C+Builder Visual Studio,PowerBuilder：图形化，脚本化,数据库应用开发神器,效果,更低的成本对开发人员要求低不分前后端更高的开发效率,Web前端 B/S时代,桌面安装复杂，浏览器打开即用，世界进入B/S时代,B/S模型：Thin Client,服务器,浏览器,输出Html、Css、js等,渲染展示,发起http请求,用户操作,输入输出终端,问题：更多语言需要学习,HTMLCS

2、SJavascript,减少语言,Nodejs：后端也用js来开发曾经的 KSS：用类似css的语法写JSPythonJS：浏览器上Python开发翻译为JS玩具性质,问题：事件 变成 http请求,route：url地址和代码的映射安全性无状态：cookie/session,用约定来简化,RailsDjango,问题：不成熟的浏览器,Html/js/css都在不断在发展Javascript自身的缺陷各种浏览器兼容问题第三方组件兼容性问题,还好有前端框架,Twitter BootstrapSemantic UIJQuery UI国内的淘宝BUI百度BlendUI,Web前端 应用时代,移动端和

3、体验要求，系统要求更开放，进入单页面应用时代,单页面应用模型：Fat Client,服务器,SPA（浏览器）,输出json数据,渲染展示,发起http请求API,用户操作,单页面应用,服务接口,SPA：Single Page Application，单页面web应用,特点,大量逻辑前移到浏览器服务端只提供API对搜索引擎支持不好前端特别重,OpenERP：前端有多重？,OpenERP 6.1版，对web端了SPA重构,OpenERP 6.0,OpenERP 6.1,前端MVC框架，蜂拥而至,BackBoneAngularJSKnockoutReactJS,前端开发工具链,Coffeescrip

4、tLess/SassRequireJS/SeaJSBowerYeomanGrunt,前端的迷失,前端开发变得异常复杂各种框架轮番上阵各自存在问题互不兼容仍未终结前端程序员很渺小,另外的声音：前端去框架才是趋势,去框架：让开发者开发所谓的微框架或者小框架，然后呢让它们之间能够彼此相容，然后你竞争去采用比较好的东西,我们怀念桌面时代的美好,前端欠发展,前端太难优秀的web前端很贵.技术一定往简化发展前端可能是碗青春饭,怎么破？,修修补补，还是根源解决？如何省时、省人、省力，技术上可持续发展？,微软的尝试：,修修补补：如何恢复桌面时代的美好,组件：ASP.NET Helpers,在网页中内嵌帮助器，

5、简化控件的创建,WebForm服务器控件：失败,内嵌在html中，弱化http协议，转为事件驱动,GooGLE的方案,GWT、dartlang、Polymer,GWT,用java开发web前端：编译为jsRIA：全端回到桌面时代Google Adwards,Google Wallet问题：搜索引擎不友好位置逐渐被Dart取代,Dart:替代JS,语言更干净自带开发工具支持polymer组件化开发一种语言，支持前后端可编译为高效的js，支持各种浏览器快速进入语言排行前20,Polymer:Web Component实现,W3C web组件技术规范Custom ElementTemplateSha

6、dow DOMHTML import实现：Polymer代表web未来是终点吗？,号外：Pyjamas,Python版本的GWT自带UI陈旧用户不多,易度前端的演进,一个小(DiaoSi)团队如何不被技术浪潮摧毁,作为一个小公司,技术主管不大懂javascript招不起昂贵专业的前端害怕技术选型错上贼船历史负担：自制前端框架技术更新，成本非常高如何平滑支持移动端,作为一个开发平台,解放开发者专注业务需求少折腾技术技术延续性目标：力求最简三脚猫功夫，也能开发快速开发屏蔽实现细节,尝试过backbone,当年Zope时代的感觉泥潭里挣扎3个月，完成前端框架革命成本太高放弃,只能演进，而非革命,尽量

7、少的人最少的技能快速开发实用、少折腾,LIFE IS SHORTUSE PYTHON,易度前端:Fit Client,易度Web Player浏览器版,易度Mobile Player移动版,易度应用Python,渲染UI组件接受View指令,易度Player：不胖不瘦，刚好,事件处理,事件处理,Web适配,移动适配,完全用Python写应用,分层：前端引擎和应用,易度Player（前端引擎）：20%,javascript基础整体外观风格栏目导航加载进度出错处理动态组件渲染展示交互事件触发界面行为控制,易度应用：80%,python输出UI界面交互事件处理控制界面行为,前端引擎和应用,前端框架,

8、UI,VIEW,各种业务应用(Python),应用层,WebPlayer 引擎层,招一个NB的前端维护引擎即可前端技术革新，只需升级引擎层,使用UI组件,ui.panel().add(ui.button(Click me).add(ui.text(Hello,world)+ui.button(新增).icon(add).loading(正在提交.).on(click,zopen.test:test),UI组件示例,UI组件库,使用Python表单类似Bootstrap的组件,系统所有功能组件化,View指令集,view.message(出错了,type=error,)view.modal(fo

9、rm,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)和操作,#向Web Component致敬view.closest(tabs).active_pa

10、nel().set_content(ui.h1(hello,world)view.find(tree#leftnav).expand(),用户触发事件处理,ui.link(click me).on(click,zopen.test:test)所有脚本提交到服务端脚本用Python处理,自定义事件：界面联动,触发删除事件：view.trigger(dataitem-removed,uid:12312,title:123123)多处处理事件：ui.script().on(dataitem-removed,zopen.test:refresh),示例：珠三角沙龙活动页面,示例：投票应用,Python

11、就是一种DSL,Python的表达能力，不比html差Bootstrap 版本升级，重写html工程浩大Python写界面，与具体实现隔离,回归桌面开发模式,一切皆python学习更简单几乎不用懂web全端开发更容易code review组件化开发：为web未来同步事件驱动：屏蔽网络部分的图形化开发：可以更多,Web Player可定制皮肤,引擎分离的额外收获,前端需求变得简单WebPlayer引擎实现并不复杂不再需要MVC框架对前端新技术，不再焦虑现有前端积累得以延续未来升级更加平滑,开源了吗？,未开源一种思想，很容易实现目前只实现的web版本UI htmlVIEW 转换JS想过基于QML的QT版本,DEMOS,谢谢大家,欢迎提问在线互动,