The art of simplicity

After leaving the Angular Team, Rob Eisenberg continued his effort in building the greatest next generation JavaScript client framework. Yesterday he finally shared his work with the rest of the world and announced Aurelia . Here are some of the features as mentioned on the Aurelia website : Forward thinking: Written with ES6 and ES7 but transpiles to today’s browsers Modern architecture: Multiple small replaceable components Two-Way databinding: Performant two-way binding to any object using adaptive techniques Extensible HTML: Read as ‘Angular Directives’ Routing & UI Composition: The already great Durandal router on steroids Broad Language Support: Written with TypeScript, AtScript, CoffeeScript,… in mind … And here an introduction video: Introducing Aurelia from EisenbergEffect on Vimeo . As a big fan of Durandal(and Caliburn), I’m really interested in the results. I know what to look into the upcoming weeks…

I’ve been using Knockout for some time now, but more recently I started using Angular.js. And I have to admit it there are some really nice features in Angular that I would love to have in Knockout as well. I was planning to write some extensions myself but then I discovered Knockout.Punches which introduces some enhanced binding syntax for Knockout. One of the things I like in Angular is the concept of filters: This will take the ‘name’ value from your bound ViewModel, returns only the first 20 characters and convert the result to uppercase. And this is how you can do it using Knockout.Punches: Have a look at the documentation for some of the other nice features it offers...

Out-of-the-box when a Knockout observable changes, any computed observable is notified immediately. In case you want to delay change notifications for a specified period of time, you can use the rateLimit extender . The rateLimit extender can be applied to any type of observable, including observable arrays and computed observables .

Knockout has the concept of computed observables . Knockout is smart enough to detect which observables to monitor based on the code inside the computed observable. For example, in the code below we use the name observable inside the computed. Knockout will detect this and call our computed function every time the name observable changes: You can take advantage of this fact. If you specify some code inside a computed that uses all your observable properties, for example ko.toJSON, you can create a computed that will be called on every change. This is useful if you want to do some dirty/change tracking on your viewmodel: