SSR with Angular

or "Why don't you use DOM in Node?"

NodeFest. 2017

@laco2net

about me

  • Suguru Inatomi
  • Twitter: @laco2net
  • Kaizen Platform
  • Angular Contributor
  • Angular Japan User Group
    (ng-japan)

GitHub: angular/angular-ja

Join us!

SSR with Angular

  • SSR is the first-class citizen of Angular
    • ​a.k.a. Angular Universal
  • Official Package: @angular/platform-server
    • For ​Running Angular on Node.js

Why SSR?

  • For Performance
    • "Time To First Meaningful Paint"
  • For SEO
    • Rendering view without JS

Angular Rendering

  • Renderer = fn(App) => View
  • Environment Agnostic

platform-browser

BrowserRenderer = fn(App) => DOM

platform-server

ServerRenderer = fn(App) => DOM

Domino

  • github.com/fgnass/domino
  • Server-side DOM implementation
    • Based on Mozilla's dom.js
  • Domino = DOM in Node
  • ~3.4x Faster than jsdom

SSR with Domino

const domino = require('domino');

// 1. Create Document object
const window = domino.createWindow(
  '<h1>Hello world</h1>', 
  'http://example.com
');
const document = window.document;

// 2. Manipulating DOM

// 3. Serialize the document to HTML string
const html = document.serialize();

Switched to Domino

Why did Angular choose Domino?

  • Switched from Parse5
    • HTML Parser for Node.js
  • Angular simulated 'Document' in itself
    • Need a too complex DOM Adapter to maintain
  • Many JS libraries require native DOM elements

Conclusion

  • SSR is the first-class citizen in Angular
    • Official Supports  
  • Angular chose Domino
    • DOM implementation in Node
    • SSR Friendly: document.serialize()
  • You can use 'document' in Node!

Thanks!

SSR with Angular

By Suguru Inatomi

SSR with Angular

Node学園祭 2017

  • 4,174