NextWind前端体系介绍

PHPWind9前端体系介绍

Transcript

1. NextWind 前端体系介绍 2012-8-2 陈超群
2. 思考：到底什么是前端开发 •HTML •CSS •JavaScript 这只是前端开发最重要的技能
3. 前端仔的工作内容 • 视觉还原（ HTML 、 CSS ） • 交互实现（ JavaScript ） • 浏览器兼容性（ HTML 、 CSS 、 JavaScript ） • 页面可访问性（ SEO 、浏览器、读屏软件）
4. 前端开发要考虑的群体 • 正常人 • 非正常人 • 浏览器 • 搜索引擎 • 读屏软件
5. NextWind 前端的重点 • 需要开发规范 • 需要核心类库 / 框架 • 需要开发文档 • 代码的可维护性 • 页面的可访问性 • 功能的可扩展性 • 高性能的前端体验
6. http://www.windframework.com/index.php/ 前端开发规范
7. Breeze • 需要专人来开发维护 • 质量比不过知名开源框架 • 开源框架在国内的推进与发展不容易 • 第三方开发、项目新进成员的学习成本 Breeze是2年前PHPWind中筹备开发的⼀一个JS框架，但 是经过了⼏几个月的开发，毅然决定放弃之，主要的原因：
8. JavaScript 框架、类库的选择
9. 46% 12% 9% 9% 8% 7% 5% 5% javaScript 库使用概况统计 jQuery Facebook for Websites jQuery UI SWFObject Facebook SDK jQuery Cycle Twitter Platform MooTools http://trends.builtwith.com/javascript
10. 拥抱 jQuery • 世界上最流行的 js 类库 • 有着最多的使用人群 • 庞大的技术社区支持 • 丰富的开源插件 • 开源、免费，使用 MIT & GPL 双协议 http://jquery.org/license/ 放弃 Breeze 后，首先想到的就是在 jQuery 与 YUI 之间选择一 个，经过几番思考，选择了 jQuery 。 http://docs.phpwind-inc.com/read.php?tid-858.html
11. 最近发现大客户们都拥抱 jQuery • 化龙苍 • 新昌信息港 • 威锋网 • 厦门小鱼
12. JavaScript Loader 为解决浏览器加载 JS 的阻塞浏览器渲染的问题，我们需 要一个脚本加载器。
13. 传统的脚本加载方式 Apple.com 首页
14. 视频： phpwind.net 首页的加载过 http://httparchive.org/viewsite.php?pageid=2235188 （ PW 首页） http://httparchive.org/viewsite.php?pageid=2234050 （ DZ 首页）
15. JavaScript Loader 的选择 •LabJS •ControlJS •HeadJS •RequireJS （标准化 JS 模块加载器） •SeaJS （标准化 JS 模块加载器） •...... •N 多 JS
16. WindJS 诞生 • 建立在 HeadJS 之上 • 做了部分精简与修改 • 含注释的开发版 16K •Gzip 压缩后 2.6K
17. WindJS 核心 API •Wind.js—— 异步、并行加载脚本资源 •Wind.ready——DomReady 方法 •Wind.css—— 加载 css 资源 •Wind.tmpl 方法 —— 微型 javascript 模板引擎 •Wind.use—— 使用别名的方式加载常用 JS
18. 别名加载机制 常用脚本组件，我们不想去根据 URL 加载。一个 web 产 品，它的 URL 是多资多样的，如果 URL 变掉了，那么所 有引用的地方全部得改，所以我们对常用的 JS 组件，并 不直接加载其地址，而是使用一个别名来实现模块化管 理。
19. 简单代码示例
20. 在 wind.js 里定义别名
21. 问题来了 • 高性能的前端部署，怎么能不压缩前端代码，怎么能不合并请 求？ • 压缩后怎么做二次开发？
22. 前端性能优化的制约 • 无法把握、控制站长的服务器 • 熟知的雅虎 34 条性能优化军规，好多无法实现 http://developer.yahoo.com/performance/rules.html http://www.ha97.com/2710.html （中文版）
23. HTTP 头 Expires 不能做 CDN 不能做 GZip 不能做 HTTP 头 Cache-control 不能做 代码压缩不能做 怎么办？
24. 选择适合我们自己的方案
25. 前端资源目录 // 压缩后的 // 开发目录（源代码） // 与业务相关的 js 代码文件 //ui 组件库 // 非 ui 组件库 // 富文本编辑器 // 国际化配置文件
26. 开发模式 / 线上模式 通过后端输出开关配置，来确定是使用 build 目录还是 dev 目录，在上线之前通过 build 工具把代码 copy 到 build 目录。
27. 自动版本参数
28. 前后端开发约定 • 前端只负责展现数据和提交数据，不做任何业务逻辑的判断 • 后端不输出任何带有脚本的代码 •AJAX+JSON , 并不是 8.x 中的伪 AJAX+XML http://www.windframework.com/index.php/ 前后端开发配合约定
29. 前端工具 http://ued.phpwind-inc.com/index.php/ 前端工具集合
30. 示例演示
31. NextWind 富文本编辑器介绍
32. JS 框架和编辑器哪个难？
33. NextWind 编辑器需求 • 有插件扩展机制 • 建立在 jQuery 基础之上 • 需要实现 UBB 代码编辑 • 一系列 NextWind 特有的功能：出售、隐藏、表情等等 • 可作为通用的富文本编辑器
34. 思考如何开发编辑器 考查了一圈 ckeditor 、 tinymce 、 ueditor 、 kissyeditor 、 kindeditor 、 xheditor ，发现都不合 适。
35. 编辑器结构 与 NextWind 业务相关的功能，全部作为插件调用，可灵活定制。 可自主开发并替换默认皮肤。
36. 基本的调用方式
37. 可访问性 • 应付极端环境下的正常浏览需求 • 结构、表现、行为跨终端跨平台兼容支撑 • 保障残障人士无障碍信息获取 • 强化搜索引擎友好 http://rexsong.com/webdesign/accessibility/
38. 听听特殊用户的声音 • 盲人用户体验谈 -- 写在 phpwind8.7 正式发布前 • 请官方注意：默认模板中的很多 img 元素没有 alt 属性
39. NextWind 页面可用性 & 无障碍规范指南
40. 无障碍开发示例 http://www.zhangxinxu.com/wordpress/ 2012/03/wai-aria- 无障碍阅读 /
41. 前端开发中遇到的问题 • 前端资源仅缺，作为公共资源经常被拉去支援别的项目 • 时间不够，需求都做不完， BUG 也改不完，很多亮点功 能没时间做。
42. 尚未完成 • 图片懒加载 •Flash 头像上传 • 前端开发文档
43. HTML5 的展望 •HTML5 新标签 •HTML5 新的表单 • 语音输入 • 文件拖拽上传 • 编辑器内图片直接粘贴上传 • 桌面通知 •Page Visibility • 地理定位
44. CSS3 的展望 •CSS3 Selectors • 动画、圆角、阴影、渐变、 web 字体，等等等等 •Responsive Web Design
45. 关注浏览器市场 http://tongji.baidu.com/data/browser/
46. 在摸索中前进
47. Thanks!