Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@chrisdmacrae © 2017 forestry.io forestry.io Git-backed vs API-driven CMS Choosing the right tool for the job
Slide 2
Slide 2 text
@chrisdmacrae © 2017 forestry.io forestry.io Chris Macrae www.forestry.io
Slide 3
Slide 3 text
@chrisdmacrae © 2017 forestry.io forestry.io Old vs New Traditional CMS vs Headless CMS The Headless CMS The Traditional CMS
Slide 4
Slide 4 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple Content Management from Production Environments
Slide 5
Slide 5 text
@chrisdmacrae © 2017 forestry.io forestry.io Vendor lock-in Poor performance Poor reliability Poor security Cost The Problem The Traditional Stack
Slide 6
Slide 6 text
@chrisdmacrae © 2017 forestry.io forestry.io Content Editors get a CMS at the cost of Developer Freedom
Slide 7
Slide 7 text
@chrisdmacrae © 2017 forestry.io forestry.io Vendor lock-in Poor performance Poor reliability Poor security Cost The Problem The Traditional Stack
Slide 8
Slide 8 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 9
Slide 9 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 10
Slide 10 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 11
Slide 11 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 12
Slide 12 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 13
Slide 13 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 14
Slide 14 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor performance
Slide 15
Slide 15 text
@chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
Slide 16
Slide 16 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
Slide 17
Slide 17 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
Slide 18
Slide 18 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
Slide 19
Slide 19 text
@chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
Slide 20
Slide 20 text
@chrisdmacrae © 2017 forestry.io forestry.io Poor security
Slide 21
Slide 21 text
@chrisdmacrae © 2017 forestry.io forestry.io —Ines Gutzmer, Equifax “Today [Equifax] announced a cybersecurity incident potentially impacting approximately 143 million U.S. consumers. Criminals exploited a U.S. website application vulnerability to gain access to Social Security numbers, birth dates, addresses and, in some instances, driver’s license numbers.” Poor security
Slide 22
Slide 22 text
@chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
Slide 23
Slide 23 text
@chrisdmacrae © 2017 forestry.io forestry.io –Wordpress.com VIP “Prices for WordPress.com VIP Cloud Hosting start at $5000 per month for up to 5 websites. Our Self-Hosted services start at $15k per year.” Cost
Slide 24
Slide 24 text
@chrisdmacrae © 2017 forestry.io forestry.io Managing this complicated stack isn’t easy Need deep knowledge of the browser, of management of servers, databases, caches CDNs, the CMS, and of backup automation, versioning and so much more…
Slide 25
Slide 25 text
@chrisdmacrae © 2017 forestry.io forestry.io No thanks!
Slide 26
Slide 26 text
@chrisdmacrae © 2017 forestry.io forestry.io So what do we do?
Slide 27
Slide 27 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack
Slide 28
Slide 28 text
@chrisdmacrae © 2017 forestry.io forestry.io Git-backed CMS API-driven CMS The Solution The Headless CMS & The JAM Stack
Slide 29
Slide 29 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack
Slide 30
Slide 30 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack APIs Stripe, Intercom, Disqus… Pre-generated Markup HTML, JSON, RSS, XML Javascript Native, jQuery, React, Angular, Vue…
Slide 31
Slide 31 text
@chrisdmacrae © 2017 forestry.io forestry.io Git-backed vs API-driven The Headless CMS & The JAM Stack
Slide 32
Slide 32 text
@chrisdmacrae © 2017 forestry.io forestry.io Storage The Headless CMS & The JAM Stack
Slide 33
Slide 33 text
@chrisdmacrae © 2017 forestry.io forestry.io The Headless CMS & The JAM Stack site.com
Slide 34
Slide 34 text
@chrisdmacrae © 2017 forestry.io forestry.io The Headless CMS & The JAM Stack
Slide 35
Slide 35 text
@chrisdmacrae © 2017 forestry.io forestry.io Cognitive Load The Headless CMS & The JAM Stack
Slide 36
Slide 36 text
@chrisdmacrae © 2017 forestry.io forestry.io The Headless CMS & The JAM Stack Pull from Git Download dependencies Build site
Slide 37
Slide 37 text
@chrisdmacrae © 2017 forestry.io forestry.io The Headless CMS & The JAM Stack Pull from Git Download dependencies Build site Authenticate with API Pull in content
Slide 38
Slide 38 text
@chrisdmacrae © 2017 forestry.io forestry.io Intellectual Property The Headless CMS & The JAM Stack
Slide 39
Slide 39 text
@chrisdmacrae © 2017 forestry.io forestry.io Solving the old stack’s problems The Headless CMS & The JAM Stack
Slide 40
Slide 40 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code Great performance Higher reliability Superior security The Solution The Headless CMS & The JAM Stack
Slide 41
Slide 41 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
Slide 42
Slide 42 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
Slide 43
Slide 43 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
Slide 44
Slide 44 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
Slide 45
Slide 45 text
@chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
Slide 46
Slide 46 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack Decouple CMS, frontend code, and backend code Great performance Higher reliability Superior security
Slide 47
Slide 47 text
@chrisdmacrae © 2017 forestry.io forestry.io Great performance
Slide 48
Slide 48 text
@chrisdmacrae © 2017 forestry.io forestry.io Great performance
Slide 49
Slide 49 text
@chrisdmacrae © 2017 forestry.io forestry.io Great performance
Slide 50
Slide 50 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack Decouple CMS, frontend code, and backend code Great performance Higher reliability Superior security
Slide 51
Slide 51 text
@chrisdmacrae © 2017 forestry.io forestry.io Higher reliability
Slide 52
Slide 52 text
@chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless Stack Decouple CMS, frontend code, and backend code Great performance Higher reliability Superior security
Slide 53
Slide 53 text
@chrisdmacrae © 2017 forestry.io forestry.io Secure CMS Bulletproof frontends Backend via APIs Distributed infrastructure Superior security
Slide 54
Slide 54 text
@chrisdmacrae © 2017 forestry.io forestry.io Superior security
Slide 55
Slide 55 text
@chrisdmacrae © 2017 forestry.io forestry.io Superior security
Slide 56
Slide 56 text
@chrisdmacrae © 2017 forestry.io forestry.io Superior security
Slide 57
Slide 57 text
@chrisdmacrae © 2017 forestry.io forestry.io Superior security
Slide 58
Slide 58 text
@chrisdmacrae © 2017 forestry.io forestry.io API-driven • Easy to use content with multiple frontends • Ideal for content that changes < 1 per minute • Roll your own CMS through API • Many choices Git-backed • No vendor lock-in • Devs & editors using same workflow • Automated backups/versioning • Simple setup Pros The Headless CMS & The JAM Stack
Slide 59
Slide 59 text
@chrisdmacrae © 2017 forestry.io forestry.io Git-backed • Harder to use content for multiple frontends • Not great for content that changes > 1 per minute • Limited options • Content queries can be limited depending on the CMS Cons API-driven • Usually comes with storage and API usage limits • Devs & editors using different workflow • Backups and versioning highly dependant on CMS • Less control over content model/formatting The Headless CMS & The JAM Stack
Slide 60
Slide 60 text
@chrisdmacrae © 2017 forestry.io forestry.io TL;DR The Headless CMS & The JAM Stack
Slide 61
Slide 61 text
@chrisdmacrae © 2017 forestry.io forestry.io Static Websites https://forestry.io How do we build these sites?
Slide 62
Slide 62 text
@chrisdmacrae © 2017 forestry.io forestry.io Static Websites https://forestry.io How do we build these sites? Git-backed SSG (Hugo) Dynamic User State w/ Session Cookies Hosted on CDN
Slide 63
Slide 63 text
@chrisdmacrae © 2017 forestry.io forestry.io Static eCommerce Website https://prettyflyfpv.com “The amount of work needed to make a [traditional] content-management system even remotely as optimized as a static generated site […] are frankly overkill for 90% of the small businesses out there.” How do we build these sites?
Slide 64
Slide 64 text
@chrisdmacrae © 2017 forestry.io forestry.io Static eCommerce Website https://prettyflyfpv.com “The amount of work needed to make a [traditional] content-management system even remotely as optimized as a static generated site […] are frankly overkill for 90% of the small businesses out there.” How do we build these sites? Git-backed SSG (Hugo) eCommerce via Snipcart Hosted on CDN
Slide 65
Slide 65 text
@chrisdmacrae © 2017 forestry.io forestry.io eCommerce Platform https://nastygal.com How do we build these sites?
Slide 66
Slide 66 text
@chrisdmacrae © 2017 forestry.io forestry.io eCommerce Platform https://nastygal.com How do we build these sites? API-driven SSG SPA Enhanced + Mobile Apps via REST
Slide 67
Slide 67 text
@chrisdmacrae © 2017 forestry.io forestry.io Multi-format Publishing http://www.getty.edu/publications/romanmosaics/ How do we build these sites?
Slide 68
Slide 68 text
@chrisdmacrae © 2017 forestry.io forestry.io Multi-format Publishing http://www.getty.edu/publications/romanmosaics/ How do we build these sites? Git-backed SSG (Middleman) Multiple outputs Hosted on CDN
Slide 69
Slide 69 text
@chrisdmacrae © 2017 forestry.io forestry.io Multi-platform Applications https://wework.com How do we build these sites?
Slide 70
Slide 70 text
@chrisdmacrae © 2017 forestry.io forestry.io Multi-platform Applications https://wework.com How do we build these sites? API-driven SPA + Mobile Apps via REST Rails Backend (API) Hosted on CDN
Slide 71
Slide 71 text
@chrisdmacrae © 2017 forestry.io forestry.io What do all of these sites have in common? How do we build these sites?
Slide 72
Slide 72 text
@chrisdmacrae © 2017 forestry.io forestry.io Choose right tool for the job How you use a tool, and how effectively it meets your specific needs is what matters.