2010 Through the Lens of YUI Theater

YUI Theater is a project from the YUI team at Yahoo!, dedicated to creating a free video library for frontend engineering. In 2010, dozens of the discipline's top thinkers and engineers were featured, touching on key themes: JavaScript's evolution, HTML5, CSS3, mobile, Node.js, and much more. This article looks back on 2010 through the lens of YUI Theater.

Jump to a Section:

Douglas Crockford
Frontend Engineering: The Discipline in a Time of Change
Node.js: JavaScript Arrives on the Server, for Real This Time
YUI 3: Remixed, with Sophistication, Sugar and a Gallery
Using YUI in the Real World: Notes from the Community at Yahoo and Beyond
Automated Testing for Frontend Code
Accessibility
Performance
YQL: Select * from the Internet
About YUI Theater
CC Images/Used by Kind Permission

New YUI Theater titles are announced on Twitter, via RSS, and on iTunes. All new YUI Theater videos are available as 480p .mov downloads, smaller .m4v files, and in a high resolution, embeddable Flash player.

Douglas Crockford

In 2010 we hosted the Crockford on JavaScript series, in which Yahoo! architect Douglas Crockford updated his popular JavaScript lectures and reached further back into the history of computer science to contextualize key concepts in the JavaScript language. This followed up on last year's popular titles "The JSON Saga" and "The State and Future of JavaScript."

Douglas Crockford: Crockford on JavaScript — Volume 1: The Early Years — Douglas begins the series by putting the the JavaScript programming language in its proper historical context, tracing the language's structure and conventions (and some of its quirks) back to their roots in the early decades of computer science.
Date: 2010-01-26
Douglas Crockford: Crockford on JavaScript — Chapter 2: And Then There Was JavaScript — Douglas surveys the major features of the JavaScript programming language.
Date: 2010-02-07
Douglas Crockford: Crockford on JavaScript — Act III: Function the Ultimate — In the third installment, Douglas discusses functions in JavaScript. "Functions are the very best part of JavaScript," he says; "it's where the power is, it's where the beauty is." Watch the video to learn why.
Date: 2010-02-17
Douglas Crockford: Crockford on JavaScript — Episode IV: The Metamorphosis of Ajax — Douglas explores the Document Object Model (DOM) and a discusses the emergence of "Ajax," in which it was discovered that web apps could behave like desktop apps rather than static pages.
Date: 2010-03-03
Douglas Crockford: Crockford on JavaScript — Part 5: The End of All Things — Crockford reviews issues related to security and performance in JavaScript.
Date: 2010-03-31
Douglas Crockford: Crockford on JavaScript — Scene 6: Loopage — Writes Douglas: "Software development is hampered by a specific set of design mistakes that were made in the first programming languages and repeated in everything that has been done since. And, somewhat miraculously, JavaScript is going to make it right, radically transforming the way we write applications. Again. In the Loop of History, it has all happened before, but it has never happened like this. This is why you should care about the emergence of server-side JavaScript and the excitement around projects like Node.js — not because they're at the sharp end of a trend, but because they're paving the road toward the next big revolution in software."
Date: 2010-08-30

Douglas also contributed the closing keynote to YUIConf 2010 — a fascinating, non-technical talk about the life and dreams of Walt Disney. Although "Quality" will always be my favorite of the Crockford titles on YUI Theater, this one is revealing about Doug on a personal level, and it's a fascinating study.

Douglas Crockford: Project Future — Douglas reflects on the life of Walt Disney, who dreamed of creating a 'City of the Future' in Florida as part of the project that became Disney World. (This is not a technical session, but rather one about big dreams and the life lessons we can draw from them.
Date: 2010-12-06

Frontend Engineering: The Discipline in a Time of Change

The ascendance of high quality, touch-enabled browsers running on low-power, low-bandwidth, high-latency devices was a distinctive feature of 2010, as was the increasing attention these high quality browsers helped bring to a class of new standards generally lumped under the HTML5 moniker (but often including CSS3 and other technologies as well). YUI Theater featured a number of talks focused on enriching the conversation around the discipline at this time of intense change.

Dion Almaer, Ben Galbraith, Elaine Wherry, Thomas Sha, Joe Hewitt, Ryan Dahl, Tantek Çelik, and Douglas Crockford: YUIConf 2010 Panel Discussion: The Future of Frontend Engineering — Moderated by Dion Almaer and Ben Galbraith, this distinguished panel explored the near future of the discipline at at a time of rapid and challenging evolution. Panelists included Elaine Wherry, founder and frontend architect at Meebo; Douglas Crockford, JavaScript architect at Yahoo!; Tantek Çelik, technologist and author; Ryan Dahl, creator of Node.js; Joe Hewitt of Facebook, creator of Firebug and one of the most downloaded mobile applications of all time (Facebook for iOS); Thomas Sha, YUI founder at Yahoo!.
Date: 2010-11-16
Tantek Çelik: HTML5: Right Here, Right Now — Author and standards expert Tantek Çelik, formerly of Technorati, discusses the current state of HTML5 specifications and their readiness for use in shipping web applications.
Date: 2010-11-24
Nate Koechley: A Taxonomy of Touch — YUI contributor Nate Koechley breaks down the elements of touch primitives, gestures and semantics, laying a foundation for the broader language of touch interactions that drive the emerging class of portable devices.
Date: 2010-11-26
Allen Rabinovich: The Many Hats of the Frontend Engineers — In one of the most creative presentations at YUIConf 2010, YUI developer Allen Rabinovich reflects on the many different roles played by frontend engineers as part of their natural generative process.
Date: 2010-11-30
Philippe Le Hégaret: The Next Open Web Platform — Philippe Le Hégaret, who heads the W3C Interaction Domain, discusses HTML5. While the HTML5 specification itself does actually not contain many new features, the new Web platform, often labeled as HTML5, does come with many new features from HTML video to SVG to CSS animations or Web sockets. This talk gives an overview of what's ahead of us, using concrete demonstrations in latest generation Web browsers.
Date: 2010-01-22

Node.js: JavaScript Arrives on the Server, for Real This Time

Two things are different this time around: Node.js and a passionate, knowledgable community that understands why server-side JavaScript can be a critical step forward toward better, faster web applications that work well across a wider spectrum of devices. In 2010, we invited Node.js creator Ryan Dahl to Yahoo twice to talk about his revolutionary new project, and YUI's Dav Glass (and others) took to the podium to explain why this is such a big deal.

Ryan Dahl: Introduction to NodeJS — Ryan Dahl, the creator of NodeJS, introduces the project and talks about performance improvements and new architecture. The talk took place at the May 2010 BayJax meetup at Yahoo.
Date: 2010-05-17
Ryan Dahl: Node.js Roadmap — Ryan delivers one of the most technical (and amusing) talks at YUIConf 2010, diving into the details of Node.js's present state and future roadmap.
Date: 2010-11-30
Dav Glass: Node.js + YUI 3 — YUI developer Dav Glass introduces the work he's done to bring YUI 3's power to Node.js implementers.
Date: 2010-11-30)
Matt Taylor: YUI 3 & Node.js for JavaScript View Rendering on Client or Server — Most web application frameworks have some type of templating engine that accepts two things: (1) data, (2) template, and returns HTML to be assembled into an HTTPResponse. The promise of Node.js and YUI 3 running server-side is that a new era of frameworks is possible in which view rendering on the client and server is implemented with the same JavaScript-based code.
Date: 2010-12-03
Tom Hughes-Croucher: How to Stop Writing Spaghetti Code — In this session from YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher explores different coding styles for event-driven, non-blocking server-side JavaScript and which styles are most successful.
Date: 2010-12-06

YUI 3: Remixed, with Sophistication, Sugar and a Gallery

Last year, Satyen Desai's "YUI 3: Design Goals and Architecture" was one of the most-watched and often-referenced titles on YUI Theater. Along with Luke Smith's "Events Evolved," it helped bring a focus to the technical sophistication of the YUI 3 core. At the same time, Dav Glass debuted the YUI 3 Gallery in 2009, and 2010 saw YUI 3 grow more quickly through community contributions to the core and Gallery than it did from the team of committers.

This year, a collection of new talks highlights the continuing evolution of YUI 3 a year after its GA release, with a growing body of new widgets like AutoComplete and DataTable and a bedrock of time-tested utilities.

Jump to the next session, "Using YUI in the Real World," for videos from the YUI implementer and contributor community.

Luke Smith: YUI 3: Below the Surface [download only] — Luke Smith, a YUI team engineer, delivers one of the most highly rated talks at YUIConf 2010, looking inside core patterns and infrastructure pieces that lie at the heart of YUI 3.
Date: 2010-12-20
Satyen Desai: 'A Phone, a Tablet and a Laptop Walk into a Bar...'—YUI's Approach to Mobile Web Development [download only] — Satyen Desai, creator of the YUI 3 component and widget subsystems, discusses YUI's approach to supporting the new set of web enabled devices on the market today. Satyen's thesis: Think of mobile/touch devices in terms of features and constraints as opposed to an isolated problem space.
Date: 2010-12-21
Ryan Grove: Achieving Performance Zen with YUI 3 — Following codified guidelines can help you build fast websites, but building applications that are clean, fast and extensible also involves taking a balanced approach to performance at every level of your F2E work. YUI 3 is designed to help you in this process, providing a right-sized abstraction layer with built-in performance magic and a variety of tools that make fast frontend code easy and fun to produce. In this session, Ryan explores the zen of performant JavaScript in the YUI 3 world and introduces you to powerful tools YUI 3 puts at your disposal in every app you write.
Date: 2010-09-02
Ryan Grove: Introducing YUI 3 AutoComplete — In this talk from YUIConf 2010, YUI 3 AutoComplete author Ryan Grove takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities.
Date: 2010-12-07
Tilo Mitra: Handling Data in YUI 3 — Yahoo! engineering intern Tilo Mitra introduces the YUI 3 data-lifecycle toolkit, including facilities for data sources, schemas, and the new-for-3.3.0 YUI DataTable widget.
Date: 2010-12-03
Gonzalo Cordero: A Preview of YUI 3 TreeView — Yahoo! frontend engineer and YUI contributor Gonzalo Cordero discusses his TreeView implementation which was recently posted to the YUI 3 Gallery. This lighter incarnation of Treeview is built upon YUI 3's Parent-Child module and already boasts a feature-rich and easy-to-implement API and a robust set of events.
Date: 2010-11-30
Norbert Lindenberg: Internationalizing Applications Using YUI 3 — On the web as in the real world, every language is a minority language. To reach a majority of users, your software will need to support multiple languages and be adapted to the needs and expectations of different cultures. In this session from YUIConf 2010, Yahoo! internationalization architect Norbert Lindenberg discusses how to do this building on YUI 3.
Date: 2010-12-06

Using YUI in the Real World: Notes from the Community at Yahoo and Beyond

At YUIConf 2010, a stellar collection of speakers came to talk about YUI 3 and its use on some of the web's major sites. This collection ranges from a tour of the indispensable AlloyUI extensions in the YUI Gallery to the story of Flickr's YUI 3 migration.

Anthony Pipkin: The Next Step: From Idea to Widget (Part 1) — Anthony Pipkin (Interactive Director at The Jones Group), a prolific YUI contributor, presents the first part of a two-part series on how to move from implementing simple functionality in YUI 3 to producing modular, reusable components that leverage YUI 3's component infrastructure (including widgets and plugins).
Date: 2010-11-30
Pat Cavit: The Next Step: From Idea to Widget (Part 2) — ArenaNet engineer and YUI contributor Pat Cavit presents the second part of a two-part series on reusable component development in YUI 3.
Date: 2010-11-30
Caridy Patiño Mayea: YUI 3 Loading Strategies: A Yahoo! Search Case Study — A robust loading strategy is one of the most important elements of optimization for high-traffic websites. YUI 3's Loader is both powerful and elegant, and learning how to leverage it is a must for YUI developers. In this YUIConf 2010 session, Yahoo! frontend engineer and YUI contributor Caridy Patiño Mayea provides a technical overview of loading strategies employed on Yahoo! Search.
Date: 2010-11-30
Dan Hunt: Building the Next Generation of Yahoo! Mail with YUI 3 — Yahoo! Mail frontend engineer Dan Hunt describes the creation of the newest version of Yahoo! Mail, rewritten from the ground up using YUI 3.
Date: 2010-11-30
Nate Cavanaugh and Eduardo Lundgren: A Whirlwind Tour of AlloyUI Components in the YUI 3 Gallery — Liferay engineers Nate Cavanaugh and Eduardo Lundgren talk about the dozens of high-quality, YUI 3-based components contributed via their AlloyUI project to the YUI 3 Gallery.
Date: 2010-11-30
Mark Kawakami: Finger Tips: Lessons Learned from Building a Touch-Based Experience — Mark Kawakami of Yahoo! Sports takes you through some lessons learned in building touch-based experiences for one of the most popular websites on the internet.
Date: 2010-11-19
Ross Harmes: Porting Flickr to YUI 3 — Ross Harmes is a Frontend Engineering Manager at Flickr. In this session, he discusses the process his team underwent in rewriting the Flickr front end layer using YUI 3, including performance and code-organization tips as well as other lessons learned.
Date: 2010-11-16

Automated Testing for Frontend Code

Testing on the frontend is coming of age, and YUI Test (now an independent project with no dependencies on the YUI JavaScript library) and Yeti (a command-line tool for batching precommit tests across browser/OS combos) are helping to lead the charge. The creators of each of those projects spoke at YUIConf this year to talk about the evolving role of testing on the frontend and the role YUI Test and Yeti are playing.

Nicholas C. Zakas: YUI Test — Yahoo! Front Page engineer, author and YUI contributor Nicholas C. Zakas talks about the new standalone YUI Test project which has been broken out from its YUI 2 and YUI 3 roots.
Date: 2010-11-26
Reid Burke: Yeti: YUI's Easy Testing Interface — Testing cross-browser web applications has been too difficult for too long: You're either manually reloading browsers or struggling with complicated automation software. In this session from YUIConf 2010, YUI engineer Reid Burke talks about how YUI's Yeti project helps to address these problems. Reid discusses when you should use automated testing for your frontend code, how Yeti works with YUI Test, how to setup cross-browser testing in minutes and how the YUI team uses Yeti to ship a better product.
Date: 2010-12-06

In 2009, Yahoo!'s Todd Kloots gave a series of talks on accessibility, including a session on "Building Accessible Widgets with YUI 3." In 2010, we dedicated two sessions at the BayJax meetup series to the subject, including a detailed description of how accessibility is engineered into the DNA of Yahoo!'s home page.

Nicholas Zakas and Victor Tsaran: Accessibility on the Yahoo Homepage — Nicholas Zakas, a principal developer of the Yahoo! homepage, and Victor Tsaran's, Yahoo!'s senior accessibility manager, discuss the strategies and methods that made one of the most visited websites in the world fully accessible. This talk took place at the June 2010 BayJax meetup at Yahoo.
Date: 2010-06-23
Dennis Lembree: Making JavaScript Accessible — Dennis Lembree, an accessibility expert and the creator of AccessibleTwitter discusses the challenges of making JS-enabled sites accessible.
Date: 2010-06-23

Performance

YUI Theater has explored the emerging discipline of frontend performance in the past, including Steve Souders's canonical "High Performance Web Sites: 14 Rules for Faster Pages," Nicole Sullivan's "Build Fast Websites," and Julien Lecomte's "High Performance Ajax Applications." We added three titles to the portfolio in 2010, including a wide-ranging talk by the authors of O'Reilly's High Performance JavaScript volume.

Nicholas Zakas, Stoyan Stefanov, Ross Harmes, Julien Lecomte, Matt Sweeney: High Performance JavaScript — Five contributors to O'Reilly's High Performance JavaScript discuss advanced JavaScript and DOM scripting optimizations at the April 2010 BayJax meetup at Yahoo.
Date: 2010-04-15
Philip Tellis: Measuring the Web with Boomerang — Philip Tellis, a long-time Yahoo! and performance expert, discusses the Boomerang open-source tool for measuring the performance of web sites.
Date: 2010-11-15
Alois Reitbauer: dynaTrace Ajax Edition — dynaTrace provides one of the most powerful tools for analyzing the performance of web applications in Internet Explorer. In this talk, dynaTrace engineer Alois Reitbauer walks through four specific analytic scenarios using the dynaTrace interface.
Date: 2010-09-30

YQL: Select * from the Internet

YQL is Yahoo!'s workhorse data service that turns any web service, API, RSS feed or web page into a data source accessible and mixable via a friendly SQL-like syntax. Along with Pipes and YUI, it has been among Yahoo!'s most successful developer offerings. We featured the YQL team and other speakers on this subject throughout the year, and we added a YQL module directly to YUI, making it even easier to get diverse data into your JavaScript-based application.

Mirek Grymuza and Josh Gordineer: YQL: An Introduction — Mirek Grymuza and Josh Gordineer are members of the team that builds and maintains YQL. In this talk from YUIConf 2010, they provide a baseline introduction to YQL's history, features, and core uses.
Date: 2010-11-30
Paul Donnelly and Nagesh Susarla: YQL + YUI: Building End-to-End Applications — When developing widgets, it's not how to use YQL data that comes up as a question, but rather how to access it. In this YUIConf 2010 session, YQL engineers Paul Donnelly and Nagesh Susarla review how to start your query out in the YQL console, how to access YQL data via the various endpoints, and how to go through YQL's various authentication layers.
Date: 2010-12-07
Nagesh Susarla: Building YQL Open Data Tables with YQL Execute — YQL engineer Nagesh Susarla explores the power of YQL Execute in the creation of powerful YQL open data tables.
Date: 2010-11-30
Christian Heilmann: Using (Not Abusing) YQL for Caching, Filtering and Collating Data — Christian Heilmann describes how to use YQL sensibly to create robust, innovative applications with immediate scalability.
Date: 2010-11-30
Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL — In this session from YUIConf 2010, TipTheWeb cofounder and YUI contributor Eric Ferraiuolo discusses the creation of a project-scale codebase using YUI 3, YUI 3 Gallery, and YQL.
Date: 2010-12-07
Christian Heilmann: YQL and YUI: Building Blocks for Quick Applications — The Yahoo! Developer Network's international evangelist Christian Heilmann discusses his philosophy for creating fast, powerful, compelling applications using the Yahoo Query Language (YQL) and the Yahoo User Interface Library (YUI). (Note: This talk is also available in German.)
Date: 2010-02-08

About YUI Theater

YUI Theater was created by Eric Miraglia (@miraglia) in 2006 and has published more than 100 videos on subjects spanning the discipline of frontend engineering. All YUI Theater videos in 2010 were shot and edited by the Eric and fellow YUI engineer Allen Rabinovich (@allenr).

CC Images/Used by Kind Permission

My thanks to the many talented photographers who have lent their work for use in YUI Theater videos this year, including the ones whose work is featured in this article. In order of appearance:

HIGHLIGHTS OF THE DAY

2010 Through the Lens of YUI Theater

Jump to a Section:

Douglas Crockford

Frontend Engineering: The Discipline in a Time of Change

Node.js: JavaScript Arrives on the Server, for Real This Time

YUI 3: Remixed, with Sophistication, Sugar and a Gallery

Using YUI in the Real World: Notes from the Community at Yahoo and Beyond

Automated Testing for Frontend Code

Performance

YQL: Select * from the Internet

About YUI Theater

CC Images/Used by Kind Permission

Comments

Related Articles

2010 Through the Lens of YUI Theater

Jump to a Section:

Douglas Crockford

Frontend Engineering: The Discipline in a Time of Change

Node.js: JavaScript Arrives on the Server, for Real This Time

YUI 3: Remixed, with Sophistication, Sugar and a Gallery

Using YUI in the Real World: Notes from the Community at Yahoo and Beyond

Automated Testing for Frontend Code

Accessibility

Performance

YQL: Select * from the Internet

About YUI Theater

CC Images/Used by Kind Permission

Comments

Related Articles