My YUIConf Talk: Handling Data in YUI3

I just finished giving a talk at YUIConf 2010. For those who don’t know what YUIConf is, its an annual conference held at Yahoo! for internal and external Front-end Engineers.YUIConf is all about talking about the next generation of web technology, Node.JS, SVG, HTML5, CSS3, YUI3, YQL and more.

YUIConf 2010 has some of the best speakers in this discipline – people like Douglas Crockford (JSON/Javascript), Ryan Dahl (Node.js), members of the YUI Team (they are all insanely smart), Nicholas Zakas (Yahoo! Frontpage), and many others.Here’s the whole schedule for this year’s conference.

So when I was told by my team that I could present at the conference if I wanted to, I was obviously over-the-moon. How often does a 21-yr-old get a chance to speak in front of some of the best software engineers in the world, and get that video put on YUI Theater so that everyone else in the world also has access to it.

One thing I learned from all this – preparing for a 40min. talk is a LOT harder than it sounds. We had a whole week to prepare, but I still found myself working till the last minute (literally). I spoke about “Handling Data in YUI3” – a talk that takes a close look at the Data Lifecycle, how it applies to the web and how YUI3 can help you with this. My reasoning behind this talk was simple:

  • Every web application deals with data in some form, so it seemed to be a nice encompassing talk that would interest people
  • I have had experience building Datatable + Recordset in YUI3, so I kinda knew how things come together on the UI side of things.
  • YUI3 has a bunch of great utilities that don’t get enough recognition, and no one had posted a data-lifecycle talk into YUI Theater.

So I dove in, spent a bunch of nights learning stuff, a few more nights making my slidedeck + code and the final few nights rehearsing. In the end, I think I did all right.

Resources From Talk

I’ve put the demo code I used up in a gist. Use this code to figure out how to make an autocomplete query a datasource, and how to use some of the new widgets in YUI 3.3.0PR1 (namely Autocomplete + Datatable). I also use Charts from the gallery. If you simply copy/paste the code, it won’t work. You  need to include YUI3.3.0PR1+ and get an API-Key from TMDB. Let me know if you have any questions.

Make sure you check YUI Theater for all the videos. Even if you don’t use YUI3, if you are interested in front-end engineering, that site is your bible, and will improve your skills ten-fold. That’s what it did to me.

Update: The video is out on YUI Theater, and I have embedded it on this post.

Leave a Reply

Your email address will not be published. Required fields are marked *