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
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?