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. 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
  2. @philhawksworth JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

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

    EXCESSIVE ENHANCEMENT # @PHILHAWKSWORTH JSDAY ~ CMS I CAN SMELL YOUR @PHILHAWKSWORTH
  4. @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
  5. @philhawksworth JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

    EMPOWERMENT & RESPONSIBILITY FOR FRONT END DEVELOPERS
  6. EASY ISOMORPHIC RENDERING ON THE JAMSTACK 7 7 PHIL HAWKSWORTH

    JAMSTACK MEETUP, SAN FRANCISCO really? huh? whassat? you mean..?
  7. 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
  8. EASY ISOMORPHIC RENDERING ON THE JAMSTACK 7 7 PHIL HAWKSWORTH

    JAMSTACK MEETUP, SAN FRANCISCO really? huh? whassat? you mean..? ✓ ✓ ✓
  9. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

    A SIMPLE SITE EXAMPLE WITH A STATIC ARCHITECTURE JAMSTACK
  10. @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
  11. 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
  12. 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
  13. @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
  14. 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
  15. @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
  16. @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
  17. 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
  18. 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
  19. 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
  20. 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
  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
  22. @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
  23. @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
  24. 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
  25. @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)
  26. @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
  27. @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
  28. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

    VIEWS ASSETS CSS JAVASCRIPT TEMPLATES JSON /API / NETLIFY REDIRECTS HEADERS
  29. 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
  30. 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
  31. 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
  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 BOOTSTRAPPING ISOMORPHIC RENDERING HOSTING TOOLS DEVELOPMENT WORKFLOW CONTENT MANAGEMENT WORKFLOW
  33. 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
  34. @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
  35. @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/