/mjr-frontend-upgrade-angularjs

This repository shows a migration path from plain old AngularJS (scripts & bower) to Angular, React and Vuejs

Primary LanguageJavaScriptMIT LicenseMIT

mjr-upgrade-angularjs

This repository shows a migration path from plain old AngularJS (scripts & bower) to

  • AngularJS in ES6
  • AngularJS in ES6 + VueJS (custom webpack)
  • AngularJS in ES6 + VueJS (with @vue/cli)
  • AngularJS in ES6 + React (custom webpack)
  • AngularJS in ES6 + React (with create-create-app)
  • AngularJS in Typescript (custom webpack)
  • AngularJS in Typescript + Angular (with @angular/cli & @angular/upgrade)

Orginal code examples adapted from : https://github.com/pranavkotecha88/F1-feeder/

Hybrid apps are hard

A hybrid, combining AngularJS with Angular, React or Vuejs, into a single app is possible but requires good knowledge of both frameworks. If you just starting to learn the new framework you will have a hard time ahead of you.

  • You need knowledge of the internals of both frameworks. How are they conflicting and how are they working together.
  • When things go wrong it's not always clear where the problem is located. You get a mix of AngularJS and Angular/React/VueJS errors. This can lead to confusion.
  • You will have double implementations of some services or utilities. For example you can't re-use a pipe (or filter) in AngularJS vs Angular. You will have to maintain them both.
  • If the couping of components is so high that changes to a single component cannot be isolated from other components it will be hard to migrate without a big re-write.
  • There is litte, no and incorrect documentation/support available to make multiple frameworks work together. Your have to figure it out yourself.

Consider

  • To re-write the app completely. He, you can still re-use the following

    • Html templates
    • Styling (CSS)
    • Rest API
    • Functional requirement
    • (optional) Universal javascript code
    • (optional) Build and continious integration
    • (optional) Deployment

  • To split your app in multiple smaller apps and create the new app's in the new framework

    • Share data between apps via session/local storage and/or cookies.

  • How long are your going to support the old framework? Be carefull that your don't keep the old framework forever.

  • Which team will do the migration? Developers usually prefer to work on green field projects. You should take that into account when planning who will maintain the legacy version and who will work on the new one.

Keep your AngularJS

And finally consider to maybe not to migrate at all. AngularJS will still be supported for a long time. You can modernize your developer setup (webpack, typescript, npm, components, etc) but keep AngularJS for your exiting application.

He, I want to migrate. Which steps should I take?

If you still want to have an incremental migration these are the steps to take.

  • Stop with bower

  • Start with npm & webpack

  • Avoid gulp/grunt in favor of npm scripts

  • Upgrade to the latest version of AngularJS

  • Migrate script tags to ESM (ES Modules)

    • Create ES Modules
    • No more IIFE and 'use strict'
    • Use Import/Export
    • Use Javascript bundler (Webpack)

  • Migrate your javascript (improve your code)

    • Prefer ES6+ language features
    • Prefer to write universal javascript (platform independent)
    • Prefer to follow the AngularJS Styleguide
    • Prefer to follow a JavaScript styleguide (AirBnb, Standard, ...)
    • Prefer AngularJS components (AngularJS v1.5+)
    • Prefer Linter (Eslint) & code formatter (Prettier)

  • Migrate to Typescript (optional for VueJS)

  • Migrate to @Angular/CLI

    • Start with a standard AngularCLI
    • Add/cleanup your favor test setup (Jest, Karma, E2E)
    • Add @angular/upgrade
    • Add AnguarJS and move the old app into the new files structure
    • Separate common code (services, pipes/filters)

  • Or Migrate to @vue/cli

    • Start with a standard Vue CLI
    • Add NgVue
    • Add AnguarJS and move the old app into the new files structure
    • Separate common code (services, filters)

  • Or Migrate to React

    • Start with create-react-app or build your own webpack setup
    • Add react2angular
    • Add AnguarJS and move the old app into the new files structure
    • Separate common code (services)

  • Prefer to separate your AngularJS and VueJS/Angular/React code as much as possible. The router is a good base to make this separation.

  • Prefer to write framework independent code. This code can be shared by both frameworks

  • Write new feature in the new framework

  • When an AngularJS feature changes, re-write it in the new framework

  • When all is migrated to remove AngularJS completely

Angular, VueJS or React

When considering Angular, React or VueJS here some point to take into account:

  • All frameworks are here to stay.

  • Performance is not the issue anymore.

  • Good support and documentation is available for all.

  • Many open source and commercial libraries available for all.

  • Angular is more complete and powerfull but has added complexity:

    • It's an opinionated framework: the Angular way
    • Higher and long learning curve
    • Typescript and typing
    • RXJS and the world of observables
    • Complex/slower bundeling and AOT compilation
    • Dependency Injection
    • Less univeral javascript code
    • Change detection and zones is hard.
    • ES Modules vs Angular modules

  • VueJS is easy to start with:

    • Simple learning curve
    • Vue is really fast
    • More javascript code: objects (classes are also supported)
    • Close to AngularJS template syntax
    • More freedom to choose:
      • ES5 vs ES6 vs TypeScript
      • Callbacks, promises or observables
      • Fetch, Axios, custom http service
    • Easy out of the box support for flux pattern (vuex)
    • Can be used without webpack and runs with ES5
    • Simple change tracking
    • No dependency injection
    • Lightweight (smaller bundles, faster dev cycle)
    • Faster and easier to unit test
    • Average Typescript support

  • React is all aboute pure javascript:

    • Initial high learning curve but gets easier once you know jsx & redux
    • More ES6+ constructions & patterns (more functional approach)
    • More freedom to choose:
      • ES5, ES6, Flow vs TypeScript
      • Callbacks, promises or observables
      • Fetch, Axios, custom http service
    • Works best with flux pattern (redux/modx)
    • Simple change tracking
    • No dependency injection
    • Lightweight (smaller bundles, fastest dev cycle)
    • Faster and easier to unit test
    • Full support for hot reloading (css & code)
    • Full Typescript support

Bundle Sizes/ Build time (prod)

AngularJS Angular VueJS React
Size 200k 620k 334k 118k
Build Time 7sec 27sec 16sec 7sec
Serve 7sec 17sec 8sec 6sec

Different but equal (template syntax)

Angular VueJS AngularJS
[attr]="value" :attr="value" n/a
(click)="onClick()" @click="onClick()" ng-click="onClick()"
(mousemove)="onMove()" @mousemove="onMove()" n/a
{{name}} {{name}} {{name}}
[innerHtml]="rawHtml" v-html="rawHtml" ng-bind-html="rawHtml"
*ngFor="let item of items" v-for="item in items" ng-repeat="item in items"
*ngIf="condition" v-if="condition" ng-if="condition"
[hidden]="!condition" v-show="condition" ng-show="condition"
{{ message | uppercase }} {{ message | uppercase}} {{ message | uppercase}}
{{ msg | upper:5 }} {{ msg | upper(5)}} {{ msg | upper:5}}
([ngModel])="name" v-model="name" ng-model="name"

Resources

Consider VueJS, Angular or React

Libraries

AngularJS and webpack

AngularJS to Angular

AngularJS to VueJS

AngularJS to React