PyCon2014China-Zhuhai-pythonic front-end

141115 in Zhuhai
http://zoomq.qiniudn.com/CPyUG/PyCon2014China/141115zh-am2-frontend.MP3

Transcript

1. Python 让前端更轻松 基于 Python 的前端方案实践 潘俊勇 weibo.com/panjunyong easydo.cn 易度云办公
2. 前端开发的困惑
3. 桌面 C/S 时代：曾经的美好 成熟工具链支撑简单快速开发
4. 组件编程，图形化 IDE Delphi/C++Builder Visual Studio
5. PowerBuilder ：图形化，脚本化 数据库应用开发神器
6. 效果 • 更低的成本 • 对开发人员要求低 • 不分前后端 • 更高的开发效率
7. WEB 前端 – B/S 时代 桌面安装复杂，浏览器打开即用，世界进入 B/S 时代
8. B/S 模型： Thin Client 服务器 浏 览 器 输出 Html 、 Css 、 js 等 渲染展示 发起 http 请求 用户操作 输入输出终端
9. 问题：更多语言需要学习 • HTML • CSS • Javascript
10. 减少语言 • Nodejs ：后端也用 js 来开发 • 曾经的 KSS ：用类似 css 的语法写 JS • PythonJS ： – 浏览器上 Python 开发 – 翻译为 JS – 玩具性质
11. 问题：事件 变成 http 请求 • route ： url 地址和代码的映射 • 安全性 • 无状态： cookie/session
12. 用约定来简化 • Rails • Django
13. 问题：不成熟的浏览器 • Html/js/css 都在不断在发展 • Javascript 自身的缺陷 • 各种浏览器兼容问题 • 第三方组件兼容性问题
14. 还好有前端框架 • Twitter Bootstrap • Semantic UI • JQuery UI • 国内的 – 淘宝 BUI – 百度 BlendUI – …
15. WEB 前端 – 应用时代 移动端和体验要求，系统要求更开放，进入单页面应用时代
16. 单页面应用模型： Fat Client 服务器 SPA （浏览器） 输出 json 数据 渲染展示 发起 http 请求 API 用户操作 单页面应用 服务接口 SPA ： Single Page Application ，单页面 web 应用
17. 特点 • 大量逻辑前移到浏览器 • 服务端只提供 API • 对搜索引擎支持不好 • 前端特别重
18. OpenERP ：前端有多重？
19. OpenERP 6.0 ：一个 Python 应用
20. OpenERP 6.1 ：一个 JS 应用？
21. 前端 MVC 框架，蜂拥而至 • BackBone • AngularJS • Knockout • ReactJS • …
22. 前端开发工具链 • Coffeescript • Less/Sass • RequireJS/SeaJS • Bower • Yeoman • Grunt
23. 前端的迷失 • 前端开发变得异常复杂 • 各种框架轮番上阵 – 各自存在问题 – 互不兼容 – 仍未终结 • 前端程序员很渺小
24. 另外的声音：前端去框架才是趋势 去框架：让开发者开发所谓的微框架或者小框架，然后呢让它们之间能 够彼此相容，然后你竞争去采用比较好的东西
25. 我们怀念桌面时代的美好
26. 前端欠发展 • 前端太难 • 优秀的 web 前端很贵… . • 技术一定往简化发展 • 前端可能是碗青春饭
27. 怎么破？ 修修补补，还是根源解决？ 如何省时、省人、省力，技术上可持续发展？
28. 微软的尝试： ASP.NET 修修补补：如何恢复桌面时代的美好
29. 组件： ASP.NET Helpers 在网页中内嵌帮助器，简化控件的创建
30. WebForm 服务器控件：失败 内嵌在 html 中，弱化 http 协议，转为事件驱动
31. GOOGLE 的方案 GWT 、 dartlang 、 Polymer
32. GWT • 用 java 开发 web 前端：编译为 js • RIA ：全端 • 回到桌面时代 • Google Adwards, Google Wallet • 问题： – 搜索引擎不友好 – 位置逐渐被 Dart 取代
33. Dart: 替代 JS • 语言更干净 • 自带开发工具 • 支持 polymer 组件化开发 • 一种语言，支持前后端 • 可编译为高效的 js ，支持各种浏览器 • 快速进入语言排行前 20
34. Polymer: Web Component 实现 • W3C web 组件技术规范 – Custom Element – Template – Shadow DOM – HTML import • 实现： Polymer • 代表 web 未来 • 是终点吗？
35. 号外： Pyjamas • Python 版本的 GWT • 自带 UI 陈旧 • 用户不多
36. 易度前端的演进 一个小 (DiaoSi) 团队如何不被技术浪潮摧毁
37. 作为一个小公司 • 技术主管不大懂 javascript • 招不起昂贵专业的前端 • 害怕技术选型错上贼船 • 历史负担：自制前端框架 • 技术更新，成本非常高 • 如何平滑支持移动端
38. 作为一个开发平台 • 解放开发者 – 专注业务需求 – 少折腾技术 – 技术延续性 • 目标： – 力求最简 – 三脚猫功夫，也能开发 – 快速开发 – 屏蔽实现细节
39. 尝试过 backbone • 当年 Zope 时代的感觉 • 泥潭里挣扎 • 3 个月，完成前端框架 • 革命成本太高 • 放弃
40. 只能演进，而非革命 • 尽量少的人 • 最少的技能 • 快速开发 • 实用、少折腾
41. LIFE IS SHORT USE PYTHON
42. 易度前端 : Fit Client 易度 Web Player 浏览器版 易度 Mobile Player 移动版 易度 Mobile Player 移动版 易度应用 Python 渲染 UI 组件 接受 View 指令 易度 Player ：不胖不瘦，刚好 事件处理 事件处理 Web 适配 移动 适配 完全用 Python 写应用
43. 分层：前端引擎和应用 易度 Player （前端引擎）： 20% • javascript • 基础 – 整体外观风格 – 栏目导航 – 加载进度 – 出错处理 • 动态 – 组件渲染展示 – 交互事件触发 – 界面行为控制 易度应用： 80% • python • 输出 UI 界面 • 交互事件处理 • 控制界面行为
44. 前端引擎和应用 前端框架 前端框架 UI VIEW 各种 业务应用 (Python) 应用层 WebPlayer 引擎层 招一个 NB 的前端维护引擎即可 前端技术革新，只需升级引擎层
45. 使用 UI 组件 ui.panel()\ .add(ui.button(‘Click me’)\ .add(ui.text(‘Hello, world’))\ + ui.button(‘ 新增’ )\ .icon(‘add’)\ .loading(‘ 正在提交… .’)\ .on(‘click’, ‘@zopen.test:test’)
46. UI 组件示例
47. UI 组件库 使用 Python 表单类似 Bootstrap 的组件 系统所有功能组件化
48. View 指令集 • view.message(‘ 出错了’ , type='error', ) • view.modal(form, width=600) • view.layout.main().set_content(form) • view.layout.right().set_content(form)
49. 可视化制作表单 form = root.packages.get_form_obj(‘zopen.test:form’) ui.form(title, description, action)\ .fields(form)\ .button(‘submit’, ‘ 提交’ )\ .on(‘submit’, ‘@zopen.test:submit_form’)
50. 组件选择 (DOM) 和操作 # 向 Web Component 致敬 view.closest('tabs')\ .active_panel()\ .set_content(ui.h1(‘hello, world’)) view.find('tree#leftnav')\ .expand()
51. 用户触发事件处理 • ui.link(‘click me’)\ .on(‘click’, ‘@zopen.test:test’) • 所有脚本提交到服务端脚本 • 用 Python 处理
52. 自定义事件：界面联动 • 触发删除事件： view.trigger(‘dataitem-removed’, \ {'uid':12312, 'title':'123123'}) • 多处处理事件： ui.script().on('dataitem-removed', "@zopen.te st:refresh")
53. 示例：珠三角沙龙活动页面
54. 示例：投票应用
55. Python 就是一种 DSL • Python 的表达能力，不比 html 差 • Bootstrap 版本升级，重写 html 工程浩大 • Python 写界面，与具体实现隔离
56. 回归桌面开发模式 • 一切皆 python – 学习更简单 – 几乎不用懂 web – 全端开发 – 更容易 code review • 组件化开发：为 web 未来同步 • 事件驱动：屏蔽网络 • 部分的图形化开发：可以更多
57. Web Player 可定制皮肤
58. 引擎分离的额外收获 • 前端需求变得简单 • WebPlayer 引擎实现并不复杂 • 不再需要 MVC 框架 • 对前端新技术，不再焦虑 • 现有前端积累得以延续 • 未来升级更加平滑
59. 开源了吗？ • 未开源 • 一种思想，很容易实现 • 目前只实现的 web 版本 – UI  html – VIEW  转换 JS • 想过基于 QML 的 QT 版本
60. DEMOS
61. 谢谢大家 • 欢迎提问 • 在线互动 weibo.com/panjunyong