Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@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

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@philhawksworth BAKE, DON’T FRY – Aaron Swartz

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

@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)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

@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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

@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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

@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/

Slide 60

Slide 60 text

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