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

TechnologyStaffing

CorePracticeCapabilities


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


§ComponentClass §ComponentFileStructure

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

Component– Input/Output


• Inputsyntax@Input()

• Outputsyntax@OutputwithusingtheEventEmitterclass

§ Input/Output Example

ComponentLifeCycle


§CommonLifeCyclehooksUseDoCheck lifecyclehooktodetectchangesthatAngulardoesn’tcatch

ComponentMarkup§ In-line


§ExternalFile

Style’sdefinedbycomponentscanbeisolatedfromglobalstyleseliminatedconflicts.

ReactiveProgrammingwithRxJS

Angular2usesinRxJSobservablesintwodifferentways§ Forinternalimplementationforitscorelogic§ InitspublicAPIwithFormsandHTTPModel

Angular2Developerscanmakeuseofthereactiveprogrammingintheircode.

Youcanstillusepromisesifyoulike


Observables§RxJSisusedforHTTPRequests


Service Component

Observablesvs.Promises

§Observablescandefineboththesetupandteardownaspectsofasynchronousbehavior.

§Observablesarecancellable.§ObservablescanberetriedusingoneoftheretryoperatorsprovidedbytheAPI,suchasretryandretryWhen.Promisesrequirethecallertohaveaccesstotheoriginalfunctionthatreturnedthepromiseinordertohavearetrycapability.


TypeScript

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


RenderApplicationSeparation


§Angular2splitstheapplicationlogicfromtherenderlogic

ApplicationLogic

Renderer

CrossPlatformDevelopmentWithAngular2’smoveawayfromDOMdependency,madecrossplatformdevelopmentmucheasier


AngularCLI


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


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


MigrationOptions


Rebuildtheentire

Application

RebuildIncrementally

RebuildIncrementally

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

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


AddFeature

ConvertFeature

AddFeature

ConvertFeature

RebuildwithAngular2+

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

§ Cons:§ Timeintensive§ Codefreeze§ Introducenewissues


Upgradeto1.5+Rebuildin2.0+

UpgradefromAngularJS1.xto2.x+


1.x2.x+

Decisions?

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


JustAngular!


SemanticVersioningSEMVAR


3.0.0••MajorVersionPotentialBreakingChanges

3.1.0••MinorVersionNoBreakingChanges

3.1.1••PatchorBugFixesNoBreakingChanges

ReleaseSchedule

PatchVersioneveryWeek

MinorVersioneveryMonth

MajorVersionevery6Months


PredictableandSteady


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


1.3

1.5+

1.4

ngForwardOpensourceprojectthatpreparesyourAngular1codetolooklikeAngular2

§ Pros:§ Quick§ GetusedtoAngular2syntax§ BestusedifnotgoingtoupdatetoAngular2anytimesoon§ AddsSystemJSconfigurationtoyourproject

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


ngMetadataOpensourceprojectcreatedbeforethereleaseofAngular2 toprepareto upgrade

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

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


Migration:AfterAngular2


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


ngUpgrade:Index.html

Angular1.5index.html


HybridAngular2index.html

Index.html

Useofng-appandscripttagsAdditionofAngularpolyfills,SystemJS configandSystem.import toloadapplication.

ngUpgrade:ApplicationBootstrap


• Remove ng-appattributefrom

index.html

• Bootstrapisviamain.ts whichhas

beenconfiguredastheentrypointin

systemjs.config.js

• Appisbootstrappedusingthe

UpgradeModule

HybridAppmain.ts (entrypoint)

ngUpgrade:Modules

Angular1.5Module


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


HybridAngular2Component

Component:ControllersinAngular1.5becomeClassesinAngular2

ngUpgrade:Services


Services

• UsesngResource

• CanbeFactoryorService

• ServicesareusedinAngular2

• NgResourceisreplacedwithTypescriptclassanddecorated

with@Injectable

WhyUpgrade?

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


HowtoUpgrade


1.x

1.3

ngForward

Formorecomplexorlargerapplications:

Forsmallerornewerapplications:

1.4

ngMetaData

refactor/rewrite

1.5 ngUpgrade

Conclusion


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


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


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


angular 2 upgrade webinar · 2017-02-09 · run actual angular 2 code alongside angularjs 1. §...

Documents