Thursday, October 21, 2010

Slides from MIT Talk

Last week, I gave two talks about Closure in Cambridge: one at Google and the other at MIT CSAIL. I had a great time and fielded lots of good questions from sharp individuals, so I'm looking forward to my next two speaking events in New York City.

As someone requested that I upload my slides, I am more than happy to share them:

I would argue that one of the best parts of the talk is the plovr demo, which sadly is not communicated through the slides. Though if you are in the NYC area, you can come and see such a demo live if you come to one of my upcoming talks! Also, O'Reilly provides me with three copies of my book to give away at each event, so even if you aren't interested in plovr, you are probably interested in the chance to win a free book! (Though I am embarrassed to admit that I don't have the hang of how to run a "giveaway" yet, so at the MIT talk, I ended up giving books to those who hung out the longest to ask questions.)

Though after spending quite a bit of time preparing my talks last week, I am pretty disappointed with my experience creating a presentation with Google Docs. Given that the UI is displayed using HTML and CSS, it should be dead simple to change the color palette of a presentation. For example, I am generally interested in three styles: slide title, plain text, and sample code. Every time I want to set text as sample code, I have to select the text, choose "Courier New" from the font dropdown and then select my code color from the font color picker. Under the hood, there are tons of <div>s with the same inline CSS styles whereas if I created my slides by hand in HTML, I would have many <code> tags that could easily be restyled with a single CSS rule.

Trying to use different themes for Google and MIT for the same presentation would have taken hours because of all the time mousing around to select text and change all the styles, so I didn't even try. I know that Google Docs is nowhere near Keynote or Powerpoint in terms of its feature set, but I didn't realize how far behind it is. It only comes with 15 themes, and I'd argue that none of them are particularly good for a developer who wants to display code samples. I would switch to a Microsoft or an Apple solution, but I am often switching between computers, and the thought of emailing a slide deck around and clogging my inbox with twenty versions of the same presentation is depressing.

There's a good chance that I'll build my own lightweight presentation editor in HTML that is tailored for creating talks by software engineers. I basically had to do something similar in order to write my book, but that's an exciting topic for a future blog post!

Want to learn more about Closure? Pick up a copy of my new book, Closure: The Definitive Guide (O'Reilly), and learn how to build sophisticated web applications like Gmail and Google Maps!

Monday, October 11, 2010

Upcoming Talks

Over the next couple of months, I will be giving several talks about Closure:

October 13: Getting the most out of Closure
Google: Cambridge, MA

October 15: Building a 100K LOC JavaScript application with Google Closure
MIT CSAIL: Cambridge, MA

October 27: Introduction to Closure Tools and plovr
Google: New York, NY (as part of the NYC-GTUG Meetup)

November 10: Compiling your web site: Closure compiler
Location TBA: New York, NY (as part of the Web Performance NY Meetup)

If you are in the area for any of these talks, please come and say hello! I'm also more than happy to sign books (and may even be giving some away!) at each of these talks.

Hopefully, I will also get a chance to speak at both the Boston and NYC JavaScript meetups. I also hope to make it out to the Bay Area, Austin, Chicago, and Sydney (where I seem to have an open invitation!). As I have no official "book tour," my personal travel basically determines when and where I set up speaking events.

Want to learn more about Closure? Pick up a copy of my new book, Closure: The Definitive Guide (O'Reilly), and learn how to build sophisticated web applications like Gmail and Google Maps!

Wednesday, October 6, 2010

Creating a 100K LOC Application in JavaScript with Closure and plovr

Last night at an MIT infosession for Yext, I presented some statistics about the codebase for Yext Rep, which is our free, online reputation management system for local businesses. Rep is a substantial Rich Internet Application (RIA), topping out at just over 144K lines of JavaScript and Closure Templates, which amounts to over 4MB of JavaScript. In the spirit of a traditional RIA, Rep is a single web page that dynamically loads both code and data via AJAX (navigation state is stored in the URL fragment, just like in Gmail).

The first challenge in writing a 100K LOC JavaScript application is managing the codebase. Fortunately, the Closure Library provides both a comprehensive API and a meaningful way to organize dependencies in JavaScript. By using thoughtful namespaces and explicit dependencies, it is easy to find the functionality you are looking for and to build things up without creating cyclical dependencies.

The second challenge, of course, is getting the application to load quickly even though there is 4380K of JavaScript to send down to the browser. Any solution that would prevent Rep from loading quickly would not be an option. As you may have guessed, leveraging Closure makes it possible for us to reduce that 4380K down to 73K, which is less than 2% of the original size. Here is how it breaks down:

KB Technique
4380 Original JavaScript
709 Compilation using the Advanced mode of the Closure Compiler (84% reduction)
215 Dividing the compiled code into modules using plovr (70% reduction)
73 gzip (66% reduction)

One of the less commonly known techniques that we use is dividing JavaScript into modules. This is a feature of the Closure Compiler, but using plovr makes the module splitting feature of the Compiler far more accessible and manageable. Over the weekend, I worked on improving module support in plovr. There are still a few bugs left to shake out, but I plan to do another release of plovr with more detailed documentation on modules soon.

Want to learn more about Closure? Pick up a copy of my new book, Closure: The Definitive Guide (O'Reilly), and learn how to leverage Closure to create your own RIA!