Paradigms Patterns & Practices

A migration readiness test.

Angular lists 4 things you need before you are ready to upgrade.

An honest application evaluation for Angular 2 readiness.

How well does your application align with these preparation steps?

Align with the Angular Style Guide

The official Angular Style Guide is actually owned and maintained by John Papa. It has long been the defacto standard and was fairly recently been officially adopted by Angular.

 

The good news is that if you have closely followed and kept up with current stack recommendations on file structure, organization and architecture, you are already in-line with the style guide.

Where's my app?

Use A Module Loader

Module loaders (or bundlers) are a build time tool that allow for modularizing JavaScript files. JavaScript modules have not yet been implemented by any engine. Module loaders work by bundling referenced modules into a single file at build time.

 

The most common module loaders are Browserify, Webpack and System.js. Any of these work for upgrade purposes. The JavaScript stack uses Browserify.

Where's my app?

Migrate To TypeScript

The Angular team has chosen TypeScript as the preferred language for writing Angular 2 applications, going so far as to write the Angular 2 code base in it. Angular 2 technically supports any compile to JS or plain JS, but modules and patterns sometimes differ and those discrepancies must be sussed out in the documentation. 

 

If your team intends to move a project to Angular 2. It's best to follow Angular's preferred tools.

Where's my app?

Use Component Directives

Angular 1.5 introduced a way for creating directives as a component with the component method. This method is sugar on top of the directive method that removes boilerplate for this particular kind of directive. It is also the closest analog for Angular 2 components within Angular 1.

Angular 1.5 was officially release Feb 8, 2016. Fortunately, the MWS has been recommending using directives in the manner component creates it for some time, so moving to it will relatively easy.

Where's my app?

MWS "component" in Angular 1.4

Angular 1.5 official component

/* version-directive.js */
export default () => ({
    scope: {},
    bindToController: {
        v: '@'
    },
    controller: 'VersionController',
    controllerAs: 'vc',
    restrict: 'E',
    template: `<p>Current version is {{vc.version}}</p>`
});

//app.js
import version from './components/version/version-directive';
...
.directive('versionNumber', version);
/* version-component.js */
export default {
    bindings: {
        v: '@'
    },
    controller: 'VersionController',
    template: `<p>Current version is {{$ctrl.version}}</p>`
};

/* version-directive.js */
import version from './components/version/version-component';
...
.component('versionNumber', version);

Self Assessment

Take some time to honestly assess your application and it's compliance with Angular's preparation steps. To get a rough idea of how much work would be involved in getting ready for an upgrade, take the number of stars given to your application and divide it by 20

Where's my app?

%Ready = Stars / 20

Bonus Preparation Steps

Bootstrap with JavaScript

It common practice to bootstrap an Angular 1 app with the `ng-app` directive.

<body ng-app="myApp">
...
</body>

This method is not possible in Angular 2. Instead, you should bootstrap your app within JavaScript.

angular.bootstrap(document.body, ['MyApp']);

Missing the Obvious.

Don't forget, the reason you had to do all this is to be prepared to move to Angular 2, so you better learn that as well.

The Quickest of Quick Views

The Component is the most fundamental of Angular concepts.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Angular components are controller classes decorated with metadata that describe the view.

Angular applications are simply compositions of components fed data via services.

Learning Angular 2

Angular provides a quickstart guide for laying down the bare essentials for an Angular 2 application which consist of the following files.

  • Angular 2
  • Systemjs
  • es6-promise
  • es6-shim
  • reflect-metadata
  • rxjs
  • zonejs
  • concurrently
  • typescript
  • lite-server

Upgrade options

One fell swoop.

 

You can rewrite your app into Angular2. That not really a migration, but you may find this is less work or more advantageous than the other strategies.

1

Option

Looking Forward

 

You can use ngForward (v0.0.1-alpha2 at the time of this writing) which essentially transpiles mostly Angular2 code to Angular1.

 

It's "mostly" Angular2 code because it does have it's own syntax and APIs that are not completely inline with Angular2 and would break within an Angular2 environment.

2

option

Upsize

 

You can use the ngUpgrade module from Angular.

3

option

When we use UpgradeAdapter, what we're really doing is running both versions of Angular at the same time. 

It will be up to each project to decide whether the tradeoffs that come with downloading and running 2 frameworks simultaniously in the browser are justified.

Current Version + Current Architecture.

The steps needed to prepare to move from Angular 1 to Angular 2 are the same steps needed to bring your app inline with JavaScript stack standards, which are the same as the Angular style guide. It is not just about having the latest framework or library versions. It's also about having the right architecture.

 

Angular 1.x changed recommended architecture several times. It went largely unnoticed because it remained backwards compatible. Angular 2 changes that.

Final Thoughts

Currently the only recommended front end application framework is Angular 1.x. We looked at Angular 2 today because it is expected to be a significant player in the front end space when it is released.

Regardless of any recommendation the stack team may make, It is valuable for every front end developer to understand the lay of the land in the broader front end community and to be familiar with the main contenders their.

It is important for us to provide transparency to our process and be receptive to feedback and suggestions for those who use our tools or follow our guidelines. Our goal is to build a front end culture and community at ICS.

So you think your ready to "migrate" from Angular 1 to Angular 2

By Cory Brown

So you think your ready to "migrate" from Angular 1 to Angular 2

  • 1,241

More from Cory Brown