Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An Update on FastBoot

tomdale
January 29, 2016

An Update on FastBoot

Slides from my Ember NYC talk on January 28th, 2016 about Ember server-side rendering with FastBoot.

tomdale

January 29, 2016
Tweet

More Decks by tomdale

Other Decks in Programming

Transcript

  1. FastBoot

    View Slide

  2. Progressive Enhancement
    for Ember

    View Slide

  3. View Slide

  4. View Slide

  5. “Server-Side
    Rendering”

    View Slide

  6. “Server-Side
    Rendering”
    is just the start

    View Slide

  7. Server-Side…
    • Rendering
    • Routing
    • Model Fetching
    • Serialization
    • Logging
    • Authentication

    View Slide

  8. Other libraries have
    “server-side rendering”

    View Slide

  9. FastBoot is server-side
    rendering for the 99%

    View Slide

  10. Ease of Use

    View Slide

  11. $ ember install ember-cli-fastboot
    Installation

    View Slide

  12. $ ember fastboot
    Development

    View Slide

  13. Deployment

    View Slide

  14. Architecture

    View Slide

  15. Requirements
    • No PhantomJS
    buggy, slow, massive memory consumption
    • No jsdom
    slow, compatibility quirks
    • Concurrent

    View Slide

  16. HTTP/HTTPS

    View Slide

  17. Ember App

    View Slide

  18. Ember App
    App Instance App Instance

    View Slide

  19. Constraints

    View Slide

  20. Constraints
    • No jQuery
    • No DOM
    • No globals
    • No shared state
    • No browser-only
    APIs

    View Slide

  21. Universal JavaScript

    View Slide

  22. Isomorphic

    View Slide

  23. ember-network
    github.com/tomdale/ember-network

    View Slide

  24. import Route from "ember-route";
    import fetch from "ember-network/fetch";
    export default Route.extend({
    model() {
    return fetch('https://api.github.com/users/tomdale/events')
    .then(function(response) {
    return response.json();
    });
    }
    });

    View Slide

  25. node-fetch.js whatwg-fetch.js
    FastBoot browser
    fetch.js

    View Slide

  26. Deployment

    View Slide

  27. Ease of Use

    View Slide

  28. Deploying to AWS

    View Slide

  29. Demo

    View Slide

  30. View Slide

  31. IAM Roles
    Instance Profiles
    ElasticBeanstalk Environments
    S3 Buckets
    Bucket Policies
    Autoscaling Groups

    View Slide

  32. View Slide

  33. What You Can Do

    View Slide

  34. bit.ly/help-finish-fastboot

    View Slide

  35. FastBoot only works if the
    community rallies around it

    View Slide

  36. Test Your Apps
    Test Your Addons

    View Slide

  37. Fast Load
    SEO Friendly
    Mobile Friendly
    Rich Interactions
    Offline
    Fast Navigation
    progressive enhancement JavaScript

    View Slide

  38. Fast Load
    SEO Friendly
    Mobile Friendly
    Rich Interactions
    Offline
    Fast Navigation
    +

    View Slide

  39. View Slide

  40. Thank You

    View Slide

  41. Questions?

    View Slide

  42. SHIRT Suitsupply
    TROUSERS Ted Baker
    TIE Hermès
    SHOES Allen Edmonds
    SOCKS Slack

    View Slide