Web Technologies - Angular (Part 1)

4 July 2017
by Marcos Cereijo This is the first post of a serie about web technologies that we can use to build high quality SippoJS applications. These topics can be very dense so we will only offer an overview of these technologies. In the following weeks we will introduce some other tools, such as the framework for styling our web page or the tool for generating the packages for production. Introduction Building a pure JavaScript application without the help of any framework is an arduous task and error-prone. Therefore, the best idea is to choose one of the available frameworks to start building our application. We have a lot of JavaScript frameworks to choose. Some of the available frameworks are ReatJS, Vue.js, Meteor.js and Ember.js. However, our selection is the one with the largest community, Angular. Angular is powered by Google and it was previously introduced as AngularJS. AngularJS (1.x) AngularJS is a JavaScript framework that  was launched in 2010. When it arrived, it was one of the biggest surprises of the year. It offered to the developer a fast way to create MVC applications and write tests. It simplified a lot of task that can be a headache like model-view communication, http data retrieval or writing unity and end-to-end tests . Nowadays a lot of developers continue to use this version of the framework although a newer version was released. Angular (2.x)This version of Angular was released on 2016 and it was released in two flavors: JavaScript and TypeScript. However the TypeScript version is strongly recommended. The inclusion of TypeScript is the reason of the name changing from AngularJS to just Angular. Nevertheless the main disadvantage about this version is that it is incompatible with AngularJS. This is the reason why a lot of developers are still using AngularJS and they don’t step forward using Angular. One thing that we need to know is that the browsers doesn’t understand TypeScript. The code should be transpiled to JavaScript in order to be understood by the browsers. However this disadvantage is clearly overcome by the new features that TypeScript offers us:
  • Static typing: JavaScript doesn’t have variable types. With JavaScript you can assign an integer to a variable and later a string. This way we don’t need to know anything about variable types, but this is error-prone and potentially dangerous. TypeScript come to solve this issue.
  • Classes: With JavaScript you can simulate this behaviour, but it is difficult to understand and it generates low quality code. TypeScript gives us classes in a similar way that Java does.
TypeScript: 
class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
JavaScript: 
var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
  • Code linting: The text editor will give us feedback about the errors in our code at the same time we are programming.
  • Inheritance: This will allow us to reuse and extend our classes with new attributes and methods.
To be able to use SippoJS or other JavaScript libraries inside a TypeScript application, we have two alternatives: 1 - Rewrite the entire library to TypeScript. 2 - Create a definition file to reuse the JavaScript library. The first solution isn’t a good idea. You need almost to start from scratch and you should maintain booth libraries. The second solution, however, allow us to reuse the code we have developed and to add all the TypeScript capabilities. Clearly we have chosen the second alternative. Another difference with AngularJS is that they stopped using controllers and scopes. Now everything is a component. Components are TypeScript classes that are used to display data in the templates. which is their only purpose. They don’t retrieve data from a backend and neither do complex tasks. If we need to do so, we will need to use the Services. Angular (4.x.x) This is the current angular version. It doesn’t include many changes and it is just an evolution. This is the version that we have chosen for our new projects. The angular team decided to use the version number 4, instead of 3. The reason to do so is that they were forze to launch a new version of their routing package. With this change all the package versions are now aligned. That means that if you use @angular/core: 4.0.0, it will be compatible with @angular/router: 4.0.0. They also started using semantic versioning. That means that the version number will have three numbers separated by dots (major.minor.path). The meaning of this numbers are:
  • Major: Potential breaking changes.
  • Minor: New features, but without breaking changes. All should be working as before.
  • Patch: Bug fixing.
Now the goal of the Angular team is to forget the version number and call their product just Angular. Their plan is to launch a major version each 6 months and periodic patches. Conclusion In this post we got an overview about what Angular is and its history. In the next post about Angular we will get a glimpse about Angular template binding and how to import the SippoJS library in TypeScript. References [1] AngularJS: https://docs.angularjs.org/guide [2] Angular: https://angular.io/docs
Next article

iOS 11 and WebRTC Support

by Santiago Troncoso Finally it’s out. Apple joins the WebRTC train and announces the support of the Javascript API into Safari v11. This will come w[...]

Scroll/Click to continue reading
Click to continue reading