That Conference 2016, Kalahari Resort, Lake Delton, WI
Introduction to Angular 2.0 – Jeremy Foster, Developer Evangelist at Microsoft

Day 2, 9 Aug 2016

Disclaimer: This post contains my own thoughts and notes based on attending That Conference 2016 presentations. Some content maps directly to what was originally presented. Other content is paraphrased or represents my own thoughts and opinions and should not be construed as reflecting the opinion of the speakers.

Executive Summary

• Choosing Angular 2
• A few core concepts of Angular
• How to create a site and add a component
• Streams

Contact Info

@codefoster
codefoster.com/thatdeck
github.com/codefoster/waterbug-ui

Choosing Angular 2

• It really matters what you choose, what you depend on
• One way of comparing frameworks is to look at trends, google trends, i.e. see what people are searching on
  • Ember – peaked and then decline
  • Backbone – bit older, didn’t peak as high as Ember, also dropping off
  • React – Much higher than previous 2, heading up sharply
  • Angular – dwarfs even React (1 and 2)
    • No decline
    • In fact, there’s an uptick at end (recently)
• Good to find a library that people are using

Virtual DOM

• Angular does this
• Doesn’t directly manipulate DOM
• Creates virtual from real DOM
• Manipulates virtual DOM
• Diffs/updates the real one when it matters
• Dramatic performance increase
• Less time spent in CSS rendering

Component Model

• (also done in Angular 2)
• Evolution: Pages to MVC to Components
• Easier to reason about app structure (node on tree)
• Excellent encapsulation
• Excellent reusability
• Forward compatible with components standard

Web architecture paradigms

• Pages, MVC, Components
• Enter app
• Pages: at a page
• MVC: Enter at controller
• Components
  • Tree structure

Favorite things about Angular.js

• Virtual DOM, component architecture
• Cohesive, relatively complete framework
• TypeScript
  • No more friction to turn into JavaScript
  • Can easily do new ES6 things
• Rx.js for streams
• Great support and community

Typescript

• Beautiful
• Valid Javascript is automatically valid Typescript
• Can just rename .js to .ts
• Can learn one concept at a time
• Write Typescript, transpile into Javascript
• Types
  • Compiler gives a bunch of help
  • Lots of pain goes away
• String literal
  • Easily embed variable values
• typescriptlang.org/play
• TypeScript gives us types, interfaces
  • Just create interface, duck-typing, don’t need class

Easiest Way to get Started in Angular

• npm install -g angular-cli
• ng new myapp
• Makes folder
• Takes a while, doing npm install for new app
• Nearly ready for production at this point
• But takes some reverse engineering to figure out how everything is wired up
• Has tests
• Using Broccoli for task running
• src folder has your code, built into dist folder
• ng serve
  • Fires up port, transpiles TypeScript
  • In watch mode, in case something changes
• ng generate component hello-world
  • Create new component
• ng generate service greeter

Resources

• angular.io
  • Quickstart
  • Tutorial
  • Developer’s Guide
  • Cookbook
• cli.angular.io
• github.com/angular/material2 (in beta)
  • For skinning, use material design elements
  • Looks like Google’s material design spec
• codefoster.com/github/waterbug

Components

• Tree of components
• These are components of UI
  • Although some may not show up visually (e.g. script)
• E.g. App, NavBar, Header, Body, etc.
• Circular references are ok
• Components can be ref’d by more than one parent
• Flip switch and you’re creating new web component

Demo: Adding a component

• From command line
  • ng generate hello-world
• You’re sitting inside existing angular app
• Gives you test for component
  • Tests travel with their components
• .ts files (like .js)
• Look at this in IDE
  • Use Visual Studio Code
  • WebStorm is alternative, but Code better for TypeScript
  • Even Google team is using Visual Studio Code
• We see new hello-world folder
• Look at .ts code
  • import–like require
  • Can bring in multiple pieces from single library, e.g. angular\core
• @component is basically a class
• @component decorator block
  • moduleId: allows using relative paths
  • Compilation error because we need to switch to common.js
  • Turns class into component based on decoration
  • selector – dictates tag, e.g. “app-hello-world” => <app-hello-world>
    • Set to hello-world
    • Can do conditional tags
  • templateUrl: hello-world.component.html
    • HTML that will contain this component
    • Could also inline the HTML, but generally worth having separate HTML
  • styleUrls: hello-world.component.css
    • Could have more than one
• class
  • Constructor and onInit
• Add hello world stuff
  • In .html

Run app

• ng serve
• not yet instantiating the component
• Add component to app
  • app.ts
  • import { HelloWorldComponent } from ‘./hello-world/hello-world.component’;
  • On @Component, do new directive
    • directives: { HelloWorldComponent }

Services

• Dashed circle in component tree
• Just a class that you’ll use
• Cascades
  • Everything below a service in the tree can use it
  • Service will be Singleton for everything under it
  • Could bring in at top, but not a great practice

Create service

• ng generate service greeter
• Create simple service that lets you ask for a message
• Look at generated code
  • class GreeterService
  • Create new function
  • getMessage() { return “howdy”}
• Call the service
  • import { GreeterService } from “../greeter.service”
  • Add provider in @Component: providers: {GreeterService}
  • Dependency inject into your constructor
    • Private modifier on parameter makes it available throughout rest of class
  • this.greetsvc.getMessage();
• Make data available to your view
  • Could create local property and set property to result of call
  • Anything in class can be used in view
• Update view
  • hello there {{ message }}
  • (where message is member property)
  • Lots of other richness for inserting data in the view

Debugging

• Can do a lot of debugging in the browser
• Augury as Chrome extension
• Can give you Angular info at runtime

Streams

• Let’s visualize imperative programming
• Left to right, do one thing after another
• Function call, comes back with something
• Grammar review
  • Declarative: I’d like it if..
  • Interrogative: would you please do this
  • Imperative: fetch me a beer
• Problems with this model
• Better to build rule than build task
• Want to do asynch, do something while waiting for function call to return

Imagine four quadrants

• X Axis–Scalar vs. vector data
• Y Axis–Sync vs. async
• Sync
  • Vector: array
  • Scalar: T
• Async
  • Scalar: promise
  • Vector: streams go here

Dealing with collections of things

• Return multiple things back from asynchronous function
• Sometimes array is huge and we get out of memory issue if we return everything all at once
• Could use Generator
  • Hard to understand
  • Concept is function that can return in middle, giving you a few things at a time

Back to asynchronous problem

• Callbacks not that great
• You have to specify things up front

Promises are nicer

• Gives us thing back right away
• Chain well and form an asynchronous pattern

But generators and promises are not quite enough

Promises are a pain

• Only one return value
• Can’t cancel them
  • E.g. open web call that you can’t cancel

Array of promises?

• Takes a lot of babysitting
• Hard to orchestrate
• Difficult to handle timing

[Sean: Session ran long and I had to leave at this point]