Using Ember FastBoot
in Weird Ways

by 0xADADA

Boston Ember Community, June 18th 2019

0xADADA avatar

About me

Agenda

  1. Review of web app architectures
  2. Introduce Ember FastBoot
  3. Introduce our usecase
  4. FastBoot at Salsify
  5. FastGuide to FastBoot
  6. Questions? / Resources

Review of web app architectures

Traditional app architecture

traditional web architecture

Single-page app architecture, aka "SPA"

SPA web architecture

Server-side render/Single-page app architecture

SSR/SPA web architecture

Introducing Ember FastBoot

What is Ember FastBoot

Why Server-side rendering?

Introduce our usecase

where JavaScript is restricted

Many online retailers allow "from the manufacturer" or "below-the-fold" content— that is, content from the manufacturer describing their own product. Most often this is rich marketing text, images, and video.

Constraints📦

  1. must serve static HTML
  2. should be heavily cached
  3. team is efficient with Ember
  4. our app already renders these layouts

what would work with these constraints? 🤔

amazon

amazon.com screenshot

walmart.com

walmart.com screenshot

bjs.com

bjs.com screenshot

Salsify Enhanced Content

Salsify composer screenshot

Enhanced Content

Example

UI data sent to FastBoot:

config: The template
env: The content and data bindings

{
  "config": {
    "$vbox": [{
        "$hbox": [{
            "$text": "Your name: "
          },
          {
            "$input": {
              "$bind": "name"
            }
          }
        ]
      },
      {
        "$text": {
          "$join": [{
              "$bind": "greeting"
            },
            {
              "$bind": "name"
            }
          ]
        }
      }
    ]
  },
  "env": {
    "greeting": "Hello, ",
    "name": "CHANGEME"
  }
}

Real Example

(ember-exclaim ⚠️ demo intensifies)

Sequence of events

enhanced content sequence diagram

FastGuide to FastBoot

  1. $ ember new my-project --yarn
  2. $ ember install ember-cli-fastboot
  3. $ yarn add -D fastboot-app-server
              
  4. $ node server.js

Lets see some code

server.js

Gotchas

Be aware of security vulnerabilities you never had to consider.

Thanks 👋🙇‍♂️

Questions? / Resources