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

Easy Isomorphic Rendering on the JAMStack

Easy Isomorphic Rendering on the JAMStack

A walkthrough of an example site demonstrating powerful yet simple workflows for code deployments and content management with a static site architecture.

Using static site generators we can even power the same rendering both on the server and in the client, for efficient and dynamic experiences.

Accompanying blog post: https://www.hawksworx.com/blog/isomorphic-rendering-on-the-jam-stack/

Phil Hawksworth

November 10, 2016
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

Transcript

  1. EASY ISOMORPHIC RENDERING
    ON THE JAMSTACK
    7
    7
    PHIL HAWKSWORTH
    JAMSTACK MEETUP, SAN FRANCISCO

    View full-size slide

  2. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    HELLO
    PHILHAWKSWORTH
    @
    TECHNOLOGY DIRECTOR

    View full-size slide

  3. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    R/GA MAKES STUFF FOR CLIENTS
    PHIL HAWKSWORTH

    View full-size slide

  4. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    R/GA CREATES PRODUCTS, SERVICES,
    AND COMMUNICATIONS THAT HELP
    GROW OUR CLIENT’S BUSINESSES
    R/GA

    View full-size slide

  5. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    CRUSHER
    DREAM
    the

    View full-size slide

  6. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

    View full-size slide

  7. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

    View full-size slide

  8. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    PREVIOUSLY

    View full-size slide

  9. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    EXCESSIVE
    ENHANCEMENT
    #
    @PHILHAWKSWORTH JSDAY
    ~
    CMS
    I CAN SMELL YOUR
    @PHILHAWKSWORTH

    View full-size slide

  10. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    EXCESSIVE
    ENHANCEMENT
    #
    @PHILHAWKSWORTH JSDAY
    ~
    CMS
    I CAN SMELL YOUR
    @PHILHAWKSWORTH

    View full-size slide

  11. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    EXCESSIVE ENHANCEMENT
    https://speakerdeck.com/philhawksworth/excessive-enhancement-jsday
    I CAN SMELL YOUR CMS
    https://speakerdeck.com/philhawksworth/i-can-smell-your-cms-at-bdconf
    https://vimeo.com/53317254
    DYNAMIC STATIC SITE STRATEGIES
    https://speakerdeck.com/philhawksworth/dynamic-static-site-strategies-from-smashing-conf-ny
    https://vimeo.com/174172567

    View full-size slide

  12. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    EMPOWERMENT & RESPONSIBILITY FOR
    FRONT END DEVELOPERS

    View full-size slide

  13. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    FOCUS FOR TODAY

    View full-size slide

  14. EASY ISOMORPHIC RENDERING
    ON THE JAMSTACK
    7
    7
    PHIL HAWKSWORTH
    JAMSTACK MEETUP, SAN FRANCISCO
    really?
    huh?
    whassat?
    you mean..?

    View full-size slide

  15. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    THE JAM STACK
    JAVASCRIPT / APIS / MARKUP
    MATHIAS BIILMANN, NETLIFY
    speakerdeck.com/biilmann/the-jam-stack

    View full-size slide

  16. EASY ISOMORPHIC RENDERING
    ON THE JAMSTACK
    7
    7
    PHIL HAWKSWORTH
    JAMSTACK MEETUP, SAN FRANCISCO
    really?
    huh?
    whassat?
    you mean..?
    ✓ ✓

    View full-size slide

  17. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE

    View full-size slide

  18. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    JAMSTACK

    View full-size slide

  19. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    STATIC SITE ARCHITECTURES
    WHY SHOULD WE EVEN CARE?
    CHEAPER, SIMPLER HOSTING
    FEWER POINTS OF FAILURE
    FEWER VULNERABILITIES
    EASIER COMPLIANCE
    GREATER PORTABILITY / SANDBOXING
    SIMPLER PERFORMANCE OPTIMISATION

    View full-size slide

  20. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    JAMSTACK

    View full-size slide

  21. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  22. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    WWW.COMEDYINTHECROWN.COM

    View full-size slide

  23. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    CONTENT TARGETING
    ONE AUDIENCE / UNIVERSAL CONTENT / NO PERSONALISATION
    CONTENT PUBLISH FREQUENCY
    A FEW TIMES EACH WEEK
    CODE OR DESIGN STABILITY
    FREQUENT BUT MINOR ITERATIONS
    USER GENERATED CONTENT
    NONE PUBLISHED / USER DATA CAPTURE

    View full-size slide

  24. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    WWW.COMEDYINTHECROWN.COM
    to the
    browser!

    View full-size slide

  25. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  26. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    A MEANINGFUL URL FOR EVERY PAGE OF CONTENT
    CRAWLABLE, CURLABLE, INDEXABLE PAGES
    RAPID RENDERING & GOOD PERCEIVED PERFORMANCE
    HIGH FAULT TOLERANCE AND OPTIMISED RENDER PATH
    THRIFTY DATA TRANSFER REQUIREMENTS
    PAGE TRANSITIONS AND VISUAL EFFECTS
    MINIMAL HOSTING COMPLEXITY
    TECHNICAL GOALS

    View full-size slide

  27. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    A MEANINGFUL URL FOR EVERY PAGE OF CONTENT
    CRAWLABLE, CURLABLE, INDEXABLE PAGES
    RAPID RENDERING & GOOD PERCEIVED PERFORMANCE
    HIGH FAULT TOLERANCE AND OPTIMISED RENDER PATH
    THRIFTY DATA TRANSFER REQUIREMENTS
    PAGE TRANSITIONS AND VISUAL EFFECTS
    MINIMAL HOSTING COMPLEXITY
    TECHNICAL GOALS
    A WEB SITE

    View full-size slide

  28. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  29. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    SITE
    TEMPLATES
    CONTENT
    BUILD
    HOSTED
    PRODUCTION
    ENV
    REPO
    CDN

    View full-size slide

  30. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    SITE
    TEMPLATES
    CONTENT
    BUILD
    HOSTED
    PRODUCTION
    ENV
    REPO
    CONTENTFUL
    CMS AAS
    CMS
    ASSETS
    CDN

    View full-size slide

  31. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    SITE
    TEMPLATES
    CONTENT
    BUILD
    HOSTED
    PRODUCTION
    ENV
    REPO
    CONTENTFUL
    CMS AAS
    CMS
    ASSETS
    CDN

    View full-size slide

  32. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  33. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    BUZZ
    WORD
    ALERT

    View full-size slide

  34. @philhawksworth
    BAKE,
    DON’T FRY
    – Aaron Swartz

    View full-size slide

  35. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    A MEANINGFUL URL FOR EVERY PAGE OF CONTENT
    CRAWLABLE, CURLABLE, INDEXABLE PAGES
    RAPID RENDERING & GOOD PERCEIVED PERFORMANCE
    HIGH FAULT TOLERANCE AND OPTIMISED RENDER PATH
    THRIFTY DATA TRANSFER REQUIREMENTS
    PAGE TRANSITIONS AND VISUAL EFFECTS
    MINIMAL HOSTING COMPLEXITY
    TECHNICAL GOALS

    View full-size slide

  36. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    A MEANINGFUL URL FOR EVERY PAGE OF CONTENT
    CRAWLABLE, CURLABLE, INDEXABLE PAGES
    RAPID RENDERING & GOOD PERCEIVED PERFORMANCE
    HIGH FAULT TOLERANCE AND OPTIMISED RENDER PATH
    THRIFTY DATA TRANSFER REQUIREMENTS
    PAGE TRANSITIONS AND VISUAL EFFECTS
    MINIMAL HOSTING COMPLEXITY
    TECHNICAL GOALS

    View full-size slide

  37. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    TEMPLATES
    CONTENT
    BUILD SITE
    HOSTED
    PRODUCTION
    ENV
    REPO
    CONTENTFUL
    CMS AAS
    CMS
    ASSETS
    CDN

    View full-size slide

  38. JAM Stack workflows @philhawksworth
    SITE
    JAMStack meetup, San Francisco Phil Hawksworth

    View full-size slide

  39. JAM Stack workflows @philhawksworth
    / PATH-TO-AN-HTML-FILE
    SITE
    JAMStack meetup, San Francisco Phil Hawksworth

    View full-size slide

  40. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    THIS IS STATIC
    (AND STATIC IS MY JAM)

    View full-size slide

  41. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    SITE

    View full-size slide

  42. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    VIEWS
    ASSETS
    CSS JAVASCRIPT
    TEMPLATES
    JSON
    /API
    /

    View full-size slide

  43. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    BUILD TOOLS
    NPM & GULP FOR EASY DEPENDENCY MANAGEMENT & AUTOMATION
    SSG - I ROLLED MY OWN
    STARTED SIMPLE / ADDED JUST THE FEATURES I NEEDED / FOCUSSED ON MY USECASE
    STATIC SITE GENERATION & TEMPLATING
    TEMPLATING - NUNJUCKS
    SIMPLE SYNTAX / INHERITANCE / LOGIC / CLIENT-SIDE RENDER
    (IDIOT)

    View full-size slide

  44. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    VIEWS
    ASSETS
    CSS JAVASCRIPT
    TEMPLATES
    JSON
    /API
    /

    View full-size slide

  45. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    GULP BUILD:LOCAL
    CLEAN
    SASS
    SCRIPTS
    IMAGES
    GENERATE (HTML PAGES)
    PRECOMPILE (TEMPLATES FOR CLIENT)
    API
    BUILD TASKS

    View full-size slide

  46. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    GULP BUILD:LOCAL
    CLEAN
    SASS
    SCRIPTS
    IMAGES
    GENERATE (HTML PAGES)
    PRECOMPILE (TEMPLATES FOR CLIENT)
    API
    BUILD TASKS
    GET DATA
    BUILD:LOCAL
    CONFIGS (FOR HOSTING CONFIG)
    GULP BUILD:PROD

    View full-size slide

  47. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    VIEWS
    ASSETS
    CSS JAVASCRIPT
    TEMPLATES
    JSON
    /API
    /
    NETLIFY
    REDIRECTS
    HEADERS

    View full-size slide

  48. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    to the
    browser!

    View full-size slide

  49. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  50. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

    View full-size slide

  51. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  52. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    TEMPLATES
    CONTENT
    BUILD SITE
    HOSTED
    PRODUCTION
    ENV
    REPO
    CONTENTFUL
    CMS AAS
    CMS
    ASSETS
    CDN

    View full-size slide

  53. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    A SIMPLE SITE EXAMPLE
    WITH A STATIC ARCHITECTURE
    THE SITE
    PERFORMANCE AND TECH GOALS
    ARCHITECTURE
    BOOTSTRAPPING
    ISOMORPHIC RENDERING
    HOSTING TOOLS
    DEVELOPMENT WORKFLOW
    CONTENT MANAGEMENT WORKFLOW

    View full-size slide

  54. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TEMPLATES
    CONTENT
    BUILD SITE
    LOCAL
    DEVELOPMENT
    ENV
    TEMPLATES
    CONTENT
    BUILD SITE
    HOSTED
    PRODUCTION
    ENV
    REPO
    CONTENTFUL
    CMS AAS
    CMS
    ASSETS
    CDN

    View full-size slide

  55. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    to the
    browser!

    View full-size slide

  56. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    TAKEAWAYS

    View full-size slide

  57. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    RENDERING EFFICIENCIES
    THROUGH STATIC PRESENTATION & ENHANCEMENT TO CLIENT-SIDE RENDERS
    DISCOVERABLE CONTENT & SYNDICATION
    THROUGH READY-TO-SERVE PAGES & TEMPLATING
    CONTENT DYNAMISM
    THROUGH ABSTRACTED CMS AND LOW FRICTION WORKFLOWS
    DESIGN AND CODE DYNAMISM
    THROUGH LOW FRICTION DEPLOYMENTS, ROLLBACKS AND VERSIONING

    View full-size slide

  58. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    FURTHER READING

    View full-size slide

  59. @philhawksworth
    JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth
    ISOMORPHIC RENDERING ON THE JAM STACK
    https://www.hawksworx.com/blog/isomorphic-rendering-on-the-jam-stack/
    USING A STATIC SITE GENERATOR AT SCALE
    https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/
    NETLIFY BLOG
    https://www.netlify.com/blog/

    View full-size slide

  60. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth
    THANKS
    7
    7
    @PHILHAWKSWORTH
    QUESTIONS?

    View full-size slide