• Like
Front end engineering, YUI Gallery, and your future
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Front end engineering, YUI Gallery, and your future

  • 2,574 views
Published

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 …

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.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,574
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
77
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide



























































  • - 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






Transcript

  • 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
  • 23. usability, internationalization, localization, visual design, accessibility, information architecture, security, build processes, performance, benchmarking, devices, portability
  • 24. $
  • 25. 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)
  • 26. JavaScript is in every browser
  • 27. 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)
  • 28. Take away: JavaScript is the most used language in the world today.
  • 29. Yahoo! User Interface library
  • 30. YUI Library project • JavaScript libraries • CSS library • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer growth & education
  • 31. http://developer.yahoo.com/yui
  • 32. http://developer.yahoo.com/yui
  • 33. YUI 3
  • 34. YUI 3
  • 35. • Examples
  • 36. • Examples • API Documentation
  • 37. • Examples • API Documentation • User Guides
  • 38. • Examples • API Documentation • User Guides • http://yuilibrary.com/forum
  • 39. • Examples • API Documentation • User Guides • http://yuilibrary.com/forum • #yui on freenode.org
  • 40. YUI Gallery
  • 41. http://yuilibrary.com/gallery
  • 42. Let's see it
  • 43. Thanks! Luke Smith lsmith@yahoo-inc.com yuilibrary.com: lsmith twitter: @ls_n