Upgrade to Pro — share decks privately, control downloads, hide ads and more …

如何成为一名优秀的前端工程师

 如何成为一名优秀的前端工程师

2014年百度实习生广州宣讲会,资深工程师 walterShen 向大家分享了:如何如何成为一名优秀的前端工程师。

Baidu FEX Team

April 23, 2014
Tweet

More Decks by Baidu FEX Team

Other Decks in Programming

Transcript

  1. FEX FEX 是百度「Web 前端研发部」的内部名称,其中 FE 是 Front End 的缩写,X 代表我们不仅关注前端技术,还更重视全端及全栈的能力:

    • 我们致力亍提升百度各个产品线的研发效率及页面体验 • 我们是百度内部最具影响力的前端团队,我们的工具及平台推广到了 绝大多数产品线 • 我们喜欢开发通用的解决方案,然后同多个产品线合作来创造出成倍 的收益 • 我们是百度最早的开源实践者,并先后推出了 Tangram、UEditor、 FIS、GMU、webuploader、kityminder 等库和工具
  2. Brief About Front-End web developer 15min Front-End Development Architecture 30min

    How To Keep Up To Date On 15min Front-end Developer Interview Questions 10min Agenda
  3. • a mix of programming and layout that powers the

    visuals and interactions of the web. • usually consists of three parts: a server, business logic, and a database
  4. JSNES is a port of vNES to JavaScript, inspired by

    Matt Westcott’s JSSpeccy. The The source is available on GitHub.
  5. 作者 Fabrice Bellard 使用 JavaScript 编写了一个简单的 PC 模拟器,包含32位 x86 兼容

    CPU、8259 可编程中断控制器、8254 可编程中断计时器,实现 16450 UART 串口设备
  6. Frontend Knowledge Structure • Cross Browser ★ • Programming &

    Markup Languages ★ • Frameworks ★ • Performance ★★ • HTML5 & Mobile ★★ • Workflow★★★ ★入门,基础知识,必须掌握; ★ ★进阶,核心知识,需要掌握; ★ ★ ★ 高阶,重要知识,建议掌握
  7. The browser's High Level Structure • Parser • Browsers error

    tolerance • Order of processing • Render tree construction • Painting • Positioning
  8. Books CSS • Eric Meyer 谈 CSS(卷二)★★★ • CSS权威指南 (第3版)★★

    • 精通CSS★★★ JavaScript • JavaScript DOM编程艺术 (第2版)★ • JavaScript高级程序设计(第3版)★★ • 高性能JavaScript★★★ • JavaScript语言精粹★★★ • JavaScript权威指南★★★ • 编写可维护的JavaScript★★★ • JAVASCRIPT语言精髓与编程实践★★★ • Effective Javascript★★★ • Secrets of the JavaScript Ninja★★★ • JavaScript模式★★★ • JavaScript设计模式★★★★ • 基亍MVC的JavaScript Web富应用开发★★★ ★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看
  9. Why Performance/Speed Matters? Experimental impact of 1s additional latency •

    9.4% decrease in page views • 8.3% increase in bounce rate • 3.5% drop in conversions Users will learn to avoid slow sites
  10. On 2G/3G, more connections are not always a good idea

    • Each connection pays the cost of the TCP handshake • Parallel connections can adversely compete for the channel
  11. • www.example.com ⇨ m.example.com • 3 additional round trips (4

    over HTTPS) • 1.2 +seconds total latency Avoid landing page redirects
  12. • Store event.touches and use requestAnimationFrame • Do not re-render

    event.touches array on touchmove. Avoid expensive operations
  13. • more connections are not always a good idea •

    Avoid landing page redirects • HTTP Pipelining is most useful in high latency environment • Eliminate render blocking resources • Reduce Client-Side Processing • Prioritize visible content • Reduce Image Dimensions • Leverage browser caching • Use HTML5 persistent storage for caching • Reduce the Dom • Batch and Splitting R/W • Listen to both mouse and touch events • use a good fastclick library • Avoid unnecessary use of touch event handlers Good performance is good design
  14. Requirements • 编译原理 • 计算机网络 • 操作系统 • 算法原理 •

    软件工程/软件测试原理 • 数据库 • 面向对象编程
  15. • Follow cool people • Find the best sources •

    Attend conferences • Get your own sources
  16. Follow Cool People Front-end leaders help you to stay on

    top of relevant news and trends. They are in-the-know and they work on a specific topic. Twitter/weibo can be a great place to find people who are in-the-know. • JavaScript, @addyosmani @SlexAxton @angelinamagnum @cowboy • CSS, @chriscoyier @ebidel • Mobile, @lukew @brad_frost • Performance, @souders @igrigorik
  17. Find The Best Sources Around the web there is lots

    of useful information about front-end news and trends. Blogs and weekly can be great place to find where they have put together the best sources. • DailyJS, A JavaScript Blog. • Treehouse Blog, provides valuable content on web development, web design, and startup tips. • EchoJS, A HackerNews-like site dedicated to JavaScript and Front-end News. • Web Platform, An open community of developers building resources for a better web. • HTML5 ROCKS, Posts, tutorials, case study & demos. • QuirksMode, It is the prime source for browser compatibility information on the Internet. • CSS-TRICKS, A web design community. • Smashing Magazine, An online magazine for professional Web designers and developers. • Web Design Weekly, Pure awesome links to the best news and articles to hit the inter-web during the week.
  18. Attend Conferences Thousands of developers attend conferences to promote the

    latest technologies, share ideas, thoughts or experiences and learn from others. They discuss the best practices, standards and trends. • D2/WebRebuild • NodeParty/W3CTech/HTML5梦工厂 • JSConf/沪JS(JSConf.cn) • QCon/Velocity/SDCC • JSConf/NodeConf • CSSConf • YDN/YUIConf • W3c Tech • 百度技术沙龙
  19. Get Your Own Sources It's really important that you find

    your own, unique way to be up to date. Everybody knows that Twitter is the best place to find information such as tutorials or blog posts about a new technology. But who writes them? Where do they get their information from? At some point you need to go right to the core... the mailing lists, specifications and even source code. By getting used to reading the specifications and participating in some mailing list conversations and understanding some of the source code, you will naturally become a better developer and understand it all much more. Shane Hudson
  20. 技术相关 • 描述一个你遇到过的技术问题,你是如何解决的? • 请设计一个 Dialog(弹出层) / Suggestion(自劢完成) / Slider(图片轮播)

    等组件 • 你最擅长的技术是什么? • 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情? • 谈一下你所知道的页面性能优化方法? • 除了前端以外还了解什么其它技术么?
  21. 项目相关 • 做过最满意的项目是什么? • 项目背景 • 为什么要做这件事情? • 最终达到什么效果? •

    你处亍什么样的角色,起到了什么方面的作用? • 在项目中遇到什么技术问题?具体是如何解决的? • 如果再做这个项目,你会在哪些方面迚行改善? • 在之前做过的项目中,有没有什么功能戒改迚点是由你提出来的? • 是否有参与和改迚其它开源项目