Angular 2

New horizons

JSLab conference

Odessa, March 12, 2016

http://slides.com/evgeniyjs/angular2-new-horizons/live

Let me introduce myself

Evgeniy Safronov

I'm Software Engineer @ Rifl Media LLC

evgeniy.safronov@outlook.com

@javacodegeek

https://github.com/javacodegeek

Overview

Core team

Misko Heverly

Naomi Black

Brad Green

Igor Minar

Jules Kremer

Pete Becon Darwin

Tomas Burleson

Popularity of Angular

Angular usage, as measured by http://libscore.com

git log --graph --online --all

AngularJS was originally developed in 2009 Misko Heverly and Adam Abronsom in Brat Tech LLC

Angular 2 was announced in October 2014

Angular 2 Beta in December 15, 2015

June 13, 2012 version 1.0.0

January 13, 2015 version 1.3.9

May 26, 2015 version 1.4.0

February 5, 2016 version 1.5.0

What does 'beta' mean?

Beta means that most developers can be successful building large applications using Angular 2.

Through developer preview and alpha team was worked closely with several large projects at Google including AdWords, GreenTea, and Google Fiber.

Externally, they were worked closely with several other teams integrating with Angular 2 including Ionic Framework on Ionic 2, Telerik on NativeScript, Rangle.io on Batarangle, and many others.

They incorporated the majority of feedback from these teams that would create breaking changes.

Problems in Angular 1.X

Digest loop

Scope inheritance

Directive's API is complex

Modules are not real modules

Inability of server side rendering

What was removed from Angular?

Controllers

Directive Definition

Object

$scope

Angular module

jqLite

Angular 2 features

ES2015 modules

Speed and performance

Support for Web Components

Shadow DOM

Can run outside of the browser

Upgrade from angular 1

ES5, ES2015, TypeScript

Cross platform

Building blocks

Module
Component
Template
Metadata
Data Binding
Service
Directive
Dependency Injection

Architecture

Template

< >

Component{...}

Metadata

Property binding

Event binding

Injector

Directive

{...}

Metadata

Data binding

{{value}}

DOM

Component

[property]="value"

(event)="handler"

[(ng-model)}="property"

Components

import {Component} from 'angular2/angular2'

@Component({
  selector: 'my-component',
  template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
  constructor() {
    this.name = 'Odessa'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

Components

Services

export class HelloService {
  constructor(
    private _backend: BackendService,
    private _logger: Logger) { }

  private _msgs:Msg[] = [];

  getMsgs() {
    this._backend.getAll(Msg).then( (msgs:Msg[]) => {
      this._logger.log(`Fetched ${msgs.length} msgs.`);
      this._msgs.push(...msgs); 
    });
    return this._msgs;
  }
}

Quick

Start

Setup dev environment

mkdir jslab-odessa
sudo apt-get install nodejs
touch tsconfig.json
touch typings.json
touch package.json

Typescript

TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript.

https://github.com/Microsoft/TypeScript

Project structure

Our project folder structure looks like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
  }
}

tsconfig.json

typing.json

{
  "name": "angular2-odessa-jslab",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",    
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install" 
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "systemjs": "0.19.24",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.7",
    "typings":"^0.7.5"
  }
}

package.json

import {Component} from 'angular2/core';

@Component({
    selector: 'jslab-app',
    template: '<h1>Hello, Odessa!</h1>'
})
export class AppComponent { }

app.component.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

main.ts

<html>
  <head>
    <title>Angular 2 Odessa JSLab</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    ...

index.html: load libraries

...

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

index.html: configure SystemJS

  <!-- 3. Display the application -->
  <body>
    <jslab-app>Loading...</jslab-app>
  </body>
</html>

index.html: display app

Angular Style Gid

John Papa

John Papa is a Google Developer Expert, Microsoft Regional Director and MVP, and author of 100+ articles and 10 books, and is a former technology Evangelist for Microsoft client teams. He specializes in professional development with HTML5, JavaScript, CSS, Angular, Gulp, Node.js, Knockout, C#, and ASP.NET.

http://www.johnpapa.net/

https://github.com/johnpapa

Why we need to have some style gid?

A starting point for Angular development teams to provide consistency through good practices

Angular 2 Style Gid now in DRAFT

https://github.com/johnpapa/angular-styleguide

16.665

If you are looking for an opinionated style guide for syntax, conventions, and structuring Angular applications, then step right in.

Main points

Single Responsibility

Define 1 component per file, recommended to be less than 500 lines of code.
Define small functions, no more than 75 LOC (less is better).

Components

Place bindable members at the top of the component, alphabetized, and not spread through the component code.
Defer logic in a component by delegating to services.
Keep Components Focused

Modules
Services
Factories
Data Services
Naming
Application Structure LIFT Principle
Application Structure
File Templates and Snippets
Angular CLI
Routing

References

https://angular.io/docs/ts/latest/

Oficial docs

https://egghead.io/series/angular-2-fundamentals

Courses

https://www.udemy.com/introduction-to-angular2/

https://www.pluralsight.com/courses/angular-2-first-look

https://www.ng-book.com/2/

Books

Events

http://angularjs-days.de

AngularJS Days 2016

March 21-23, Munich

http://www.whiteoctoberevents.co.uk/event/angular-2-april/

Workshop: Angular 2

April 16, London

http://angularconnect.com/

AngularConnect 2016

September 27-28, London

https://ngeurope.org

ng-europe 2016

October 25-26, Paris

Announcing Angular Attack

The 48 hour online Angular hackathon.

May 14-15, 2016

https://www.angularattack.com

Angular 2

New horizons

Let me introduce myself

Evgeniy Safronov

I'm Software Engineer @ Rifl Media LLC

Overview

Core team

Popularity of Angular

Angular usage, as measured by http://libscore.com

git log --graph --online --all

What does 'beta' mean?

Problems in Angular 1.X

Digest loop

Scope inheritance

Directive's API is complex

Modules are not real modules

Inability of server side rendering

What was removed from Angular?

Angular 2 features

ES2015 modules

Speed and performance

Support for Web Components

Shadow DOM

Can run outside of the browser

Upgrade from angular 1

ES5, ES2015, TypeScript

Cross platform

Building blocks

Module Component Template Metadata Data Binding Service Directive Dependency Injection

Architecture

Data binding

Components

Components

Services

Quick

Start

Setup dev environment

mkdir jslab-odessa

sudo apt-get install nodejs

touch tsconfig.json

touch typings.json

touch package.json

Typescript

Project structure

tsconfig.json

typing.json

package.json

app.component.ts

main.ts

index.html: load libraries

index.html: configure SystemJS

index.html: display app

Angular Style Gid

John Papa

Why we need to have some style gid?

Main points

Single Responsibility

Components

Modules Services Factories Data Services Naming Application Structure LIFT Principle Application Structure File Templates and Snippets Angular CLI Routing

References

Events

AngularJS Days 2016

Workshop: Angular 2

AngularConnect 2016

ng-europe 2016

Announcing Angular Attack

The 48 hour online Angular hackathon.

Your

questions,

please

Thanks

for

everyone

Module
Component
Template
Metadata
Data Binding
Service
Directive
Dependency Injection

Modules
Services
Factories
Data Services
Naming
Application Structure LIFT Principle
Application Structure
File Templates and Snippets
Angular CLI
Routing