About me

• pronunciation: zɪroʊ ɛks ə di ə di eɪ
• 0xADADA on Twitter, GitHub, everywhere.
• https://0xadada.pub (my internet house)
• Using Ember for ~three years
• hecklers welcome 👺

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

• PHP/Java/Ruby app server
• Renders static HTML to the browser
• Ad-hoc client JavaScript for interactivity

Single-page app architecture, aka "SPA"

• PHP/Java/Ruby app API server
• Renders static HTML shell w/o content to the browser
• Client JavaScript framework renders the UI in DOM

Server-side render/Single-page app architecture

• PHP/Java/Ruby app API server
• Renders static HTML w/content to the browser
• Client runs JavaScript framework to render subsequent pages

Introducing Ember FastBoot

What is Ember FastBoot

• Server-side rendering app server, aka "SSR"
• Runs on Node/Express.js
• Brings one aspect of progressive enhancement to your Ember app

Why Server-side rendering?

• Improves search indexing and crawlability
• Faster load times
• Enables standard caching strategies
• Works without JavaScript or where JavaScript is restricted

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.

• Many online retailers allow "below-the-fold" content
• Mostly art-directed imagery and HTML
• Mostly static HTML
• Mostly implemented inside an iframe
• Mostly injected onto the page by 3rd-party JavaScript

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

walmart.com

• Hesitant to use 3rd-party JavaScript
• Hosts the content themselves
• Writes our HTML directly into iframe
• Sanitize markup, and strips JavaScript*^{not all 🤷‍♂️}

bjs.com

• Reviews 3rd-party JavaScript
• We inject an iframe on page
• iframe loads static HTML

Salsify Enhanced Content

Enhanced Content

• Client: The visual template editor; Ember.js
  • input: user binds data to a template, inputs copy & images.
  • ouput: template UI config with content & data bindings
• API server: Fetches product data; Ruby on Rails
  • input: product lists, template UI config with content & data bindings
  • ouput: rendered HTML (saved to Amazon S3)
• SSR server Renders static HTML; Ember FastBoot
  • input: template UI config with content & data bindings
  • ouput: rendered HTML

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

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

• Use fastboot-app-server in production 💣💥
• Your app is now running in two runtimes, the browser and the server.
  • your code may need to have branching conditions for the server runtime
  • No DOM on the server: no jQuery, no document, no window objects.
  • Congrats🎉, you now have a new runtime to write tests for!
• ember-cli-fastboot-testing for testing server FastBoot
• Whitelist server dependencies in package.json "dependencies" block
• Use Docker to host and deploy, it helps

Be aware of security vulnerabilities you never had to consider.

Thanks 👋🙇‍♂️

Questions? / Resources

• Slides
  https://0xadada.pub/talk-using-ember-fastboot-in-weird-ways/
• ember fastboot
• fastboot-app-server
• Typeset in system-font-i18n.css
  $ npm home system-font-i18n-css