angularjs to angular 2 - files.meetup.com · architecture with angularjs 1.x get familiar with...
TRANSCRIPT
![Page 1: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/1.jpg)
ANGULARJS TO ANGULAR 2A PERSONAL TRANSITION PLAN TO ANGULAR 2 READINESS
WHILE FURTHERING ANGULARJS SKILLS
PART 3 : REFACTORING YOUR ANGULAR MINDSET
Denny Kruep (@DevelopingDenny)
ngHouston
![Page 2: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/2.jpg)
The Angular We Know is Under Attack
Controllers
$scope
Directives (Definition Objects)
Factories
ng-anything
Watchers
jqLite
angular.module
![Page 3: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/3.jpg)
Angular 2 - An Entire Rewrite
TypeScript and ECMAScript 6 (ES6)
Tooling
Components
CLI
Annotations
Pipes
Observables
New Change Detection Approach
![Page 4: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/4.jpg)
Starting Over?
![Page 5: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/5.jpg)
Our Plan
Start with AngularJS
App
Study Angular 2
Concepts and Ecosystem
Transform App to
Angular 2 Codebase
![Page 6: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/6.jpg)
What is ECMAScript 6 (ES6)?
ECMAScript is a standard
ES5 – 2009
ES6 – June 2015
JavaScript is an implementation of ECMAScript
Changes support modern JavaScript use
New features
Modules : import and export code
Classes : traditional programming language syntax
Templates : multi-line strings
![Page 7: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/7.jpg)
First Step To Angular 2? Learn
TypeScript
TypeScriptJavaScript… Tightened Up
![Page 8: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/8.jpg)
AngularJS to Angular 2 Transition Series
Executive Summary and ES6 Overview
Working with TypeScript and AngularJS Apps
Shifting To the New AngularJS App Architecture
Angular 2 Concepts
Our AngularJS App and Initial Refactoring
Angular 2 App Iteration
Angular 2 Tooling and Ecosystem
![Page 9: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/9.jpg)
Why Drastic Change?
![Page 10: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/10.jpg)
Web Components
Custom Elements
Templates
Shadow DOM
HTML Imports
![Page 11: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/11.jpg)
Application Structure
![Page 12: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/12.jpg)
Early Web Application Structure
![Page 13: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/13.jpg)
Modern Web Application Structure
with Frameworks
![Page 14: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/14.jpg)
Our Current AngularJS Perspective
Factories and Services : Data providers and
business logic
Controllers : Scope data and User Interaction
Directives : Extend HTML with custom behavior and
reusable Components
Modules : Reusable Angular Code Bases
Libraries
Bundles of above angular components working to fulfill
feature (Such as Authorization)
![Page 15: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/15.jpg)
AngularJS App Structure
![Page 16: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/16.jpg)
Two-Way Binding… It’s Magical
![Page 17: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/17.jpg)
Leads to Scope Soup
![Page 18: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/18.jpg)
Signs of Scope Soup – Tero Parviainen
Lots of ng-controller and ng-include
Uneven controller-to-template pairing
Data sharing via scope inheritance
Rampant shared mutable state
![Page 19: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/19.jpg)
Angular Application Structure: TodayScope Hierarchy to Mimic the DOM
![Page 20: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/20.jpg)
Angular Application Structure: TomorrowTree of Components
![Page 21: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/21.jpg)
Component-Based Architecture Characteristics:
Entire Application is a Tree of Components
myApp
(PersonalTrainer)
myPrograms
myActiveProgram
Console
myProgram
myProgram
myProgram
myActiveProgram
![Page 22: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/22.jpg)
Component-Based Architecture Characteristics:
De-Render any Part of the Tree
myApp
(MemorizationCoach)
myPrograms
myActiveProgram
Console
myActiveProgram
myProgram
myProgram
myProgram
![Page 23: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/23.jpg)
Component-Based Architecture Characteristics:
One-Directional Data Flow
![Page 24: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/24.jpg)
Component Types
Stateless (a.ka. Dumb / Pure)
Stateful (a.k.a. Smart /
Impure / Business / Container)
View (a.k.a. Router)
![Page 25: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/25.jpg)
Component Types: Stateless
No data manipulation
Receive data from parent
Emit data via event
![Page 26: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/26.jpg)
Component Types: Stateful
Do not provide user interaction at all
Render OTHER components
Own the data, so have responsibility to modify
it (through services)
![Page 27: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/27.jpg)
Component Types: View
Composed of other components
Know about router and how to
dynamically generate the component tree
Provide entry points to the application
![Page 28: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/28.jpg)
Component Characteristics:
Data-In, Events Out (Illustration)
ComponentData
In
Events
Out
![Page 29: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/29.jpg)
Break: Q&A
![Page 30: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/30.jpg)
Refactoring to Component-Based
Architecture with AngularJS 1.x
Get familiar with component anti-patterns common
to AngularJS code
Use directives to organize code into component
architecture
Apply intentional “component” binding patterns
Analyze interface boundaries
Assign responsibilities to your components
![Page 31: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/31.jpg)
Scope Soup to Components
Identify candidates to refactor
ng-includes
DOM sections bound to ng-controller
Large blocks of HTML
Create components out of existing code
Name all controllers (alias controllers)
Change ng-includes to ‘component-directives’
Specify input bindings to each component
Declare output events from each component
![Page 32: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/32.jpg)
Without Controller Aliasing
project.controller.js
index.html
![Page 33: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/33.jpg)
With Controller Aliasing
project.controller.js
index.html
![Page 34: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/34.jpg)
Create ComponentsReplace ng-includes with component directive
From:
To:
![Page 35: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/35.jpg)
Create ComponentsMove top-level template controllers into directive
project-task.html
project-task.directive.js
![Page 36: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/36.jpg)
Create ComponentsOrganize files into component folder structure
![Page 37: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/37.jpg)
Create ComponentsRepeat for mid-template ng-controllers
1. Move markup to its own template
2. Create “component” directive
3. Adopt controller into directive
4. Bundle code into isolated component
folder
![Page 38: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/38.jpg)
Addressing Data Flow
Inspect component template for expressions that
reference something that is not owned by the
component.
project-task.html
![Page 39: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/39.jpg)
Data Flow : InputsCreate Bindings for External References
![Page 40: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/40.jpg)
project-task.html
index.html
Data Flow : InputsCreate Bindings for External References
![Page 41: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/41.jpg)
Data Flow : OutputReplace External Function Calls with Bound Outputs
project-task.html
![Page 42: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/42.jpg)
Data Flow : OutputReplace External Function Calls with Bound Outputs
project-task.directive.js
index.html
![Page 43: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/43.jpg)
Data FlowComplete Refactoring by Isolating Scope
![Page 44: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/44.jpg)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.directive.js
![Page 45: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/45.jpg)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.html
index.html
![Page 46: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/46.jpg)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.controller.js
![Page 47: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/47.jpg)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.controller.js (improved)
![Page 48: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/48.jpg)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
index.html
![Page 49: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/49.jpg)
Component-Based Architecture Features
Angular
1.5
![Page 50: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/50.jpg)
Component Definition Helper Angular 1.5
A Component is a Special Kind of Directive
![Page 51: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/51.jpg)
Angular 1.5 Component Helper Bindings
New “One-Way” Bindings with ‘<‘
Controller automatically
bound to template with $ctrl
![Page 52: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/52.jpg)
Angular 1.5 Component Lifecycle
$onInit()
Called when all bindings in place
Use bindings to gather server data
$onDestroy()
Called when container of component is destroyed
Clean up resources
$onChanges(changes)
Called whenever any input binding has changed
Provided with both currentValue and previousValue
![Page 53: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/53.jpg)
Angluar 1.5 Component $onChanges
![Page 54: ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into](https://reader035.vdocuments.net/reader035/viewer/2022070721/5ee35663ad6a402d666d455a/html5/thumbnails/54.jpg)
Refactoring AngularJS Mindset : Summary
Think Components
Well-defined interface boundaries
Reduce scope soup
Refactor Angular 1.x apps one
component at a time
Look for ways to apply integrate Angular
1.5 “component” helper