Angular Platform

Jesse Sanders

CEO, BrieBug

jesse.sanders@briebug.com

www.briebug.com

CEO, BrieBug

Developer for 20 years

 

Focused on JavaScript based solutions

 

About Me

We will cover

  • History
  • Improvements
  • CLI
  • Angular 4
  • Enterprise Patterns

www.briebug.com

AngularJS

www.briebug.com

2009

1.6.4

Beginning

  • Large Controllers/Views
  • $scope
  • digest
  • two way data binding

www.briebug.com

Components

  • v1.3
  • John Papa
  • Breaking down large controllers/views
  • controllerAs
  • viewModel
  • reducing scope

www.briebug.com

Component

  • Performance issues
  • endless digest loops
  • $emit/$on

www.briebug.com

Complexity

Angular 2.0

  • 2.0.0-alpha.27 6/17/15
  • 7 RC's
  • 2.0.0 - Released ~9/14/2016

www.briebug.com

AngularJS

www.briebug.com

vs. Angular

"It's Just Angular"

www.briebug.com

What's new in 2.0?

TypeScript

Architecture

CLI

www.briebug.com

TypeScript

  • Class and Module Support
  • Static Type-checking
  • ES6 Feature Support
  • Superset of JavaScript

www.briebug.com

Architecture

  • Component Design
  • Improved modules
  • @angular/core, @angular/forms, etc.
  • Observables

www.briebug.com

CLI

  • "Instant" project
  • Generate Scaffolding
  • Linting/Best Practices
  • Testing pre-configured
  • Build/Package

www.briebug.com

CLI - create project

www.briebug.com

ng new my-new-project --routing

CLI - generate

www.briebug.com

ng generate component customer

CLI - generate

www.briebug.com

CLI - linting

www.briebug.com

ng lint

Testing

  • TestBed Library
  • Unit Tests
  • Integration Tests
  • End to End tests

www.briebug.com

Testing

www.briebug.com

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomerComponent } from './customer.component';

describe('CustomerComponent', () => {
    let component: CustomerComponent;
    let fixture: ComponentFixture<CustomerComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ CustomerComponent ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(CustomerComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

CLI - Build

  • SystemJS => WebPack
  • ng serve
  • proxies
  • dist/packaging

www.briebug.com

You have now achieved coding Nirvana

4

Angular 4?

March 23, 2017

 

www.briebug.com

Improvements!

Angular as a Platform

www.briebug.com

What's new?

www.briebug.com

  • AOT improvements to reduce generated code, up to 60% smaller in most cases
  • Separate package for animations
  • Improved *ngIf and *ngFor
  • Community-built Angular Universal adopted by the Angular team: @angular/platform-server
  • TypeScript 2.2 compatibility
  • Template source maps

*ngIf

 

www.briebug.com


<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

<div *ngIf="isValid;then content else other_content">here is ignored</div>

<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

*ngFor

www.briebug.com


<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count; index as i" 
    [user]="user">
        User {{i}} of {{count}}
  </user-profile>
</div>
<ng-template #loading>Loading...</ng-template>

Performance

  • Smaller Apps
  • Faster bootstrap
  • Faster Builds
  • Tree Shaking
  • Animations
  • Lazy Loading

www.briebug.com

Tools

  • Language services
  • Angular Universal
  • Progressive Web Apps
  • CLI - continues to improve

www.briebug.com

Language Sevices

www.briebug.com

Angular Universal

  • Performance
  • SEO
  • Browser Support
  • Link Previews

www.briebug.com

Progressive Web Apps

www.briebug.com

CLI

www.briebug.com

  • Best Practices
  • Routing
  • ng eject
  • Tree Shaking

Stability

  • Semantic Versioning
  • No Breaking Changes
  • Long Term Support through Oct 2018

www.briebug.com

Ecosystem

  • D3
  • Dragula
  • Redux
  • New tools every day

www.briebug.com

Ecosystem - CI

  • GitHub
  • Circle-CI
  • CodeCov.io
  • Heroku

www.briebug.com

Angular

www.briebug.com

is not always

the best choice

Web Components

www.briebug.com

  • React
  • VueJS
  • Polymer
  • AngularJS

www.briebug.com

Where do we go?

www.briebug.com

Version 5

  • AOT default and super fast
  • Tree shaking
  • Smooth Upgrades

Who is using Angular?

  • 26 Fortune 1000 companies HQ in CO
  • 50% already using Angular
  • Job postings by 2 other companies
  • Lots more Fortune 1000 here locally

www.briebug.com

Industries using Angular

  • Media & Entertainment
  • Financial
  • Healthcare
  • Oil & Gas
  • Food & Beverage
  • Manufactoring

www.briebug.com

How Do I get Help?

  • www.angular.io
  • RM Angular Meetup
  • PluralSite
  • CodeSchool
  • BrieBug

www.briebug.com

RM Angular

www.briebug.com

June 28th 6:30PM

Redux Forms

Questions?

www.briebug.com

Angular Platform

By briebug

Angular Platform

How Angular will some day save the world... or maybe just your next project...

  • 552
Loading comments...

More from briebug