Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【第一季第一期】前端的深化 by 周杰

1,892 views

Published on

  • 将前端工程师划分为 开发/重构/构架 三个片,很好。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 前端开发/重构/构架工程师的划分,很认同。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

【第一季第一期】前端的深化 by 周杰

  1. 1. 前端的深化 – WebGame(一)<br />浅谈 通往资深前端的另类之路 – 周杰<br />
  2. 2. 写在开始前:<br />以下的简介,并不是要大家去开发webgame, 而是用另一种方式,来提高自己的前端技术与素养. <br />
  3. 3. 前端是一个新兴的职位, 新兴到他暂时没有专门的对应的具体的学习方式.<br /> 各个公司对前端的需求, 也是今两年才兴起. 其中,yahoo 走在了前面. taobao也不错. 关于yahoo, taobao的前端历史, 就不细说了. 说说国内搜索老大 baidu的前端历史.<br />
  4. 4. Baidu的前端历史(感谢百度瓶子提供)<br />百度最开始没有FE部门,FE现在的负责人一开始的时候在CS(client service)部门。主要的职责是负责百度“ASP”客户和WST客户(WST:面向企业级用户的网事通信息检索软件)售前售后的技术支持,当时的asp客户有硅谷动力和21cn。<br />后来随着百度转型,百度推出了自己的网站,正式从后台走向前台。CS部门的工作重心也开始由客户转向公司内部。内部开发了第一个前端模板工具,现在的FE负责人当时对这个工具进行了测试。<br />当时的CS部门的工作是:<br />1 负责新客户上线(包括shifen客户php的编写,大搜索客户cgi的编写和模板制作,协调其他部门等)。<br />2 负责已上线大客户的日常维护和监测,及时响应客户需求,记录客户投诉(模板更改,流量统计,词汇屏蔽,服务异常解决,客户更换服务器等)。<br />3 和客户建立良好关系(客户满意度调查;客户回访;服务功能升级的通报;服务升级需要客户的配合;服务系统架构更新后的联系;服务不正常时客户的联系和解释)。<br />4 审核合同中与技术和实施相关条款。<br />5 协助BD,Sales等部门进行售前支持(撰写标书,实施计划,测试文档,协助商业谈判,回答相关技术问题等)。<br />6 协助R&D进行产品升级,文档更新。<br />7 协助PM,PR进行市场宣传,产品推广(周期性更改广告语,增加相应模板等)<br />后来CS部门被分成两部分,一部分是网事通事业部,负责WST产品的技术支持,另一部分成立了PSCS部门,就是网页搜索客户服务,也就是FE的前身,负责百度网页搜索和asp客户服务工作。后来百度推出mp3,mp3的前端模板也由PSCS部门负责。<br />之后,随着公司的发展,CS部门的工作范围已经不只限于网页搜索产品线,于是更名为TS(技术支持)。随后,百度推出了图片、新闻搜索,以及贴吧。TS的工作范围也越来越大。<br />之后的很长一段时间里,TS部门一直是负责非明确的前端工作,主要是百度几乎所有的前端模板的开发工作。<br />直到最近几年,百度才开始大发展FE部门,TS也正是更名为web前端研发部,FE和后端工程师处于同等重要的地位。<br />
  5. 5. 当前前端分类<br />
  6. 6. 当前前端人员的来源<br />
  7. 7. 前端开发工程师需要掌握那些技能<br />我只看专业,看专业的 Nicholas 给出了什么样的要求.<br /><ul><li>DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  8. 8. DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  9. 9. 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  10. 10. XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  11. 11. 严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
  12. 12. 盒模型——外边距、内边距和边框之间的关系,IE < 8中的盒模型有什么不同。
  13. 13. 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  14. 14. 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  15. 15. HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
  16. 16. JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。 </li></li></ul><li> 他太简单了, 以至于, 大家想保住自己的饭碗, 就得努力了. 既然咱们可以从其他的行业转过来, 那别人也是肯定可以的.<br /> 所以咱们得想办法深化自己, 使得自己不可替代 , 成为构架那样的人群.<br />太简单啦 !!!<br />
  17. 17. 怎么样深化前端<br />看看Baidu的 西红柿,怎么样转叙他老大对他说的话<br />1 通读ECMA2.6.2<br />2 把这些源码都读一遍<br />Google Closure<br />JQuery<br />ckEditor<br />3 再去研究一下三大浏览器的内核<br />
  18. 18. 我们不做码农<br />回顾下上面的话, 我们再看看, 前端到底是要做什么 <br />代码效率<br />(提高页面上的代码的效率)<br />代码兼容<br />(提高页面上的代码兼容性)<br />浏览器特性<br />(判断各个浏览器的特性,为一些特别的事件增加支持)<br />前端开发工程师 与开发的配合<br />1. 数据的基本传递 (xml,json,jsonp ...)<br />2. 高效的数据操作 (渲染,事件,方法 ...)<br />3. 安全,稳定的数据管理 (隐蔽,持续 ...)<br />
  19. 19. 交互型webgame的需求<br />webgame另一种的提升方式.<br />1. 需要高效的dom操作<br /> 远远超过一个普通网页的水准,而且,都是属于动态的。<br />2. 需要比较广的代码兼容<br /> 成熟的产品,需要最大限度的照顾到兼容方面的问题,才会有市场。<br />3. 需要对各个浏览器的特性, 有所了解与掌握<br /> 不同的浏览器特性,可以使得游戏具备一些特殊的可玩性。<br />然后, 与后端开发人员的配合工作<br />1. 前端人员不仅仅接受数据的基本传递, 还需要对数据进行加工处理与返回<br />2. 数据也并不仅仅只是文本类了, 还可以杂和一些需要处理的函数以增加在数据上的安全性(尽管这些数据都可以用一些插件看得到,但是,如果赋以其他的配合函数配合的话,可以增加其复杂度和安全性)<br />3. 安全,稳定, 在以上两方面都有涉及了. 前端不能够做到完好的安全性,在此基础上,更多的需要前后端的配合, 来让安全性得以更加提高一些.<br />
  20. 20. 牛逼的第一章结语<br />webgame, 显然比起单纯的码农式提高, 增加了趣味性, 并且更加偏重于解决问题的方案(往往前端一个问题, 有很多不同的解决方案, 而在更加注重效率的webgame上, 我们更加容易获得我们需要的<br />

×