Modern Web with Angular 2

16 Dec, 2016 | 3 minutes read

Angular 2 is a modern MVC (Model-View-Controller) based JavaScript Framework for single-page web applications and native mobile applications development, developed by Google. It is written in TypeScript – a strict superset of JavaScript which makes the documentation more comprehensible. TypeScript as a language transcompiles to core JavaScript and introduces types, new data structures, and more object-oriented features that make the code easier to read and maintain compared to vanilla JavaScript.

Microsoft develops and maintains TypeScript as a programming language and collaborates with Google in order to make Angular 2 a better framework. Angular 2 with TypeScript is integrated in Microsoft’s integrated development environments such as Visual Studio and Visual Studio Code.

Modern Web with Angular 2

Our experience so far?

Excellent! Just 15 days after the official product release we had finished our first outsourcing project using Angular 2. We started the project with one of the RC candidates and almost every 1-2 weeks we were upgrading it to a newer version. That was a very interesting process. With Angular 2, people with an OOP background will feel comfortable and more productive. However, working on cutting-edge technology almost always comes with a cost. We needed to learn, research, play, and experiment with Angular 2 and TypeScript.

The system we were working on is used inside the web browser and also on mobile. Mobile devices keep getting more powerful, but they are still quite underpowered and have less data bandwidth when compared to a modern desktop. When working on a system that will be used on mobile we should know that aside from limited processing power, mobile devices have other features and limitations that separate them from traditional computers. Touch interfaces, limited-screen real estate, and mobile hardware have all been considered. With Angular 2 we achieved the maximum speed possible on the Web Platform today via Web Workers and server-side rendering. Angular 2 helped us control scalability. Also, routing is not an issue that we had to worry about on the server side. We met the huge data requirements by building data models on RxJS and Immutable.js. Integrated constructor-based dependency injection and routing saved us a lot of time on our project.

Modularity comes with many different building blocks and covers all common scenarios in web application development. Using the building blocks such as “Module” and “Component” enabled us to implement different functionalities in a separate way.  Our application contains one main module with multiple child modules. On the other hand, each module contains at least one component out of which we implemented different functionalities and controlled some part of the screen by calling a view.

Component is a TypeScript class with the proper decorator which enabled us to represent every specific piece of view on a single page in an object-oriented way. Passing data and communicating between the components now is quite easy with the use of event subscriptions. This gave our application high cohesion and loose coupling.

Conclusion

Angular 2 as one of Google’s main projects that is also supported by Microsoft, enjoys great popularity. That’s why we as a company started exploring and using this framework when it was in the Release Candidate version. Google releases new versions almost every week. Every new release of Angular 2 brings new features, new best practices, and performance improvements.

The official release date of Angular 2 was 14th of September 2016 and it is already used by over 500 thousand developers. The framework also has a lot of interesting points and a vision that few other frameworks have. It has been designed for the Web of tomorrow, with ECMAScript 6, Web Components, and Mobile in mind.