某网站最新WEB前端应用及发展讲义.ppt

1 首页 css sprite 截图 A - * TMS 的基础是 淘斯基，交互组件规范 ，前端规范，栅格化 * 最大的特点： Logo 和搜索居中，强化品牌和搜索 * 2006年前端人数为0 虽然我是2006年底入职，但是入职时的Title还是Java工程师 * * 为什么说严峻： 淘宝有了收费的系统（广告，商户，淘宝直通车），付费用户要求高 * 优化项目以 ySlow 结果为目标 * 首页1000万PV ，首页减少1k，节约近300元人民币 淘宝最核心的页面体积平均在500K以上，很多频道页面2M左右，有不少的优化空间 * * 第六十二页，共六十四页。 谢谢 第六十三页，共六十四页。 内容总结 淘宝网前端应用与发展。Nickname: “小马”,。Job: “前端工程师”。Twitter: “@zhaozexin”。问题: HTML嵌套错误或标签未关闭。div id=“fp:slide” class=“tb-slide”。div id=“J_Slide” class=“tb-slide”。小结 (2007)。首页 JavaScript/CSS 内嵌。。完善规范，将规范转化为工业化工具(TMS)。建立开源 Kissy 框架。T @ 2010。淘宝网前端 @ 2010。问题与挑战 @ 2010。Kissy Core 重写，不再依赖YUI 第六十四页，共六十四页。 开始之前，我想先做一个了解： 有多少人是前端工程师？ 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. 脚本应用增加，需要一个强大易用，能被广泛接受的的工具类库 * 产品经理根据运营和用户需求，设计产品，并提出 产品需求说明 交互设计师? Prototype 视觉设计师 ? Mock-Up 前端工程师 ? Demo 之前：可选的用户研究过程 接下来： demo 交付后台工程师，嵌入业务逻辑，根据使用的模板语言，转成模板，淘宝使用Velocity * 交互设计师们开始使用 Axure，快速创作HTML原型，重点：可输出交互的效果 与视觉设计师约定标注规范 淘斯基：淘宝视觉规范 * * 自行开发：资源不足，没有维护精力，类库不是简单的把常用的函数封装在一起，需要考虑组件化，设计API，帮助文档， * 惊艳，野性 （2005年开始接触和应用Prototype，脚本原来可以写成这样） 耳熟能详的“$”函数 代码风格类Ruby，新手不易上手 文档缺乏 * Dojo：乖巧 灵活 易用 * Dojo： 强大，复杂，笨重 它的设计初衷就是：不光只运行在浏览器的脚本环境中，甚至像pdf/rhino这些也拥有脚本环境的地