switching enterprise-level angularjs 1.x apps to 2...is it worth upgrading to angular >=2.0 ? l...
TRANSCRIPT
Switching Enterprise-level AngularJS 1.x Apps to 2.0Souvik Basu, Freelance JavaScript Developer and Trainer, MeanHub
ENTERPRISE APPS
What defines an Enterprise app?
l Larger code basel Created over a period of time
l Big Feature List l With hundreds of Routes
l Distributed teaml Typically Geographically separatedl Varied skill levels
l Existing User basel Hundred thousand or even million
l High amount of Transactions per secondl With high availability of Service
What are the needs of an Enterprise app?
l Backward compatibility l Cannot afford to break older deployments in use
l Frequent Releasesl Time to market is importantl Feature list is ever growing
l Solid CI pipelinel Automation for regressionl Continuous delivery (preferably)
l QA across a big siteLarge QA teams who need faster releases of features
.
What parameters are we interested in?
l Debugabilityl While upgrading from 1.x to 2, all code cannot be debugged
l Performance l Performance of application should be acceptable during the upgrade
l Understandabilityl Clean code for upgradel Ramp up of team on new technologies
l Refactoring and toolingl IDE should work with both versions for refeactoringl Auto completion
l .
Is it worth upgrading to Angular >=2.0 ?
l Benefitsl Faster bootstrapl Future proof
l ES6l Active development, Community support
l Can handle large number of objects in Modell Better handling of Application complexity
l Component based architecturel Emulated - Shadow DOMl Module based DI
l Better Change Detectionl AOT
l
Is it worth upgrading to Angular >=2.0 ?
l Downsidel Learning Curve
l TypeScript, ES6 l JavaScript Modules, classes, arrow function, event handlingl Obervables, RxJSl Module loaders l Styling binding to DOM properties rather than attributesl Input, Output, EventEmitter, Router, Providers.. .. ..
l Existing Team Skillsl Unpredictability during Upgradel Support by 3
rd
Part libs
Is it worth upgrading to Angular >=2.0 ?
l Downsidel Size of the application
l Actually this is the MOST important point!
PREPARATION FOR UPGRADE
Did you follow Best Practices?
l Test Coveragel Unit, Integration, Screenshot, Compilation testsl Tests Automationl Enough Test Coverage
l Angular Best Practicesl Component based designl Single component per filel Divide application into modulesl Avoid using private variables in AngularJS lib ($$)
Did you follow Best Practices?
l Loggingl Error Handling
l Abstraction Layersl Reuse componentsl DRY. Avoid copy paste of code
l Full SPAl Install dependencies using npml Use .service() instead of .factory()
UPGRADE STRATEGIES
Big Bang or Incremental?
l Big Bangl Small and Medium size appsl Messed up Enterprise Appsl Enough Time to Market and Budgetl All New Projectsl Autonomous teams
l Incrementall For Enterprise apps currently deployed in productionl Small Agile teams: Small iterative fixes l Distributed teams
Big Bang or Incremental?
l Bangalore 1.0 → Bangalore 2.0l
l
l
l
l
l
l Increasing User base Accommodate more Usersl Already in Production High Performancel Slow Infra Handle more features and complexitiesl Better UX. More green cover
Big Bang or Incremental?
l Problems with creating a New Bangalore 2.0 city from scratchl Very High Cost of Creationl Long time of Development and Completionl Complexity in migrating existing population to new cityl Where to create new Multiplexes and Shopping Malls?
l New city or Old city?
l Advantages of Creating a New Bangalore 2.0 city (e.g. Amaravati)l Very well planned l 10 lane roads throughout the cityl Well created using latest tools and machineryl Lesser bugs (and potholes!)
INCREMENTAL UPGRADE
Ways to do Incremental Upgrade
l Use Existing AngularJS app and upgrade components to Angular one by one
l Component by Componentl Feature by Feature (Route by Route)l Module by Module
l ngUpgradel Dependency Injectionl Component Nestingl Content Projection / Transclusionl Change Detection
Step 0
l Bridging the gapl JavaScript → TypeScriptl Concatenated all.js → Modulesl Module loaders
l Webpackl System.jsl Browserify
l Bootstrapping AngularJS and Angular side by sidel Angular inside AngularJS or AngularJS inside Angular?
Top Down or Bottom Up?
https://github.com/souvikbasu/angular-upgrade
Migrating Services
l Rewrite if possiblel Since there is no hierarchy of servicesl Services are plain classes
Migrating Routes
l Use AngularJS as well as Angular Routes togetherl <router-outlet></router-outlet>
l <div ng-view></div>
l Routes per modulel Separate Modules for AngularJS and Angular
l
Migrating Filters → Pipes
Migrating Tests
l Significant changes in Unit tests to match current codel Protractor tests using angular matchers will need minor
modificationsl ng-repeatl ng-model
protractor-conf.js → ng12Hybrid: truel
Watch out
l Finish off the Upgrade as soon as possiblel Certain things do not work in Upgrade
templateUrlstyleUrls
l You need to add the upgraded Angular component in entryComponents to use in AngularJS
l Do not try to include AngularJS component into Angular.. it gets messy soon
l
l
What about 4.0 and beyond?
l Releases every 6 monthsl Only upgrade npm packages
l
l
npm i @angular/common@next @angular/compiler@next
@angular/core@next @angular/forms@next @angular/http@next
@angular/platform-browser@next @angular/platform-browser-
dynamic@next @angular/platform-server@next @angular/router@next
typescript@latest --S -E
npm i @angular/compiler-cli@next --D -E
REFERENCES
References
https://angular.io/docs/ts/latest/guide/upgrade.html
https://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html
https://docs.google.com/document/d/1xvBZoFuNq9hsgRhPPZOJC-Z48AHEbIBPlOCBTSD8m0Y/edit
https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b
Thank you@souvikbasu
