Hi, I'm Craig

I'm from Wellington,

New Zealand

We're here

@phenomnominal

@phenomnominal

I work for

Founded in 1999

NZ population: ~ 4.9 million

Trade Me accounts: ~ 4.5 million

Auctions, classifieds, "e-commerce"

> 650 employees, > 100 developers

New Zealand's biggest website

@phenomnominal

@phenomnominal

FrEnd - 2016

Not fast.

Aiming for mobile-first

Lots of JavaScript

Lots of DOM

Lots of $$watchers

Lots of jank

@phenomnominal

Goodbye AngularJS

@phenomnominal

Hello Angular

Angular

@phenomnominal

trademe.nz/listing/:id

  <html>
      <link 
          rel="stylesheet"
          href="/static/styles.css">
      <script
          src="/static/script.js">
      <body>
          <trade-me>
              <div
                  class="tm-loading">
              </div>
          </trade-me>
      </body>
  </html>

          rel="stylesheet"
          href="/static/styles.css"

          src="/static/script.js"



                  class="tm-loading"

              "stylesheet"
               "/static/styles.css"

              "/static/script.js"



                        "tm-loading"

Generic application loading state

Static resources

Angular

@phenomnominal

trademe.nz/static/script.js

trademe.nz/static/styles.css

       function () {
           ...
       }
       
       html { 
           ...
       }

Angular

@phenomnominal

trademe.nz/api/listing/:id.json

trademe.nz/api/categories.json

    {"id":"1234567890", ... }

  {"name":"Arts & Crafts", ... }

@phenomnominal

What can we do to remove some of those round trips?

🤔

@phenomnominal

Angular Universal

Why?

Performance

SEO/No JavaScript environments

Social media links

1️⃣

2️⃣

3️⃣

@phenomnominal

Angular Universal!

Fast ✅

Still too much JavaScript

Making even more 💰💰💰

SEO ✅

Social ✅

https://www.youtube.com/watch?v=PJlmYh27MHg

@phenomnominal

Sam Neil! (He's a kiwi!)

@phenomnominal

https://www.youtube.com/watch?v=wU1HbwC71j4

Flea!
(He's Aussie, close enough)

@phenomnominal

Asteroids

@phenomnominal

Facts about asteroids

Categorised as "minor planets"

Not comets or meteoroids

14,464 known "near-Earth" asteroids

ALLEGEDLY killed the dinosaurs

Cool names like "Odysseus" and "James Bond"

💥

@phenomnominal

Asterank

github/typpo/asterank

@phenomnominal

JavaScript runtime (no DOM)

Driven by Chrome's V8 engine

Use everyone else's code via

JS Logo as seen from NZ

@phenomnominal

How do we run this on the server?

🤔

@phenomnominal

Angular Universal

Run your Angular application anywhere...

https://www.youtube.com/watch?v=_trUBHaUAR0

@phenomnominal

Avoiding the DOM

Do not use the DOM directly! There's almost always a way to do the same thing with Angular's abstractions.

@phenomnominal

Components

@Input, @Output, @HostBinding, @ViewChild, @ContentChild, ngStyle, ngClass.

You may occasionally need to reach for the Renderer:

Normal dependency injection

@phenomnominal

But what if you have to use the DOM?

🤔

@phenomnominal

Be explicit about it

Be defensive!

Explicit null type is good

Only run code if window is available.

@phenomnominal

Hack it?

Some third-party code won't want to play nicely...

(here's lookin' at you three-trackballcontrols 😅)

Set up globals

Require troublesome module

Clean up after

Directly check for window

@phenomnominal

Check the platform...

@phenomnominal

Check the platform

If you really must...

Injectable PLATFORM_ID token

Use the method for the specific platform

@phenomnominal

One implementation for a specific environment

2️⃣

Just turn it off

@phenomnominal

Add @Optional injection annotation

Trusty if statement

Check for the presence of an injected service:

Just turn it off

@phenomnominal

Turn things off at a provider level:

Provide null for specific platform

Corresponding injection token

@phenomnominal

Demo.

@phenomnominal

Different implementation for each environment

3️⃣

@phenomnominal

Platform-specific modules

Remember app.module.ts & app.server.module.ts?

@phenomnominal

Services

Provide different implementations for different environments:

Server implementation for Renderer

Server implementation for HttpClient

@phenomnominal

Different functionality for each environment

4️⃣

State Transfer

@phenomnominal

The whole application runs twice.

This means duplicate API calls! 🤯

This call happens twice

State Transfer

@phenomnominal

Inject TransferState

Create a state key

Set the state on the first run

Re-use it if it's available

@phenomnominal

State Transfer

The state transfer data is inlined into the HTML response as a blob of JSON. This means...

Don't send too much data!

Your whole store must be JSON serialisable!

State Transfer

@phenomnominal

Or just transfer your whole store state!

One state key for your whole store

Read the whole store and serialise

State Transfer

@phenomnominal

Or just transfer your whole store state!

Use the same key on the client

Dispatch a new action with the whole serialised store

State Transfer

@phenomnominal

Use a simple cache layer to prevent duplicated calls

Split the GET into two parts

Mark each API response with a cache time

Only do the call if the cache time has expired

@phenomnominal

Demo.

Cool.

@phenomnominal

@phenomnominal

Workflow/DX

It's very slow...

Bazel will fix it?

"Ivy will fix it" - @yearofmoo

@phenomnominal

Lint rules for using DOM APIs

Lint rules for using isBrowser

Meta-reducer for unserialisable data

Test for too much serialised data

Universal E2E tests

💥

Fix it before you break it

@phenomnominal

So...

@phenomnominal

If you want/need your Angular app to be crawled by Search Engines

@phenomnominal

If you want/need improved No JS/old browser support

@phenomnominal

If you want/need content previews for Social Media

@phenomnominal

AND if you're willing to fight for better perceived performance

Universally Speaking