Depending on who you talk to, Angular 2 is either simply another development platform, or it is the development platform for building mobile and desktop web applications. Those that consider it the platform do so because Angular 2 is opinionated: its application structure is standardized, and its code is organized and modular.
The purpose of this post is to briefly explain Angular 2 so that a developer can quickly understand how the framework functions and performs. Additionally, we will explore some of the differences between Angular 1 and 2 so developers can see where the Angular development path is heading.
Web Development Frameworks
The past few years have shown huge changes in web development UI frameworks. Many players have emerged with their own followings and, as with all frameworks, each has a focus and strengths and weakness. The timeline above highlights some of the most popular UI frameworks. Each has a distinct focus, and some are ever evolving, but all have influenced each other as the development community has learned from each project and tried to build a better future.
Angular 2 versus Angular 1
Angular 2 is easier to use than Angular 1 and it performs 5x faster. One reason why Angular 2 is easier: it doesn’t have the $scope, $digest, $apply, or controllers that Angular 1 had. Instead it has components and directives. This allows for a more modular approach that is focused on object oriented design.
Also, Angular 2 offers ahead-of-time compiling rather than just-in-time compiling. The Angular 2 browser downloads a pre-compiled version of the application and presents a smaller payload (1/2 the size of JIT compiling).
Angular 2’s TypeScript offers:
- Static typing
- Compile time error checking
- Classes (new in ES6)
- Lamdba/Arrow functions (new in ES6)
- Use of existing TypeScript libraries
Angular 2 is web-component friendly. Web Components are a future W3C standard (for making re- usable widgets). Angular 1.x will not work with Web Components without using hacks.
Components & Directives
Components: Directives [are offered] with a template like the controller in Angular 1.
- Structural Directives: Change the DOM layout by adding and removing DOM elements.
- Attribute Directives: Change the appearance or behavior of an element.
- Angular 1 was an MVC framework.
- Angular 2, is component-based framework.
- An Angular 2 application is a collection of loosely coupled components.
What do the components look like?
In the example below, the application can be shown broken down into its individual components. The design paradigm behind Angular 2 is to build typed, loosely coupled components that are highly reusable.
Example Component Code
The code below shows an example Angular 2 component written in TypeScript. You can see how the design has switched its focus to be on reusable, independent components instead of following the Model View Controller pattern that was the paradigm of Angular 1.
If you consider the changes this will effect on your next application, there are definitely some ups and downs. Still, with a focus on ease of reuse and strong typing, Angular 2 should afford you efficient and highly testable code.
Web Application Technology Stack for 2017
The following is our recommendation for leading edge development in 2017. Web technologies are constantly evolving, but this stack will be highly maintainable and efficient allowing developers to build better apps faster and easier than ever before.
- HTML 5
- Angular 2
- Bootstrap 4
- NPM (Node Package Manager)
- GULP: Task Runner
- Webpack: Module Bundler
- Karma: Test Runner
- Jasmine: Testing Framework
- Visual Studio Code or MS Visual Studio
- NET Core
Should I use Angular? What does its future look like?
Angular’s roadmap has recently come under fire in the development community. The switch to Angular 2 was already such a drastic breaking change, and many where aghast when Angular 4 was announced just a few months after Angular 2. The goal of Angular going forward is to switch to Semantic Versioning practices allowing a clearer, less fragmented, upgrade path so that applications can be more easily maintained.
Ultimately, as with selecting any library for use in your application, there are many things to consider when deciding whether Angular is right for you. Two things that are clear: Angular is continuing to push the future of web development and the team’s efforts to standardize development should benefit us all – this is true regardless of what platform we choose to build our apps with.
Angular will be around for awhile. Have you noticed the push to simply call the platform “Angular” instead of “Angular version X”? This shows the platform’s continuity.
There is no denying that the work put into Angular as a platform has made huge waves in the web development world, and there is no indication that future changes to Angular will have any less of an impact.