1 / 40

架起前端和开发的桥梁

架起前端和开发的桥梁. 淘宝网前端开发工程师：张挺. About Me. Sina weibo: 雪霁霜飞_张小挺 email: czy88840616@gmail.com twitter: @czy88840616 github: https://github.com/czy88840616. 大纲. 前端和开发如何更好的协作 Demo交付、数据约定 未来前端们的开发模式. 淘宝背景. 长期处于基于html的协作方式 Demo准备和更新 Demo交付和嵌套. 问题. 先说说困难. 。。。. 集团开发使用webx.

phillipa-mark
Download Presentation

架起前端和开发的桥梁

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 架起前端和开发的桥梁 淘宝网前端开发工程师：张挺

  2. About Me • Sina weibo: 雪霁霜飞_张小挺 • email: czy88840616@gmail.com • twitter: @czy88840616 • github: https://github.com/czy88840616

  3. 大纲 前端和开发如何更好的协作 Demo交付、数据约定 未来前端们的开发模式

  4. 淘宝背景 • 长期处于基于html的协作方式 • Demo准备和更新 • Demo交付和嵌套

  5. 问题 先说说困难 。。。

  6. 集团开发使用webx • 庞大的开发环境+maven库 • 数据库 问题 先说说困难

  7. 那怎么解决问题呢？ • 不写demo。。 • php(jade)转vm • 直接写vm？

  8. 前端更专注本职工作(html/css/js)，开发更专注业务逻辑前端更专注本职工作(html/css/js)，开发更专注业务逻辑 省去开发套用demo的时间 模板更新维护统一 php velocity 对比 vs

  9. 希望直接提交vm作为demo交付 YY 有一个东西 不需要开发套页面 前端demo保持和线上页面一致 可以直接测试vmcommon

  10. 目标：像开发一样运行vm 思考 • 需要一个轻量级的伪webx框架 • 可以解析velocity • 方便的数据格式 • 部分模拟逻辑

  11. 直接使用json，然后json -> java object 思考 • 数据问题 • no sql && db • no java object

  12. 思考 • 难度有点大，还是从veloicty入手 • 使用velocity • groovy解析json • groovy运行动态脚本

  13. version 1

  14. ResourceLoader - 资源加载 • Tools System - 工具类 • Render System - 渲染机制 Velocity包含 实现和改造

  15. loader改造 FileResourceLoader TemplateResourceLoader

  16. loader改造 TemplateResourceLoader Macro Screen Control Layout #parse(‘control/a.vm’) #control.setTemplate(‘a.vm’)

  17. Tools改造 ControlTool Tms Tool Cms Tool Uri Tool CsrfTokenTool RundataTool pageCacheTool CsrfTokenTool CsrfTokenTool

  18. Tools改造 ControlTool

  19. $control.setTemplate • 作用域context处理 • 调用Render System Tools改造 ControlTool

  20. Render System 改造 VM Data + =

  21. Render System 改造 Data

  22. $a.b.c Render System 改造 Data

  23. $a.b.c Render System 改造 { Data

  24. 用户体验第一 上手慢 模拟累 不喜java 调查

  25. + 提供实时渲染velocity API 提供webx目录分析和web界面 思考 大家不喜欢java

  26. + version 2

  27. API改造 API Template Tools Request Data Params

  28. API改造 API velocity velocity velocity velocity velocity velocity velocity velocity velocity Instace pool

  29. client 处理 API Client

  30. client 处理 Client 路由资源 解析模板 查找模板 Parser Finder Router preprocessor

  31. 解析模板依赖 便携的小功能（代理） 编码处理 数据处理 独角兽系统支持 自定义数据解析合并 Velocity多实例处理 Webx工具类接入 html Vm+data 框架 Client Server

  32. 成果 客户端 https://github.com/czy88840616/avalon-node

  33. 成果 客户端

  34. 成果 服务端 https://github.com/czy88840616/vcenter POST API http://v.taobao.net/render.do 接受模板和数据 => 合并处理 => 返回html

  35. DEMO

  36. 继续YY 现在看起来已经比较简单了。 那么 有办法再简单一点么？

  37. hsf Java web data 继续YY 假如数据不需要模拟呢？ HTTP

  38. data 继续YY

  39. 是不是很美好 继续YY 需要开发、前端等共同努力

  40. The End && thanks && QA

More Related