使用python开发前端

Python让前端更轻松

基于Python的前端方案实践潘俊勇/panjunyong易度云办公2021/6/271前端开发的困惑2021/6/272桌面C/S时代：曾经的美好成熟工具链支撑简单快速开发2021/6/273组件编程，图形化IDEDelphi/C++BuilderVisualStudio2021/6/274PowerBuilder：图形化，脚本化数据库应用开发神器2021/6/275效果更低的成本对开发人员要求低不分前后端更高的开发效率2021/6/276Web前端–B/S时代桌面安装复杂，浏览器打开即用，世界进入B/S时代2021/6/277B/S模型：ThinClient服务器浏览器输出Html、Css、js等渲染展示发起http请求用户操作输入输出终端2021/6/278问题：更多语言需要学习HTMLCSSJavascript2021/6/279减少语言Nodejs：后端也用js来开发曾经的KSS：用类似css的语法写JSPythonJS：浏览器上Python开发翻译为JS玩具性质2021/6/2710问题：事件变成http请求route：url地址和代码的映射安全性无状态：cookie/session2021/6/2711用约定来简化RailsDjango2021/6/2712问题：不成熟的浏览器Html/js/css都在不断在发展Javascript自身的缺陷各种浏览器兼容问题第三方组件兼容性问题2021/6/2713还好有前端框架TwitterBootstrapSemanticUIJQueryUI国内的淘宝BUI百度BlendUI…2021/6/2714Web前端–应用时代移动端和体验要求，系统要求更开放，进入单页面应用时代2021/6/2715单页面应用模型：FatClient服务器SPA（浏览器）输出json数据渲染展示发起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前端开发工具链CoffeescriptLess/SassRequireJS/SeaJSBowerYeomanGrunt2021/6/2722前端的迷失前端开发变得异常复杂各种框架轮番上阵各自存在问题互不兼容仍未终结前端程序员很渺小2021/6/2723另外的声音：前端去框架才是趋势去框架：让开发者开发所谓的微框架或者小框架，然后呢让它们之间能够彼此相容，然后你竞争去采用比较好的东西2021/6/2724我们怀念桌面时代的美好2021/6/2725前端欠发展前端太难优秀的web前端很贵….技术一定往简化发展前端可能是碗青春饭2021/6/2726怎么破？修修补补，还是根源解决？如何省时、省人、省力，技术上可持续发展？2021/6/2727微软的尝试：修修补补：如何恢复桌面时代的美好2021/6/2728组件：ASP.NETHelpers在网页中内嵌帮助器，简化控件的创建2021/6/2729WebForm服务器控件：失败内嵌在html中，弱化http协议，转为事件驱动2021/6/2730GooGLE的方案GWT、dartlang、Polymer2021/6/2731GWT用java开发web前端：编译为jsRIA：全端回到桌面时代GoogleAdwards,GoogleWallet问题：搜索引擎不友好位置逐渐被Dart取代2021/6/2732Dart:替代JS语言更干净自带开发工具支持polymer组件化开发一种语言，支持前后端可编译为高效的js，支持各种浏览器快速进入语言排行前202021/6/2733Polymer:WebComponent实现W3Cweb组件技术规范CustomElementTemplateShadowDOMHTMLimport实现：Polymer代表web未来是终点吗？2021/6/2734号外：PyjamasPython版本的GWT自带UI陈旧用户不多2021/6/2735易度前端的演进一个小(DiaoSi)团队如何不被技术浪潮摧毁2021/6/2736作为一个小公司技术主管不大懂javascript招不起昂贵专业的前端害怕技术选型错上贼船历史负担：自制前端框架技术更新，成本非常高如何平滑支持移动端2021/6/2737作为一个开发平台解放开发者专注业务需求少折腾技术技术延续性目标：力求最简三脚猫功夫，也能开发快速开发屏蔽实现细节2021/6/2738尝试过backbone当年Zope时代的感觉泥潭里挣扎3个月，完成前端框架革命成本太高放弃2021/6/2739只能演进，而非革命尽量少的人最少的技能快速开发实用、少折腾2021/6/2740LIFEISSHORT

USEPYTHON2021/6/2741易度前端:FitClient易度WebPlayer浏览器版易度MobilePlayer移动版易度应用Python渲染UI组件接受View指令易度Player：不胖不瘦，刚好事件处理事件处理Web适配移动适配完全用Python写应用2021/6/2742分层：前端引擎和应用易度Player（前端引擎）：20%javascript基础整体外观风格栏目导航加载进度出错处理动态组件渲染展示交互事件触发界面行为控制易度应用：80%python输出UI界面交互事件处理控制界面行为2021/6/2743前端引擎和应用前端框架UIVIEW各种业务应用(Python)应用层WebPlayer引擎层招一个NB的前端维护引擎即可前端技术革新，只需升级引擎层2021/6/2744使用UI组件ui.panel()\ .add(ui.button(‘Clickme’)\ .add(ui.text(‘Hello,world’))\+ui.button(‘新增’)\ .icon(‘add’)\ .loading(‘正在提交….’)\ .on(‘click’,‘@zopen.test:test’)2021/6/2745UI组件示例2021/6/2746UI组件库使用Python表单类似Bootstrap的组件系统所有功能组件化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用户触发事件处理ui.link(‘clickme’)\

.on(‘click’,‘@zopen.test:test’)所有脚本提交到服务端脚本用Python处理2021/6/2751自定义事件：界面联动触发删除事件：

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写界面，与具体实现隔离2021/6/2755回归桌面开发模式一切皆python学习更简单几乎不用懂web全端开发更容易codereview组件化开发：为web未来同步事件驱动：屏蔽网络部分的图形化开发：可以更多2021/6/2756WebPlayer可定制皮肤2021/6/2757引擎分离的额外收获前端