“Durangular”

Standard

Rob Eisenberg, Durandal’s creator, announced here that he has joined forces with the Angular team to bring the best of both worlds together.

As a Durandal user this “convergence” smelled right away like “bye bye Durandal” to me. But as I kept reading Rob´s post I realized that it wasn´t like that, at least for now.

I´ve been a Durandal fan and user since the day it came out and all my SPA projects have it as their base framework.

It´s not that I´ve been indifferent to Angular, but Durandal feels right for me, it has all the features needed to build a SPA and quite frankly it does an awesome job accomplishing that.

But let´s be honest we all had this gut feeling right? Angular has gained a huge popularity in the Developer community and has Google financial support behind it. So this is almost like David and Goliath story with a “if you can´t beat them join them” ending.

DavidAndGoliath

If like me, Dear Reader, you feel that Rob´s post is that “push in the back” that was needed to meet n´greet Angular, let me show you what were my basic 5 concerns towards this framework and its adoption. This will help to better understand that Angular just like Durandal is an exceptional SPA framework and that they aren´t so different after all.

Concern 1: What about my legacy code and current projects that use Durandal?
Answer: Durandal is not dead, neither your projects that use or will use it.

Durandal 2.x is not going away. It will continue to be maintained by myself and a core team of committers.

(extracted from the aforementioned post)

 

Concern 2: VM or Controllers?
Answer: Who cares? Just think modularly.

/*This is the Durandal module where we define our VM*/
define(['services/logger', 'services/dataservice', function(logger, dataservice){
   var vm = {
     firstName: ko.observable('Ricardo'),
     lastName: ko.observable('Barbosa')
   });
/*This is the Angular module where we define our Controller*/
var app = angular.module('app', []);
app.controller('demo', function($scope) {
   $scope.firstName = 'Ricardo';
   $scope.lastName= 'Barbosa';
});
 

Concern 3: Databinding and all the syntactic sugar around it.
Answer: Push the observables out of the way, change the “data-bind” syntax in your views for “ng-*” directives, or {{ }} and you still get a 2 way data-binding system.

/*This is a ko observable used in Durandal and its correspondent view binding syntax*/
var vm = {
     buttonText: ko.observable('click here'),
     buttonClick: function() {
          alert('button clicked');
   }
   });

<button type="button" data-bind="text: buttonText, click: buttonClick"></button>
/*This is a "POJO" used in Angular and its correspondent view binding syntax*/
app.controller('demo', function($scope) {
   $scope.buttonText = 'click here';
   $scope.buttonClick = function() {
          alert('button clicked');
   };
});
<button type="button" ng-click="buttonClick">{{buttonText}}</button>

Concern 4: Where´s my router?
Answer: Relax, it´s there and it has the same obvious name, router.

/*This is how we define our routes in Durandal using the plugins/router module*/
router.map([
                { route: '', 
                  hash:'#search', 
                  title: 'Search view',
                  moduleId: 'viewmodels/search', 
                  nav: true 
                },
                { route: 'profiles*profile/:userId', 
                  title: ' Profile', 
                  moduleId: 'viewmodels/profiles/profile', 
                  nav: true 
                }
            ]).buildNavigationModel();
/*This is how we define our routes in Angular using the ngRoute module*/
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/search', {
        templateUrl: 'app/views/search.html',
        controller: 'SearchController'
      }).
      when('/profiles/:userId', {
        templateUrl: 'app/views/profiles.html',
        controller: 'ProfilesController'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

Concern 5: How about lifecycle callbacks like the activate, attached, compositionComplete, etc that exist in Durandal?
Answer: Angular also has its own like controller creation events, $viewContentLoaded, $destroy, etc.

/*Some example Durandal callbacks*/
var
        vm = {
            activate: activate,
            attached: attached,
            compositionComplete: compositionComplete

        },
    return vm;

     function activate() {
       /*Called when the view is first activated, its intent is to wire up view activation logic*/
    }


    function compositionComplete(child, parent, settings) {
        /*Called when the composition for the object is complete*/
    }


    function attached(view) {
        /*Called when the view is attached to its parent DOM node*/
    }
/*Some example Angular callbacks*/
app.controller('main', function($scope) {

app.controller('Controller1', function($scope) {
  /*Controller1 has been constructed*/
  
  $scope.$on('$viewContentLoaded', function() {
    /*The view for this controller has loaded*/
  });
  $scope.$on('$destroy', function() {
     /*Controller1 is no longer needed and has been destroyed*/
  })
});

As soon as I realized this ressemblance, the “convergence” news got a complete different meaning in my head, prepare Ricardo, awesomeness is on the way!

See ya next time!!

About these ads

3 thoughts on ““Durangular”

  1. Excelent article Ricardo!
    I’ve been using Angular for a while now, along with Typescript, and let me tell you that the experience is great.
    I’m positive that Angular will benefit from Ron’s work to make it even simplier to use.
    I guess if you have to start a new project now and have to decide between Durandal and Angular, Angular is the way to go ;)

    • Thanks for your comment and reblog, Nelson!
      Totally on the same page with you. For new SPA projects Angular is your best buddy, no doubts about that. But as I said if you want to stick with Durandal, nothing is stopping you.
      TypeScript and Angular? I see 2 great benefits there, Productivity, specially if you come from a C# background and Anticipation as
      it´s an intelligent way to have some of the upcoming ES6 features already at your fingertips. Nice! :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s