angular 2 upgrade webinar · 2017-02-09 · run actual angular 2 code alongside angularjs 1. §...
TRANSCRIPT
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