Angular 2 First Impressions from the Wijmo Dev Team

The Wijmo team has been working intensely with Angular 2 for a few months now. It has been challenging to keep up with the Angular team and their rapid iteration. But since the Beta, things have stabilized and we have been able to migrate a significant portion of our sample applications already. I asked our dev team to provide some of their first impressions of Angular 2. Below are their responses.

Alex Ivanenko

• Angular 2 is a modern OOP environment, backed by TypeScript that provides strict type checking.
• Components are the unified mechanism for creation of any part of an application, from the application itself, to separate pages, to small UI controls. If you know how to create one of them then you immediately know how to create the others.
• Angular 2 offers great encapsulation. The ubiquitous component approach forces you to create self-sufficient parts of an application that are automatically ready for re-use in other places of the application.
• Applications are constructed as a tree of component instances, with easy access to each instance. By marking a component element in markup with a local template variable (e.g. #var) you get access to its instance with all its properties and methods that can be used in both markup binding expressions and TypeScript code.
• In our scenario, Angular 2 gave us the ability to easily turn any existing TypeScript class to an Angular component. Just create a new class derived from it, add a @Component decorator and you are done. You can then use this class in Angular markup.
• No more “scope”. The ubiquitous “scope” present in Angular 1 is gone in Angular 2. This special variable existed mostly to enable change tracking, with its “$watch” and “$apply” methods. It is no longer needed; Angular 2 tracks changes transparently, and that allows developers to use pure/standard JS objects as controller members.
• No more $watches. You know about property change right in the property setter method. Or alternatively you can use the ngOnChanges lifecycle hook method if you prefer to process all the changes in a single place.

Bernardo de Castilho

Angular 1.x is nicer than Knockout because it lets you use plain JS classes without ko.observable wrappers all over the place. And Angular 2 is nicer than Angular 1 because it lets you use plain JS classes without $scope wrappers all over the place. It’s another step in the direction of pure/clean/standards-based JavaScript apps. Take a look at the Angular ToDo sample app:

• In Angular 1.x: http://jsfiddle.net/icoxfog417/nLC3g/
• In Angular 2.x: https://github.com/davideast/ng2do

The Angular 1 implementation looks like this:

function TodoCtrl($scope) {  
  $scope.todos = [];  
  $scope.markAll = false;  

  $scope.addTodo = function() {  
      if(event.keyCode == 13 && $scope.todoText){  
          $scope.todos.push({text:$scope.todoText, done:false});  
          $scope.todoText = '';  
      }  
  };  
  $scope.isTodo = function(){  
      return $scope.todos.length > 0;   
  }  
  $scope.toggleEditMode = function(){  
      $(event.target).closest('li').toggleClass('editing');  
  };  
  $scope.editOnEnter = function(todo){  
      if(event.keyCode == 13 && todo.text){  
          $scope.toggleEditMode();  
      }  
  };  

This is not great code, there’s DOM manipulation from the controller, etc. But the point is there’s references to “$scope” all over. This is typical, and it is not nice because “$scope” is an artificial element imposed by Angular. It is not standard/plain JavaScript. Contrast that with the Angular 2 implementation:

@Component({  
  selector: 'todo-app',  
  componentServices: [  
    TodoStore  
  ]  
})  
@Template({  
  url: 'todo.html',  
  directives: [Foreach]  
})  
class TodoApp {  
  todoStore: TodoStore;  
  todoEdit: any;  
  todos: Array;  

  constructor(store: TodoStore) {  
    this.todoStore = store;  
    this.todoEdit = null;  
    this.todos = store.list;  
  }  
  enterTodo($event, newTodo) {  
    if($event.which === 13) { // ENTER_KEY  
      this.addTodo(newTodo.value);  
      newTodo.value = '';  
    }  
  }  
  editTodo($event, todo) {  
    this.todoEdit = todo;  
  }  

Angular 2 is pure JS. Much nicer, isn’t it?

Hao Wu

My first impression is that Angular 2 introduces much more server-side-centric concepts like OOP, DI (Dependency injection is an independent module in Angular 2) and annotation. The following are the most useful to me during porting sample applications from NG1 to NG2:

• It separates view and model clearly, developers can focus on logic; spend less time on interaction between model and view.
• DI makes it easy to get a service instance.
• When using annotations to add metadata to a class, the code structure becomes more simple and clear.
• No more controllers and $apply; the property in component class is a more convenient way to interact with view.

Bella Aye

We found Angular 2 has better project architecture and that the coding style is simpler. Personally, I prefer Angular 2 applications written in TypeScript because they’re more understandable and easy to modify. I don't see much difference in performance of between Angular 1 and Angular 2 samples as people said. I believe this will change in the near future.

Lianbo Lu

Data binding in Angular 2 is much easier than in Agular 1. Angular 2 clearly differentiates syntax with []/() for one-way binding and [()] for two-way binding. The bindings also work great with our input controls. I don’t see much difference with our data visualization controls in Angular 2. In most cases, the properties of these controls never change. This makes migrating applications that use our controls very easy.

Ross Dederer

As someone who does not do regular Wijmo development on a day in and day out basis, IntelliSense was very beneficial to me. Much like our customers, I don’t have all the Wijmo APIs memorized, but luckily I didn’t have to. In Visual Studio, I was given autocomplete suggestions for my code, which means I did not have to check the documentation to figure out a property name. For example, sometimes I can’t remember if our data binding property is: itemsSource or itemSource. Working with TypeScript in Visual Studio makes Angular application development much easier. By being able to address errors at compilation time, I was able to reduce the amount of time I had to spend in the browsers debugger trying to figure out bugs. The development process just seemed so much more natural than it did with Ng 1. It really felt like true MVVM and I felt like I was programming the way MVVM was intended to be developed. I still sort of personally struggling with the how to migrate controllers or business logic because you cannot re-use them like you can in Ng 1. In Ng2 I believe you need to make a base class and extend that or import that to other modules. I think the Explorer sample shows this. The migration just seems tough to explain in words.

Summary

I hope our team’s experience might provide some insight into Angular 2 for you. To summarize everyone’s feedback: Angular 2 is a modern application framework. It feels very familiar to developers like us (with a C# background). Components are a major centerpiece in Angular 2 and that is great for us (component developers). Once we understood the concepts, migrating applications was very smooth. Get started with Wijmo's high performance components for Angular 2.