Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PyCon2014China-Zhuhai-pythonic front-end
Search
Zoom.Quiet
November 17, 2014
Technology
0
95
PyCon2014China-Zhuhai-pythonic front-end
141115 in Zhuhai
http://zoomq.qiniudn.com/CPyUG/PyCon2014China/141115zh-am2-frontend.MP3
Zoom.Quiet
November 17, 2014
Tweet
Share
More Decks by Zoom.Quiet
See All by Zoom.Quiet
PyCon2014China-Zhuhai-high performance
zoomquiet
0
140
PyCon2014China-Zhuhai-meta programming
zoomquiet
1
110
PyCon2014China-Zhuhai-bpm.py
zoomquiet
0
87
PyCon2014China-Zhuhai-luna kv db
zoomquiet
0
85
PyCon2014China-Zhuhai-seed studio
zoomquiet
0
71
PyCon2014China-Zhuhai-Docker Registry Build By Python
zoomquiet
0
84
PyCon2014China-Zhuhai-jeff
zoomquiet
0
65
DevFest2014-Zhuhai-Polymer
zoomquiet
0
380
TEDxJLUZH MOMENT future
zoomquiet
0
340
Other Decks in Technology
See All in Technology
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
SCSAから学ぶセキュリティ管理
masakamayama
0
140
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
All you need to know about InnoDB Primary Keys
lefred
0
120
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
FastConnect の冗長性
ocise
1
9.6k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
BBQ
matthewcrist
86
9.5k
How to Ace a Technical Interview
jacobian
276
23k
GitHub's CSS Performance
jonrohan
1030
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Making Projects Easy
brettharned
116
6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Transcript
Python 让前端更轻松 基于 Python 的前端方案实践 潘俊勇 weibo.com/panjunyong easydo.cn 易度云办公
前端开发的困惑
桌面 C/S 时代:曾经的美好 成熟工具链支撑简单快速开发
组件编程,图形化 IDE Delphi/C++Builder Visual Studio
PowerBuilder :图形化,脚本化 数据库应用开发神器
效果 • 更低的成本 • 对开发人员要求低 • 不分前后端 • 更高的开发效率
WEB 前端 – B/S 时代 桌面安装复杂,浏览器打开即用,世界进入 B/S 时代
B/S 模型: Thin Client 服务器 浏 览 器 输出 Html
、 Css 、 js 等 渲染展示 发起 http 请求 用户操作 输入输出终端
问题:更多语言需要学习 • HTML • CSS • Javascript
减少语言 • Nodejs :后端也用 js 来开发 • 曾经的 KSS :用类似
css 的语法写 JS • PythonJS : – 浏览器上 Python 开发 – 翻译为 JS – 玩具性质
问题:事件 变成 http 请求 • route : url 地址和代码的映射 •
安全性 • 无状态: cookie/session
用约定来简化 • Rails • Django
问题:不成熟的浏览器 • Html/js/css 都在不断在发展 • Javascript 自身的缺陷 • 各种浏览器兼容问题 •
第三方组件兼容性问题
还好有前端框架 • Twitter Bootstrap • Semantic UI • JQuery UI
• 国内的 – 淘宝 BUI – 百度 BlendUI – …
WEB 前端 – 应用时代 移动端和体验要求,系统要求更开放,进入单页面应用时代
单页面应用模型: Fat Client 服务器 SPA (浏览器) 输出 json 数据 渲染展示
发起 http 请求 API 用户操作 单页面应用 服务接口 SPA : Single Page Application ,单页面 web 应用
特点 • 大量逻辑前移到浏览器 • 服务端只提供 API • 对搜索引擎支持不好 • 前端特别重
OpenERP :前端有多重?
OpenERP 6.0 :一个 Python 应用
OpenERP 6.1 :一个 JS 应用?
前端 MVC 框架,蜂拥而至 • BackBone • AngularJS • Knockout •
ReactJS • …
前端开发工具链 • Coffeescript • Less/Sass • RequireJS/SeaJS • Bower •
Yeoman • Grunt
前端的迷失 • 前端开发变得异常复杂 • 各种框架轮番上阵 – 各自存在问题 – 互不兼容 –
仍未终结 • 前端程序员很渺小
另外的声音:前端去框架才是趋势 去框架:让开发者开发所谓的微框架或者小框架,然后呢让它们之间能 够彼此相容,然后你竞争去采用比较好的东西
我们怀念桌面时代的美好
前端欠发展 • 前端太难 • 优秀的 web 前端很贵… . • 技术一定往简化发展
• 前端可能是碗青春饭
怎么破? 修修补补,还是根源解决? 如何省时、省人、省力,技术上可持续发展?
微软的尝试: ASP.NET 修修补补:如何恢复桌面时代的美好
组件: ASP.NET Helpers 在网页中内嵌帮助器,简化控件的创建
WebForm 服务器控件:失败 内嵌在 html 中,弱化 http 协议,转为事件驱动
GOOGLE 的方案 GWT 、 dartlang 、 Polymer
GWT • 用 java 开发 web 前端:编译为 js • RIA
:全端 • 回到桌面时代 • Google Adwards, Google Wallet • 问题: – 搜索引擎不友好 – 位置逐渐被 Dart 取代
Dart: 替代 JS • 语言更干净 • 自带开发工具 • 支持 polymer
组件化开发 • 一种语言,支持前后端 • 可编译为高效的 js ,支持各种浏览器 • 快速进入语言排行前 20
Polymer: Web Component 实现 • W3C web 组件技术规范 – Custom
Element – Template – Shadow DOM – HTML import • 实现: Polymer • 代表 web 未来 • 是终点吗?
号外: Pyjamas • Python 版本的 GWT • 自带 UI 陈旧
• 用户不多
易度前端的演进 一个小 (DiaoSi) 团队如何不被技术浪潮摧毁
作为一个小公司 • 技术主管不大懂 javascript • 招不起昂贵专业的前端 • 害怕技术选型错上贼船 • 历史负担:自制前端框架
• 技术更新,成本非常高 • 如何平滑支持移动端
作为一个开发平台 • 解放开发者 – 专注业务需求 – 少折腾技术 – 技术延续性 •
目标: – 力求最简 – 三脚猫功夫,也能开发 – 快速开发 – 屏蔽实现细节
尝试过 backbone • 当年 Zope 时代的感觉 • 泥潭里挣扎 • 3
个月,完成前端框架 • 革命成本太高 • 放弃
只能演进,而非革命 • 尽量少的人 • 最少的技能 • 快速开发 • 实用、少折腾
LIFE IS SHORT USE PYTHON
易度前端 : Fit Client 易度 Web Player 浏览器版 易度 Mobile
Player 移动版 易度 Mobile Player 移动版 易度应用 Python 渲染 UI 组件 接受 View 指令 易度 Player :不胖不瘦,刚好 事件处理 事件处理 Web 适配 移动 适配 完全用 Python 写应用
分层:前端引擎和应用 易度 Player (前端引擎): 20% • javascript • 基础 –
整体外观风格 – 栏目导航 – 加载进度 – 出错处理 • 动态 – 组件渲染展示 – 交互事件触发 – 界面行为控制 易度应用: 80% • python • 输出 UI 界面 • 交互事件处理 • 控制界面行为
前端引擎和应用 前端框架 前端框架 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(form,
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_panel()\
.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.te st:refresh")
示例:珠三角沙龙活动页面
示例:投票应用
Python 就是一种 DSL • Python 的表达能力,不比 html 差 • Bootstrap
版本升级,重写 html 工程浩大 • Python 写界面,与具体实现隔离
回归桌面开发模式 • 一切皆 python – 学习更简单 – 几乎不用懂 web –
全端开发 – 更容易 code review • 组件化开发:为 web 未来同步 • 事件驱动:屏蔽网络 • 部分的图形化开发:可以更多
Web Player 可定制皮肤
引擎分离的额外收获 • 前端需求变得简单 • WebPlayer 引擎实现并不复杂 • 不再需要 MVC 框架
• 对前端新技术,不再焦虑 • 现有前端积累得以延续 • 未来升级更加平滑
开源了吗? • 未开源 • 一种思想,很容易实现 • 目前只实现的 web 版本 –
UI html – VIEW 转换 JS • 想过基于 QML 的 QT 版本
DEMOS
谢谢大家 • 欢迎提问 • 在线互动 weibo.com/panjunyong