Front end engineering, YUI Gallery, and your future
•Download as KEY, PDF•
7 likes•1,832 views
A brief history of front end engineering and why understanding the f2e technology stack is important for developers. An introduction to YUI 3 and the YUI Gallery project and overview of how contributing to OSS is good for the resume and good for the soul.
More Related Content
Similar to Front end engineering, YUI Gallery, and your future
Similar to Front end engineering, YUI Gallery, and your future (20)
More from Luke Smith
Recently uploaded
Recently uploaded (20)
Front end engineering, YUI Gallery, and your future
- 1. Front end engineering And how it will impact your future Luke Smith lsmith@yahoo-inc.com yuilibrary.com: lsmith twitter: @ls_n
- 2. • F2E Discipline • YUI Library • The future
- 3. Brief history of front end engineering
- 4. Browser wars 1994 - 2000 • Very young web • Immature concept of what a browser is • Rush to push features • Many many bugs • Internet Explorer wins
- 5. Reflective years 2001 - 2005 • Dot com bubble bursts • Internet Explorer 6 • Many more people on the web • Emergence of professional web developers
- 6. The web grows up 2006 - 2007 • Explosion in new web content • Internet Explorer 7, Firefox, Safari, Opera • Professional front end engineering • The web development environment is bad • JavaScript libraries
- 7. Browser wars (take 2) 2008 - present • Web is the game • IE8, FireFox 3.6, Safari 4, Opera 10, Chrome • Focus on technologies that power the web • JavaScript libraries mature + CSS libraries • F2E development tooling
- 8. Take away: Today, more new development is being done on the web than in any other environment. And the rate is increasing
- 9. 1997 2010 Still accessible Still fast Much more interactive
- 10. Built with the same stuff • HTML • CSS • JavaScript
- 11. Three technologies Not so bad, right?
- 12. server
- 13. (X)HTML server
- 14. (X)HTML Specification server
- 15. (X)HTML Specification Implementation server
- 16. (X)HTML Specification Implementation Bugs server
- 17. (X)HTML Specification Implementation Bugs [ Theory / Practice ] server
- 18. CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
- 19. Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
- 20. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification Data Transport mixed: new (x)html data: custom, xml, Implementation json behavior: js Bugs [ Theory / Practice ] server
- 21. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs CSS BOM API (X)HTML DOM JavaScript DOM API Specification mixed: new (x)html, data: custom, xml, Data Transport Implementation behavior: js json Defects [ Theory / Practice ] server
- 22. Macintosh Windows Linux, Unix, Mobile Safari Firefox Chrome IE6, 7, 8 Opera 10,000+ UAs knowledge areas: 7 CSS (X)HTML dimensions: xJavaScript DOM 4 BOM API DOM API platforms: x 3 Specification mixed: new (x)html, data: custom, xml, browsers perDefects platform: x 5 Data Transport Implementation behavior: js json rendering modes: x 2 [ Theory / Practice ] server =840
- 24. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
- 25. $
- 26. Take away: Having a good understanding of front end technologies is good for business, and good for you. But it can be hard (without help)
- 27. JavaScript is in every browser
- 28. JavaScript outside the browser Desktop Server side • Adobe Photoshop (et al) • Node.js • Adobe Acrobat • Narwhal • Mozilla Thunderbird (et al) • Rhino • Apple Dashboard widgets • CommonJS • Google Desktop gadgets • (more) • Yahoo! widgets • (more)
- 29. Take away: JavaScript is the most used language in the world today.
- 30. Yahoo! User Interface library
- 31. YUI Library project • JavaScript libraries • CSS library • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer growth & education
- 34. YUI 3
- 35. YUI 3
- 37. • Examples
- 38. • Examples • API Documentation
- 39. • Examples • API Documentation • User Guides
- 40. • Examples • API Documentation • User Guides • http://yuilibrary.com/forum
- 41. • Examples • API Documentation • User Guides • http://yuilibrary.com/forum • #yui on freenode.org
- 43. YUI Gallery
- 45. Let's see it
- 46. Thanks! Luke Smith lsmith@yahoo-inc.com yuilibrary.com: lsmith twitter: @ls_n
Editor's Notes
- - Like Node, the event object passed back to each event handler is also a facade - Reasons for the event facade are the same as they are for Node - Unlike Node, Event properties can be accessed directly since the event is transitory. This also aids performance for cases like mousemove event. - halt() = preventDefault() + stopPropagation() - event properties that reference DOM elements (e.target) contain Node instances