---

If you attended Spotlight: Advanced JS, be sure to check your inbox for the link to the videos of the presentations. Missed the event? Catch guest blogger Sean Smith's recap below, and check back on our YouTube channel at the beginning of January as the videos will be released over the coming weeks starting then. 

---

This past weekend, 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.

Spotlight Advanced JS room

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 first chart:

chart 1

chart 2

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

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 (pronounced 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, emscripten for C/C++.

Other items of note:

  • deal with manual memory management & allocation by making a wrapper and avoid thinking about it again.
  • user worker threads - asynchronous 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 and was one of the most advanced JavaScript presentations I've heard, so much so that I was unable to follow along. The presentation covered very in depth detail on virtual machines. Sorry Tasveer, you were a good speaker, I just couldn't follow your topic.

Rich Interactivity with CreateJS

Grant was an enthusiastic 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 and PreloadJS.
Grant-1
Essentially much of what was previously done using Flash can now be done with CreateJS. In fact, Flash CC works with CreateJS 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 and 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 AngularJS 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 accessible, the speakers of high caliber with excellent presentations.

Hope to see you at the next FITC event.

SeanSmith_bloggerSean is a front end developer, coffee lover, ExpressionEngine expert and an amateur photographer. You can find Sean at CaffeineCreations, his photoblog, or on Twitter (@cs_sean).