angularjs to angular 2 - files.meetup.com · architecture with angularjs 1.x get familiar with...

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