View
13
Download
0
Category
Preview:
Citation preview
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
The Angular We Know is Under Attack
Controllers
$scope
Directives (Definition Objects)
Factories
ng-anything
Watchers
jqLite
angular.module
Angular 2 - An Entire Rewrite
TypeScript and ECMAScript 6 (ES6)
Tooling
Components
CLI
Annotations
Pipes
Observables
New Change Detection Approach
Starting Over?
Our Plan
Start with AngularJS
App
Study Angular 2
Concepts and Ecosystem
Transform App to
Angular 2 Codebase
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
First Step To Angular 2? Learn
TypeScript
TypeScriptJavaScript… Tightened Up
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
Why Drastic Change?
Web Components
Custom Elements
Templates
Shadow DOM
HTML Imports
Application Structure
Early Web Application Structure
Modern Web Application Structure
with Frameworks
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)
AngularJS App Structure
Two-Way Binding… It’s Magical
Leads to Scope Soup
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
Angular Application Structure: TodayScope Hierarchy to Mimic the DOM
Angular Application Structure: TomorrowTree of Components
Component-Based Architecture Characteristics:
Entire Application is a Tree of Components
myApp
(PersonalTrainer)
myPrograms
myActiveProgram
Console
myProgram
myProgram
myProgram
myActiveProgram
Component-Based Architecture Characteristics:
De-Render any Part of the Tree
myApp
(MemorizationCoach)
myPrograms
myActiveProgram
Console
myActiveProgram
myProgram
myProgram
myProgram
Component-Based Architecture Characteristics:
One-Directional Data Flow
Component Types
Stateless (a.ka. Dumb / Pure)
Stateful (a.k.a. Smart /
Impure / Business / Container)
View (a.k.a. Router)
Component Types: Stateless
No data manipulation
Receive data from parent
Emit data via event
Component Types: Stateful
Do not provide user interaction at all
Render OTHER components
Own the data, so have responsibility to modify
it (through services)
Component Types: View
Composed of other components
Know about router and how to
dynamically generate the component tree
Provide entry points to the application
Component Characteristics:
Data-In, Events Out (Illustration)
ComponentData
In
Events
Out
Break: Q&A
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
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
Without Controller Aliasing
project.controller.js
index.html
With Controller Aliasing
project.controller.js
index.html
Create ComponentsReplace ng-includes with component directive
From:
To:
Create ComponentsMove top-level template controllers into directive
project-task.html
project-task.directive.js
Create ComponentsOrganize files into component folder structure
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
Addressing Data Flow
Inspect component template for expressions that
reference something that is not owned by the
component.
project-task.html
Data Flow : InputsCreate Bindings for External References
project-task.html
index.html
Data Flow : InputsCreate Bindings for External References
Data Flow : OutputReplace External Function Calls with Bound Outputs
project-task.html
Data Flow : OutputReplace External Function Calls with Bound Outputs
project-task.directive.js
index.html
Data FlowComplete Refactoring by Isolating Scope
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.directive.js
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.html
index.html
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.controller.js
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
project-task-list.controller.js (improved)
Data Flow : Shared Mutable StateReplace State Mutations with Bound Outputs
index.html
Component-Based Architecture Features
Angular
1.5
Component Definition Helper Angular 1.5
A Component is a Special Kind of Directive
Angular 1.5 Component Helper Bindings
New “One-Way” Bindings with ‘<‘
Controller automatically
bound to template with $ctrl
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
Angluar 1.5 Component $onChanges
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
Recommended