Angular 2: Just Another Development Platform or the Development Platform?

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

Manageable Controllers

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.

Ahead-of-time Compilation

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).

TypeScript

Angular 2 uses TypeScript, and to use Angular 2 effectively, users need to learn it. Angular 2’s TypeScript is a superset of JavaScript and it transpiles to JavaScript ES5/ES6/ES-X.

Angular 2’s TypeScript offers:

  • Static typing
  • Compile time error checking
  • Object-oriented
  • Classes (new in ES6)
  • Lamdba/Arrow functions (new in ES6)
  • Use of existing TypeScript libraries

Web-Component Friendly

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.

Angular 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.

Client Side:

  • HTML 5
  • TypeScript
  • Angular 2
  • Bootstrap 4
  • SASS
  • js
  • NPM (Node Package Manager)
  • GULP: Task Runner
  • Webpack: Module Bundler
  • Karma: Test Runner
  • Jasmine: Testing Framework
  • Visual Studio Code or MS Visual Studio

Server Server-Side:

  • 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.

By | 2017-03-16T09:24:17+00:00 March 15th, 2017|

About the Author:

Steve Yerkes is a Senior Software Engineer with over 16 years in software and web application development. Steve is also an avid reader with a passion for philosophy.

Sam Ellis is a .Net Developer with over 10 years of project experience. He is practiced in CRM, ERP, and EAM implementations. Sam enjoys mountain biking, building race cars, and being outside.

One Comment

  1. Jessica Barnes August 24, 2017 at 3:18 am - Reply

    Best suited for mobile app development — The initial versions of AngularJS did not care to mobility oriented factors. The latest version focuses more on mobile specific trajectories the developers were longing all along.

Leave A Comment

WordPress spam blocked by CleanTalk.