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/

Transcript

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View 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 Slide

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

    View 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 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View Slide