淘宝网web前端应用及发展.ppt

最大的特点： Logo 和搜索居中，强化品牌和搜索 * 2006年前端人数为0 虽然我是2006年底入职，但是入职时的Title还是Java工程师 * * 为什么说严峻： 淘宝有了收费的系统（广告，商户，淘宝直通车），付费用户要求高 * 优化项目以 ySlow 结果为目标 * 首页1000万PV ，首页减少1k，节约近300元人民币 淘宝最核心的页面体积平均在500K以上，很多频道页面2M左右，有不少的优化空间 * * * * 取消了导航（参照yahoo)。 大淘宝的首页 * 预计前端人员将达到70人 * 淘宝自行开发的脚本框架架构 前端框架逻辑 更加关注性能：性能指数建设 前端工程师 - 云端工程师 * YUI3 复杂 Kissy ： Kissy An Enjoyable UI Library / 愿景：小巧灵活，简洁实用，使用起来让人感觉愉悦。 Keep It? Simple Stupid,? Short? Sweet,? Slim? Sexy... * * Html5 压缩： 令人欣喜的就是我们测试了所有的主流浏览器，包括IE6，都能无bug的支持这样的简化 淘宝性能指数： 应用性能 | 网络性能 | 渲染性能 性能自动化测试: xvfb + yslow + showslow 性能优化涉及到更多的部门： 开发部门/底层开发部门/测试部门/数据监控部门，特点：由前端驱动 * 脚本禁用时，看到的淘宝首页 杯具：ipad 不支持，前端的探索永无止境 有人可能会问： 前端的职责是维护可用性和可访问性，这样做放弃了可访问性， 权衡的过程： 绝大多数的用户激活脚本支持； Web开发趋势是脚本应用日益增加 * 性能优化： 以前的理解就是减少什么或者弄小什么，异步，缓存就完了。 但有时候这样做了，用户也不一定觉得快，如何做到渐进渲染，让用户能尽快看到内容。代码上真的还需要精雕细琢。 * 淘宝的实践其实是和淘宝的需求与发展关联在一起的，并不一定像公式一样适用于其他网站 这个实践之路也不是一个闭环，规范每年都在更新，工具也每年都在改善。 * 拿来主义 自力更生 追求领先 * 前端工程师 -》 云端工程师 * 作为一个佐证: 淘宝的“赢在淘宝”活动，在淘宝内部，最终第一第二第三名都是前端出品的项目 * * 谢谢 开始之前，我想先做一个了解： 有多少人是前端工程师？ PPK说过：Web前端的开发需要更多后端工程师的理解和加入，因为后端开发历史比较长，开发和架构的经验都比较丰富。大家的理解和加入能更多促进Web开发技术的发展。 而且我相信，越来越多的后端开发工程师在工作中会慢慢意识到前端技术的重要性 * 简单介绍淘宝前端发展史 这些实践经验与心得并不仅是前端的尝试，其实很多时候是整个UED在共同努力 * 做了5、6年的Java开发工程师，淘宝第一个前端工程师 为了做这个PPT，专门去搜索:2001年YAHOO第一次开始招聘F2E 张克军：我们是中国第一代前端，难免有质疑，有困难，但我也同样感觉很自豪 向下一位主讲致敬 * 首页是一个网站的门脸，从这张脸上可以看出网站业务和技术的变迁 2003年淘宝第一版首页 现在来看比较土，相当于静态页面 * 稍微复杂了一些，确定橙色调 还是静态页面 * 2005年淘宝的 Logo 确定，没有确定的字体，画出来的。 出现了淘宝标志性的橙色导航 战胜了易趣 值得一提：Web标准引入，开始使用 Div+CSS 制作页面。而这也是我入职淘宝的一个机缘 承志，招聘 * 网页内容变得更多，页面也变得更大 值得一提：开始引入CMS内容管理系统，CMS系统是购买的 * 首页和频道由会Web标准的UI设计师兼职完成的（前端的出身来源之一： UI设计师） 后台系统、我的淘宝都是由开发人员自己弄的 我虽然是2006年底入职，但入职时的岗位仍然是Java工程师，因为公司的HR系统里还没有“前端工程师”岗位，一直到2007年初，我的岗位名称才更改为前端工程师 * 页面从760-950(为什么950？因为yahoo 950，马首是瞻) 页面内容更繁杂，因为繁多的运营促销与活动，淘宝网站页面上需要更多入口和展示空间 * 一些UI设计师转为了前端工程师，正式推出UED招聘，比较新颖的招聘形式，得到大家的认可。 * 多一个岗位，开发过程中就多了一个环节，痛苦的磨合过程 1. UED有视觉，交互分工，包括与开发人员的协作 2. 网页需要动起来，需求：信息动态显示（最新成交），动画效果 3. 脚本应用增加，需要一个强大易用，能被广泛接受的的工具类库 * 产品经理根据运营和用户需求，设计产品，并提出 产品需求说明 交互设计师? Prototy