Spotlight Adv Js Hero Image

FITC Spotlight: Advanced JS Roundup

Yesterday I had the pleasure of attending FITC Spotlight: Advanced JS at the University of Toronto. The talks at this event were a little above my skill level, but still interesting and informative.

Yesterday I had the pleasure of attending FITC Spotlight: Advanced JS at the University of Toronto. The talks at this event were a little above my skill level, but still interesting and informative.

The sessions included:

Client Side MVC and The Gosh Darn Back Button

In this presentation Harry Brundage discussed clients side MVCs and memory leakage. It is easy to leak memory in JavaScript Apps. With jQuery memory use goes up then down and repeats like this chart:

However in JS MVC there is no reset and memory continually goes up as in the chart below:

For this reason it's important to use .remove() but also easy to forget. But if you don't then your memory will continue to leak and the app will become less and less responsive. Harry then discussed how to fight memory leaks and stressed that .remove() should be used in an MVC environment. He also said that frameworks should handle lifecycle focus as .remove() puts on the onus on the developer to remember.

Using frameworks means having to surrender control, however we get less wrong.

Turbocharging Client-Side Processing: Leveraging asm.js

Vladimir Vukicevic introduced asm.js (prounounced ahzem) as an optimizable subset of JavaScript that is intended as a compilation target. Asm.js uses rigid rules that are not intended to be written by hand, though it is possible (but painful to do so).The compilation target is not just C++ but also IIjs, typescript, emscriptem for C/C++.

Other items of note:

  • deal with manual memory management & allcoation by making a wrapper and avoid thinking aout it again.
  • user worker threads - asyncronous execution
  • Workers are awesome - APIS coming soon
    • WebRTC
    • WebGL & Canvas2d
    • Web Sockets
    • Web Audio
  • near future compilation will be cached resulting in a near instant load
  • process/resize photos client side
  • text to speech
  • use asm.js to load specialized codecs when device can use them

Virtual Machines 101

This talk, by Tasveer Singh, was well presented, but I was unable to follow much of what was said due to the speed of his presentation and my notes no longer make any sense to me. Sorry Tasveer, you were a good speaker, I just couldn't follow your topic.

Rich Interactivity with CreateJS

This presentation was just after lunch and I was in a post lunch coma just before Grant Skinner started his talk, however I was soon wide awake. Grant was an enthusiatic speaker and gave an introduction to CreateJS that demonstrated how easy it is to create rich media with javascript. CreateJS is actually a suite of JavaScript libraries that include EaselJs, TweenJs, SoundJs & PreloadJs

Essentially much of what was previously done using Flash can now be done with CreateJS. In fact, Flash CC works with create.js natively and can render as HTML5 using CreateJS. Other things that CreateJS has is that there are no dependencies and it plays well with other libraries. This is definitely something I want to spend some time learning.

Continuous Deployment Workflows for Non-Trivial Full-Stack JavaScript Applications

Nick Van Weerdenburg discussed continuous deployment and numerous best practices with GIT. One thing that stood out for me was that with teams of people he suggested that the DevOp Manager change each week. By doing so there would be no single point of failure. Other points include:

  • if you aren't improving, you're getting worse
  • automate everything you can
  • you cannot under invest in GIT (I think he meant it's not possible to over invest)
  • pair programming
  • SOLID GIT training is essential.

Nick also recommended three books Functional Javascript, Testable JavaScript & Maintainable Javascript.

Awesome Ember Tricks

Next Robin Ward introduced four awesome tricks to use with Ember.js. Ember.js is a browser application framework that uses handlebars templating and values convention over configuration. Below are the tricks:

  • Trick #1: computed property macros are smart. Content changes as updated, if not, then no change
  • Trick #2: Async everything. Updates are coalesced so that an event queue combines multiple inputs into one output
  • Trick #3: Custom resolver - extensible
  • Trick #4: View Cloaking. This was explained with regards to infinite scrolling and how you could unload off screen view (cloaking) and reduce ram usage.

Realtime “Eye Candy” with AngularJS

The final presentation of the day, by Matias Niemelä, was also very interesting. Matias introduced Angular.js by informing the audience that it extends browser capabilities to make it feel like dynamic data and that it is very quick to make web apps. In fact he built a simple app during his talk.

Using pusher.js in combination with angular it's possible to make a "hybrid" web app that combines the best of traditional website and ajax powered web sites. During Matias' presentation I forgot to take a lot of notes as I was too focused on what he was doing and saying. You can, however, view the slides for Matias's presentation here.

Final Thoughts

The after party at Pour Girl was quite good and had good beer. I talked with a few people and even found a couple of people interested in trying out ExpressionEngine, my CMS of choice. This was my second FITC event and I would highly recommend attending if the topic is something you are interested in. Both times the venue was good and easily accessibile, the speakers of high caliber with excellent presentations.

Hope to see you at the next FITC event.