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)

angular.jp

GitHub: angular/angular-ja

Join us!

slack-invite.ngjapan.org

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

https://angular.io/guide/universal

Why SSR?

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

https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr

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!

@laco2net