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/

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

November 10, 2016
Tweet

Transcript

  1. EASY ISOMORPHIC RENDERING ON THE JAMSTACK 7 7 PHIL HAWKSWORTH

    JAMSTACK MEETUP, SAN FRANCISCO
  2. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

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

    R/GA MAKES STUFF FOR CLIENTS PHIL HAWKSWORTH
  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
  5. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

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

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

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

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

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

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

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

    FOCUS FOR TODAY
  14. EASY ISOMORPHIC RENDERING ON THE JAMSTACK 7 7 PHIL HAWKSWORTH

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

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

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

    A SIMPLE SITE EXAMPLE WITH A STATIC ARCHITECTURE JAMSTACK
  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
  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
  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

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

    WWW.COMEDYINTHECROWN.COM to the browser!
  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
  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
  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
  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
  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
  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
  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
  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
  33. @philhawksworth JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

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

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

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

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

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

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

    VIEWS ASSETS CSS JAVASCRIPT TEMPLATES JSON /API /
  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)
  44. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

    VIEWS ASSETS CSS JAVASCRIPT TEMPLATES JSON /API /
  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
  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
  47. JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth @philhawksworth

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

    to the browser!
  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
  50. @philhawksworth JAM Stack workflows JAMStack meetup, San Francisco Phil Hawksworth

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

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

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

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

    THANKS 7 7 @PHILHAWKSWORTH QUESTIONS?