Front end engineering, YUI Gallery, and your future
Download as KEY, PDF7 likes1,841 views
The document outlines the evolution of front-end engineering from the early browser wars to the current state, emphasizing the growth of web technologies like HTML, CSS, and JavaScript. It highlights the increasing importance of professional web development and the role of various JavaScript libraries in creating modern web content. Additionally, it stresses that having a solid understanding of front-end technologies is beneficial for both business and personal growth.
![(X)HTML
Specification
Implementation
Bugs
[ Theory / Practice ]
server](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-17-320.jpg)
![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](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-18-320.jpg)
![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](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-19-320.jpg)
![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](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-20-320.jpg)
![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](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-21-320.jpg)
![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](https://image.slidesharecdn.com/umass-100405190119-phpapp02/85/Front-end-engineering-YUI-Gallery-and-your-future-22-320.jpg)
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
- #61: - 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