Site Meter
 
 

Knockout 3.2.0 released

This one has been slow-cooking since February and it’s good. For the first time in a while, this release focuses on adding some significant new features to Knockout. Almost any developer using KO should seriously consider making use of these, as they can greatly streamline your code.

So what’s new?

Components

Components bring a new and hugely more scalable way of structuring a large application. They:

  • Combine a viewmodel and template in an encapsulated package
  • Can represent either small reusable widgets or entire sections/pages in a larger app
  • Can be preloaded, or loaded on demand
  • Can be nested or inherited
  • Can work with custom conventions for configuration or loading.

I’ve built a few apps with KO components recently (including the KO triage site, and an iOS/Android game called Blockpick (not open source)) and can confidently say this is how I’ll be structuring my KO apps from now on.

See: components overview documentation and explore from there. Or if you’re in the mood to get a hot drink and settle in for a demo, see this video from NDC Oslo 2014.

Custom elements

Custom elements provide many of the benefits of the emerging Web Components spec, but cleanly integrated with KO’s new components feature described above. Plus, they’re ready to use in production today – compatible all the way back to IE6!

See: custom elements documentation

Pure computeds

ko.computed has always been the powerhouse behind KO, underpinning just about all of its features. It makes your code reactive without you having to declare any dependencies explicitly.

ko.pureComputed is a new specialisation of ko.computed with better performance and memory management in many cases. It automatically pauses/resumes evalution, and automatically releases/reclaims references to dependencies, according to whether any other part of your app is watching it at the time. This can be extremely valuable for large single-page applications, where you may be tearing down and rebuilding different parts of your UI over long periods of time, and need to ensure your memory/CPU use is as streamlined as possible.

See: pure computed documentation

The textInput binding

This new binding transparently resolves numerious browser event quirks related to text entry. You might not believe how many different types of events are raised (or worse: not raised) by different browsers when a user types, cuts, pastes, drags, or autocompletes text in an <input> or <textarea>. Or if you’ve been a web developer for a while, you probably would believe it, and have the battle scars to show.

Well, textInput is something of an expert on the subject, so hopefully you don’t have to be.

See: textInput documentation

More

Of course, there are smaller bugfixes in there too. You can find the exact set of changes on GitHub.

Hopefully these enhancements will prove valuable for your projects. I’ve been using most of them for a while and have certainly found them useful. Big thanks to everyone who’s participated in implementing and discussing these changes!

Architecting large Single Page Applications with Knockout.js

Last week in Oslo I was lucky enough to attend the fantastic NDC 2014 conference, at which I gave the following talk about using brand-new not-yet-released Knockout.js features, along with Yeoman, Gulp, and Karma to build large single-page web apps in a very modern style (while still retaining backward compatibility all the way to IE 6!).

This should be of interest to anyone who uses Knockout or cares about scalable front-end architecture.

Contents

  • 00:00 Benefits and challenges of single-page apps; relevance of Knockout.js
  • 11:20 Demo: Knockout 3.2′s components and custom elements
  • 15:40 Demo: Using Yeoman to generate (“scaffold”) a scalable application architecture
  • 22:20 Demo: Scaffolding and building a new Knockout component
  • 30:50 Understanding Grunt and Gulp
  • 34:00 Demo: Using Gulp and require.js to produce control both preloading and incremental loading
  • 41:50 Testing – your options
  • 43:50 Demo: Adding Jasmine and Karma to the technology stack
  • 59:10 Summary: Overcoming the challenges of single-page app development

Watch the video


Architecting large Single Page Applications with Knockout.js

Want more? I also gave a talk about WebGL and GPU coding for the browser.

Write massively-parallel GPU code for the browser with WebGL (NDC 2014)

Last week in Oslo I was lucky enough to attend the fantastic NDC 2014 conference, at which I gave the following talk about using WebGL to make browsers do cool and unusual things. If you’re interested in pushing the web platform to its edge, check it out.

Contents

  • 00:00 Intro
  • 03:20 Demo: Writing a pixel shader
  • 12:00 What are vector and pixel shaders?
  • 14:50 Demo: Using Three.js to render traditional 3D graphics
  • 29:20 General computation on the GPU, and how SIMD parallelism works
  • 37:30 Demo: Using WebGL for arbitrary data processing; performance considerations
  • 48:50 Stream reductions
  • 51:30 Demo: Computer vision (image recognition) via WebGL
  • 56:00 Summary

Watch the video


Write massively-parallel GPU code for the browser with WebGL

In case you just can’t get enough of this stuff, I also gave a talk about Knockout.js and large single-page apps.