The Modern Website

Transcript

1. @chrisdmacrae © 2017 forestry.io forestry.io The Modern Website
2. @chrisdmacrae © 2017 forestry.io forestry.io Chris Macrae www.forestry.io
3. @chrisdmacrae © 2017 forestry.io forestry.io Old vs New Traditional CMS vs Headless CMS The Headless CMS The Traditional CMS
4. @chrisdmacrae © 2017 forestry.io forestry.io Decouple Content Management from Production Environments
5. @chrisdmacrae © 2017 forestry.io forestry.io Vendor lock-in Poor performance Poor reliability Poor security Cost The Problem The Traditional Stack
6. @chrisdmacrae © 2017 forestry.io forestry.io Content Editors get a CMS at the cost of Developer Freedom
7. @chrisdmacrae © 2017 forestry.io forestry.io
8. @chrisdmacrae © 2017 forestry.io forestry.io
9. @chrisdmacrae © 2017 forestry.io forestry.io
10. @chrisdmacrae © 2017 forestry.io forestry.io
11. @chrisdmacrae © 2017 forestry.io forestry.io Vendor lock-in Poor performance Poor reliability Poor security Cost The Problem The Traditional Stack
12. @chrisdmacrae © 2017 forestry.io forestry.io —DoubleClick, Google “53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.”
13. @chrisdmacrae © 2017 forestry.io forestry.io —Google Trends “The average U.S. retail mobile site loaded in 6.9 seconds in July 2016.”
14. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
15. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
16. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
17. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
18. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
19. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
20. @chrisdmacrae © 2017 forestry.io forestry.io Poor performance
21. @chrisdmacrae © 2017 forestry.io forestry.io What does 1 second cost? Amazon — 1.6 billion lost in sales /year Google — 40% decrease in search traffic Walmart — 2% of conversions lost
22. @chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
23. @chrisdmacrae © 2017 forestry.io forestry.io
24. @chrisdmacrae © 2017 forestry.io forestry.io Reddit Hug of Death Their platform went down for 2 hours Deployed a script that would reboot a server each time it failed
25. @chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
26. @chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
27. @chrisdmacrae © 2017 forestry.io forestry.io Poor reliability
28. @chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
29. @chrisdmacrae © 2017 forestry.io forestry.io Poor security
30. @chrisdmacrae © 2017 forestry.io forestry.io
31. @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
32. @chrisdmacrae © 2017 forestry.io forestry.io The Problem The Traditional Stack Vendor lock-in Poor performance Poor reliability Poor security Cost
33. @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
34. @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…
35. @chrisdmacrae © 2017 forestry.io forestry.io No thanks!
36. @chrisdmacrae © 2017 forestry.io forestry.io So what do we do?
37. @chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack
38. @chrisdmacrae © 2017 forestry.io forestry.io Git-backed CMS API-driven CMS The Solution The Headless CMS & The JAM Stack
39. @chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless CMS & The JAM Stack
40. @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…
41. @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
42. @chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
43. @chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
44. @chrisdmacrae © 2017 forestry.io forestry.io Decouple CMS, frontend code, and backend code
45. @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
46. @chrisdmacrae © 2017 forestry.io forestry.io Great performance
47. @chrisdmacrae © 2017 forestry.io forestry.io Great performance
48. @chrisdmacrae © 2017 forestry.io forestry.io Great performance
49. @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
50. @chrisdmacrae © 2017 forestry.io forestry.io Higher reliability
51. @chrisdmacrae © 2017 forestry.io forestry.io The Solution The Headless Stack Decouple CMS, frontend code, and backend code Great performance Higher reliability Superior security
52. @chrisdmacrae © 2017 forestry.io forestry.io Secure CMS Bulletproof frontends Backend via APIs Distributed infrastructure Superior security
53. @chrisdmacrae © 2017 forestry.io forestry.io Superior security
54. @chrisdmacrae © 2017 forestry.io forestry.io TL;DR The Headless CMS & The JAM Stack
55. @chrisdmacrae © 2017 forestry.io forestry.io Static Websites https://forestry.io How do we build these sites?
56. @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
57. @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?
58. @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
59. @chrisdmacrae © 2017 forestry.io forestry.io eCommerce Platform https://nastygal.com How do we build these sites?
60. @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
61. @chrisdmacrae © 2017 forestry.io forestry.io Multi-format Publishing http://www.getty.edu/publications/romanmosaics/ How do we build these sites?
62. @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
63. @chrisdmacrae © 2017 forestry.io forestry.io Multi-platform Applications https://wework.com How do we build these sites?
64. @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
65. @chrisdmacrae © 2017 forestry.io forestry.io What do all of these sites have in common? How do we build these sites?