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.
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
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
46. Thanks!
Luke Smith
lsmith@yahoo-inc.com
yuilibrary.com: lsmith
twitter: @ls_n
Hinweis der Redaktion
- 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