Wednesday, October 17, 2012

Finding Closure from jQuery - lessons learned

Yesterday I spoke about an easier method to starting with Closure Tools, you can get the slides here:

http://rhysbrettbowen.github.com/closure_from_jquery/

and the demo you can see in action here:

http://rhysbrettbowen.github.com/weatherdemo/

But what I'd like to talk about are some lessons I've learned, mistakes I made and what I'm going to change for the next time.

My spot to talk was on the second day as the second session after lunch. The second day is hard to get interest going and even harder to keep people awake, they've had an after party the night before and the food is settling nicely in their stomachs from lunch.

My first major mistake I made was to leave the lights off. I did this because the speaker before me had turned them off so I decided to leave it. Not a great thing to do when trying to command the attention of a room of sleepy people.

Another major mistake was how technical my speech was. I wanted to get some core concepts across like how goog.ui.component worked and I went in to too much detail. I showed code and where to put things, a better option would be to have a flow chart of it's lifecycle. Another big issue was that I showed goog.ui.component but what I actually used was mvc.Control which inherits from it. I should have just mentioned the inheritance as an aside and explained it all as if it was part of mvc.Control (from plastonjs).

I also wanted to mention the gotchas of programming to make things AO compatible and I gave two examples. I spent way too much time on the second one (a class variable) when it doesn't come up that often. I should instead have just left it out and put in a quick mention of that being the reason for $$ in the G.

I also went the wrong way about showing code. I showed the entire program, then the entire code. and tried to relate it back to parts of the program. I worked bottom up, showing code first then what it did second. I should have broken down the program in to segments, showed that segment then showed the code for it. That way it would be broken up a bit better.

Also I need to find a better way to describe the benefits rather than diving in to technical details. A presentation is not a classroom, it's a way to get people excited enough to go and find out for themselves. For this I think I need a flashier demo and to show off the compilers compression rather than just tell them it is good. (in case you're wondering here is what I should have shown:)

This shows the gzipped sizes of the javascript needed for each todomvc app at todomvc.com. CanJS doesn't have routing and I actually went through to websites to find the minimized size of javascript libraryies when the unminimized was provided. I left the actual coding for the app unminimized if it wasn't minimized already, but as these were between 1-7kb total I don't believe it would have a great impact on the final result.

So what am I going to do? I'm going to spruce up the presentation and show how each component is built one at a time. I'm not going to focus on closure tools and how it works - just it's advantages and how to get started using plovr, the G and PlastronJS - the actual diving in to closure library can come later once the excitement is there.

No comments:

Post a Comment