Angular 2 Upgrade Webinar · 2017-02-09 · Run actual Angular 2 code alongside AngularJS 1. §...

Angular2UpgradeWebinarTravisRogers,JenWagler,Eyitayo Oredola - Feb2017

CompanySummary

§ PrivatelyheldITservicesfirmspecializinginDataManagement/BigData/AnalyticsandFullLifecycleApplicationDevelopmentConsultingServices

§ 150+IntersysconsultantsdeliveringITsolutionsacrosstheUS§ OfficeLocationsinAustin,Phoenix,andNYC§ OffshoredevelopmentcenterinKochi,India§ ProvidingservicesacrossthefullITspace§ Leveragealocal,nationaland/orglobalmodelasappropriateforeachcustomerandengagement

©IntersysConsulting– Intersys&ClientConfidential2

§ MediaandAdvertising§ RetailandHospitality§ FinancialServices§ Healthcare§ HighTechManufacturing

Overview

KeyIndustries CoreValues Recognition§ BeAccountable§ BringExcellence§ BeAuthentic§ BeinServicetoOthers

©IntersysConsulting– Intersys&ClientConfidential3

TechnologyStaffing

CorePracticeCapabilities

©IntersysConsulting– Intersys&ClientConfidential4

BigData &Analytics

EnterpriseSearch

BusinessIntelligence

Analytics/DataScience

ApplicationServices

AssessmentQualityAssurance

Project&ProgramManagementStrategy&Roadmap

InformationManagement

BigData

Front-endEngineering

AgileTransformation

CustomDevelopment

CloudandMobility

DevOps Cloud

QualityAssurance

PackagedSolutions

ProjectManagement

Infrastructure

Agenda• Introduction

• Overview

• KeyBenefitsofUpgradingtoAngular2+

• WhatarethedifferentmigrationpathsfromAngularJS1.xtoAngular2+

• Whataretheprosandconstoconsiderforeachmigrationpath

• Whattoolsthereareavailabletohelpwiththemigrationprocess

• ClosingandQ&A

WhatarethebenefitsofupgradingfromAngularJS1.xtoAngular2.0

KeyBenefits

§ModernArchitecture§ Components§ ObservablesRxJS§ TypeScript

§RenderApplicationLogicSeparation§ Angular2ArchitectureChanges

§CrossPlatformDevelopment§ NativeScript,IonicFramework,Electron,ReactNative

§AngularCLI§ Speed&Performance

§ CodeSplitting,AOT,UniversalInitialLoad

Components

©IntersysConsulting– Intersys&ClientConfidential8

§ComponentClass §ComponentFileStructure

GonearethedaysofactuallycreatingHTMLstructuresand“pages”(what’rethose?).Thewebisbecoming“allaboutcomponents”,andthosecomponentsarecompletelyuptousthankstoWebComponents.ToddMotto,2014.

Component– Input/Output

©IntersysConsulting– Intersys&ClientConfidential9

• Inputsyntax@Input()

• Outputsyntax@OutputwithusingtheEventEmitterclass

§ Input/Output Example

ComponentLifeCycle

©IntersysConsulting– Intersys&ClientConfidential10

§CommonLifeCyclehooksUseDoCheck lifecyclehooktodetectchangesthatAngulardoesn’tcatch

ComponentMarkup§ In-line

©IntersysConsulting– Intersys&ClientConfidential11

§ExternalFile

Style’sdefinedbycomponentscanbeisolatedfromglobalstyleseliminatedconflicts.

ReactiveProgrammingwithRxJS

Angular2usesinRxJSobservablesintwodifferentways§ Forinternalimplementationforitscorelogic§ InitspublicAPIwithFormsandHTTPModel

Angular2Developerscanmakeuseofthereactiveprogrammingintheircode.

Youcanstillusepromisesifyoulike

©IntersysConsulting– Intersys&ClientConfidential12

Observables§RxJSisusedforHTTPRequests

©IntersysConsulting– Intersys&ClientConfidential13

Service Component

Observablesvs.Promises

§Observablescandefineboththesetupandteardownaspectsofasynchronousbehavior.

§Observablesarecancellable.§ObservablescanberetriedusingoneoftheretryoperatorsprovidedbytheAPI,suchasretryandretryWhen.Promisesrequirethecallertohaveaccesstotheoriginalfunctionthatreturnedthepromiseinordertohavearetrycapability.

©IntersysConsulting– Intersys&ClientConfidential14

TypeScript

§ClassandModuleSupport§StaticType-checking§ES6FeatureSupport§WellDocumentedandSupported§SyntaxSimilaritytoBackendLanguages(.Net,Java)§SupersetofJavaScript

©IntersysConsulting– Intersys&ClientConfidential15

RenderApplicationSeparation

©IntersysConsulting– Intersys&ClientConfidential16

§Angular2splitstheapplicationlogicfromtherenderlogic

ApplicationLogic

Renderer

CrossPlatformDevelopmentWithAngular2’smoveawayfromDOMdependency,madecrossplatformdevelopmentmucheasier

©IntersysConsulting– Intersys&ClientConfidential17

AngularCLI

©IntersysConsulting– Intersys&ClientConfidential18

TheAngularCLImakesAngulartasksavailablefromthecommand-line

• GeneratingaNewProject• GeneratingComponents,Directives,Pipes

andServices• GeneratingaRoute• CreatingaBuild• BuildTargetsandEnvironmentFiles• Basetaghandlinginindex.html• Bundling

• RunningUnitTests• RunningEnd-to-EndTests• ProxyToBackend• DeployingtheAppviaGitHubPages• Linting code• Commandsautocompletion• Projectassets• Globalstyles

PerformanceEnhancements

©IntersysConsulting– Intersys&ClientConfidential19

CodeSplitting Ahead-of-TimeCompilation

UniversalInitialLoad

AngularappsloadquicklywiththenewComponentRouter,whichdeliversautomaticcode-splitting,sousersonlyloadcoderequiredtorendertheviewtheyrequest.

Ahead-of-timecompilationallowsforfasterrendering,fewerasynchronousrequests,andsmallerAngularframeworkdownloadsize.

Servethefirstviewofyourapplicationonnode.js,.NET,PHP,andotherserversfornear-instantrenderinginjustHTMLandCSS.Also,pavesthewayforsitesthatoptimizeforSEO.

WhatarethemigrationpathsforthedifferentversionsofAngularJS1.x

MigrationPaths

§MigrationOptionswhenUpgradingtoAngular§Options(pros/cons)

§ PathsforAngularJS1.xto2.x+§ DecidingwhichPath

§FutureofAngular

©IntersysConsulting– Intersys&ClientConfidential21

MigrationOptions

©IntersysConsulting– Intersys&ClientConfidential22

Rebuildtheentire

Application

RebuildIncrementally

RebuildIncrementally

§ Pros:§ NewfeaturescanbewritteninAngular2+§ Convertolderfeatureswhenneeded§ Nocodefreeze§ Previoustestscanconfirmrewritesuccess§ ngUpgrade Module

§ Cons:§ TimeIntensive§ HybridApplication§ Versions1.2/1.3/1.4shouldbeupgradedto1.5+

©IntersysConsulting– Intersys&ClientConfidential23

AddFeature

ConvertFeature

AddFeature

ConvertFeature

RebuildwithAngular2+

§ Pros:§ Cleanconversion§ PureAngular2+application§ AngularCLI tool

§ Cons:§ Timeintensive§ Codefreeze§ Introducenewissues

©IntersysConsulting– Intersys&ClientConfidential24

Upgradeto1.5+Rebuildin2.0+

UpgradefromAngularJS1.xto2.x+

©IntersysConsulting– Intersys&ClientConfidential25

1.x2.x+

Decisions?

§Training§CurrentApplicationversion§SmallapplicationvsBigapplications§Folder Structure§HybridApplication§Testing§Application retirement§WWGD?

©IntersysConsulting– Intersys&ClientConfidential26

JustAngular!

©IntersysConsulting– Intersys&ClientConfidential27

SemanticVersioningSEMVAR

©IntersysConsulting– Intersys&ClientConfidential28

3.0.0••MajorVersionPotentialBreakingChanges

3.1.0••MinorVersionNoBreakingChanges

3.1.1••PatchorBugFixesNoBreakingChanges

ReleaseSchedule

PatchVersioneveryWeek

MinorVersioneveryMonth

MajorVersionevery6Months

©IntersysConsulting– Intersys&ClientConfidential29

PredictableandSteady

©IntersysConsulting– Intersys&ClientConfidential30

Major VersionRelease Timeframe

Angular4 March2017

Angular5 Sept/Oct2017

Angular6 March2018

Angular 7 Sept/Oct2018

Whattools thereareavailabletohelp withthemigrationprocess

MigrationandTools

§MigrationOptions§ BeforeAngular2

§ Tools§ ngForward§ ngMetadata

§ AfterAngular2§ Options

§ Versions1.2+§ Versions1.5+

§ Tools§ ngUpgrade

Migration:BeforeAngular2

©IntersysConsulting– Intersys&ClientConfidential33

1.3

1.5+

1.4

ngForwardOpensourceprojectthatpreparesyourAngular1codetolooklikeAngular2

§ Pros:§ Quick§ GetusedtoAngular2syntax§ BestusedifnotgoingtoupdatetoAngular2anytimesoon§ AddsSystemJSconfigurationtoyourproject

§ Cons:§ Notacompleteupgradesolution§ Nolongerunderactivedevelopment§ 1.3versionsandabove§ NoES5support§ Applicationcangetbulky§ UpgradingtoAngular2couldbeconfusingbecauseofsimilarsyntax

©IntersysConsulting– Intersys&ClientConfidential34

ngMetadataOpensourceprojectcreatedbeforethereleaseofAngular2 toprepareto upgrade

§ Pros:§ UpdatescodebasetoTypescript/ES2015§ PureAngular1API§ SupportsAngular1APIandmostofAngular2§ CanbeusedwithngUpgrade§ ngParty Slackchannel

§ Cons:§ Notacompleteupgradesolution§ Angular1.4+§ MixtureofAngular1.xand2§ NotallAngular2supported

©IntersysConsulting– Intersys&ClientConfidential35

Migration:AfterAngular2

©IntersysConsulting– Intersys&ClientConfidential36

UpgradetoAngular1.5+,thento2.0usingngUpgrade

§ Pros:§ 1.5+ syntaxissimilarto2.0§ Finalupgradeto2.0iseasier

§ Cons:§ Notacompleteupgradesolution

1.2+1.5+

2.0

ngUpgradeCreatedbytheAngularteamaspartofAngular2toprovideanupgradepath.RunactualAngular2codealongsideAngularJS1.

§ Pros:§ OfficialpartofthemigrationpathbundledwithAngular2§ Comprehensivedocumentation§ Incrementalupgrade§ WorkswithES5andES6

§ Cons:§ Timeintensive§ MixtureofAngular1.xand2§ EasiestwhenusedwithAngularJS1.5+§ Onlyacompleteupgradeto2.0whenallAngular1codeisconverted

©IntersysConsulting– Intersys&ClientConfidential37

ngUpgrade:Index.html

Angular1.5index.html

©IntersysConsulting– Intersys&ClientConfidential38

HybridAngular2index.html

Index.html

Useofng-appandscripttagsAdditionofAngularpolyfills,SystemJS configandSystem.import toloadapplication.

ngUpgrade:ApplicationBootstrap

©IntersysConsulting– Intersys&ClientConfidential39

• Remove ng-appattributefrom

index.html

• Bootstrapisviamain.ts whichhas

beenconfiguredastheentrypointin

systemjs.config.js

• Appisbootstrappedusingthe

UpgradeModule

HybridAppmain.ts (entrypoint)

ngUpgrade:Modules

Angular1.5Module

©IntersysConsulting– Intersys&ClientConfidential40

HybridAngular2Module

In Angular 1.5, assets are added to modulesIn Angular 2, classes are created and adorned with the NgModule decorator.

Modules:Differentconcepts

ngUpgrade:Components

Angular1.5ComponentController

©IntersysConsulting– Intersys&ClientConfidential41

HybridAngular2Component

Component:ControllersinAngular1.5becomeClassesinAngular2

ngUpgrade:Services

©IntersysConsulting– Intersys&ClientConfidential42

Services

• UsesngResource

• CanbeFactoryorService

• ServicesareusedinAngular2

• NgResourceisreplacedwithTypescriptclassanddecorated

with@Injectable

WhyUpgrade?

§Speed&Performance§ModernArchitecture§DOMSeparation&Server-SideRendering§Mobiledevelopmentsupport

©IntersysConsulting– Intersys&ClientConfidential43

HowtoUpgrade

©IntersysConsulting– Intersys&ClientConfidential44

1.x

1.3

ngForward

Formorecomplexorlargerapplications:

Forsmallerornewerapplications:

1.4

ngMetaData

refactor/rewrite

1.5 ngUpgrade

Conclusion

©IntersysConsulting– Intersys&ClientConfidential45

QuestionandAnswers

References

KeyBenefitsReferences§ ModernArchitecture

§ Components§ https://toddmotto.com/web-components-concepts-shadow-dom-imports-templates-custom-elements/§ https://angular.io/docs/ts/latest/guide/server-communication.html

§ ObservablesRxJS§ https://gist.github.com/staltz/868e7e9bc2a7b8c1f754§ https://medium.com/@benlesh/learning-observable-by-building-observable-d5da57405d87#.uu5lrkgha§ http://stackoverflow.com/questions/38008334/angular2-rxjs-when-should-i-unsubscribe-from-subscription

§ TypeScript§ https://blog.appdynamics.com/engineering/the-benefits-of-migrating-from-javascript-to-typescript/

§ RenderApplicationLogicSeparation§ https://docs.google.com/document/d/1M9FmT05Q6qpsjgvH1XvCm840yn2eWEg0PMskSQz7k4E/edit#§ http://blog.angular-university.io/angular-2-universal-meet-the-internet-of-the-future-seo-friendly-single-page-web-apps/

§ CrossPlatformDevelopment§ NativeScript - https://docs.nativescript.org/tutorial/ng-chapter-0§ IonicFramework- http://blog.ionic.io/angular-2-ionic/§ Electron- http://electron.atom.io/

§ AngularCLI- https://github.com/angular/angular-cli§ Speed&Performance

§ AOT- https://angular.io/docs/ts/latest/cookbook/aot-compiler.html§ https://angular.io/features.html

©IntersysConsulting– Intersys&ClientConfidential48

MigrationPathsReferences§ Angular1.xtoAngular2

§ TypeScript:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview§ FolderandFileStructure:https://angular.io/styleguide§ JohnPapaStyleGuide:https://angular.io/docs/ts/latest/guide/style-guide.html

§ MigrationOptions:https://angular.io/docs/ts/latest/guide/upgrade.html§ http://www.gistia.com/upgradingtoangular2/

§ UpgradingtoAngular2§ https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html§ Angular1.xto2.0:https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2

§ Angular1.5+to2.0:https://angular.io/docs/ts/latest/guide/upgrade.html§ Angular1.5vs2.0:http://www.infoworld.com/article/3031266/javascript/angular-150-paves-the-way-for-angular-2.html

§ VersioningpathforAngular3andbeyond§ http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html

§ http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html§ http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html#Its_just_Angular_39

©IntersysConsulting– Intersys&ClientConfidential49

MigrationToolsReferences

§ MigrationOptions§ BeforeAngular2

§ Tools§ ngForward

§ https://github.com/ngUpgraders/ng-forward§ ngMetadata

§ https://github.com/ngParty/ng-metadata§ AfterAngular2

§ Options§ Versions1.2+

§ Versions1.5+§ https://angular.io/docs/ts/latest/guide/upgrade.html

§ Tools§ ngUpgrade

§ http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html§ https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-component-directives§ https://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html

©IntersysConsulting– Intersys&ClientConfidential50