Recommended
More Related Content
Similar to Rise of the Content Mesh: Webcast with Contentful and Gatsby
Similar to Rise of the Content Mesh: Webcast with Contentful and Gatsby (20)
More from Gatsbyjs
Recently uploaded
Recently uploaded (20)
Rise of the Content Mesh: Webcast with Contentful and Gatsby
- 1. Rise of the Content Mesh: Webcast with Contentful and Gatsby Webcast November 15th, 2018
- 2. Welcome
- 3. Presenters Linda Watkins Director of Marketing Gatsby @lindawatkins Shyamal Ruparel, Developer Advocate Contentful @shyruparel Sam Bhagwat Co-founder & Head of Enterprise Gatsby @calcsam
- 4. Developing for the web is hard
- 5. With millions of websites, developers have to create compelling experiences to engage audiences when new destinations are only a few keystrokes away.
- 6. Digitally native brands such as Harry’s, Dollar Shave Club, Bonobos, & Stitchfix are disrupting traditional industries like consumer goods (CPG), clothing, retail, travel...
- 7. The returns to having an incredible web presence are rising
- 8. With the rise of e-commerce & social sharing, a website that’s 10% better than the competition might deliver 20% or 50% or 100% more revenue
- 10. Origin of the CMS
- 11. The CMS was born to make content sites possible. Now, it’s being reimagined to make them incredible.
- 12. In the early 2000s, publishing on the web was difficult. The CMS emerged as a single application to store content, build sites, and deliver them to users. Over time, the feature landscape broadened — key areas like search, analytics, payments, personalization, and e-commerce emerged.
- 13. TRADITIONAL FULL-STACK CMS ARCHITECTURE Hosting Presentation Content Editing UI Database Forms Auth Analytics Search Personalization Payment Preview UI components Page creation Content Mesh Forms Content Systems CI/CD + Hosting Internal APIs Headless CMS E-commerce CMSs Other services MODULAR/HEADLESS CMS ARCHITECTURE UI libraryPreview Payment Personalization Auth AnalyticsSearchUI elements DIY see Journey To The Content Mesh Architectures are Modularizing
- 14. A team running an e-commerce site is migrating from Drupal. They’re splitting up their CMS, storing products in Contentful, reviews in Bazaarvoice, and user data in Auth0.
- 15. Poll What is most important to you in a website framework?
- 16. Three Areas of Rapid Innovation
- 17. Three Areas of Rapid Innovation
- 18. Three Areas of Rapid Innovation
- 19. A modern website experience requires modern tooling
- 20. Source: Google Trends The Rise of Modern Development Frameworks
- 21. CORPORATE WINNERS OF THE 2018 WEBBY AWARDS bmw.com -- Angular // AD (Conde Nast) -- React // Spotify.me -- Vue
- 22. The Enterprise CMS is 10+ years out of date
- 23. CMS development environment Modern JS Ecosystem Walled-garden development Headless Cloud CMS Local app servers & DBs Headless Cloud CMS No project organization or bundling tools Babel, Webpack, NPM, React/ Angular/Vue Bug-prone DOM rendering Virtual DOM GROWING PRESSURE DIFFERENTIAL BETWEEN CMS DEVELOPMENT & MODERN JS (see The Rise of Modern Web Development)
- 24. Three Areas of Rapid Innovation
- 26. Rise of Smartphone Traffic Source: StatCounter
- 27. Poll Question
- 28. Every 100ms of latency costs 1% of sales
- 29. Performance is difficult to achieve inside traditional website development paradigms
- 30. Website Perf. Modern Tools Content Creator Developer Site Visitor Headless CMS Vendors Vendors Content Mesh Frame- works see Journey To The Content Mesh GATSBY MAKES MODERN WEBSITES WITHOUT THE “DIY”
- 31. With Gatsby you can: ● Performance out of the box ● Bring content from anywhere ● Use modern development tools (React)
- 32. With Gatsby you can: ● Use modern development tools ● Bring content from anywhere ● Create lightning-fast sites out of the box
- 34. Out of the box Component UI + Virtual DOM Bundling, code splitting, transpiling Version control CLI, dev server, hot reloading Easy to add Component curation OSS components & comp. libraries Linting & formatting Component inspection Gatsby offers modern development tooling
- 35. Gatsby offers perf out of the box Delivery optimization Payload optimization ● Static files delivered to CDN ● No app servers ● No databases ● Globally available ● Code splitting ● Smart link prefetching ○ Instantaneous in-site nav ● Inlining critical JS & CSS ● Progressive image loading ● Responsive image loading ○ Advanced SVG support (blur-up, traced-svg, sqip…)
- 36. Case Studies
- 37. Flamingo shopflamingo.com Body care for women a product by Harry’s
- 38. The Challenge ● Big product launch had to handle lots of traffic with no room for failure ● Tight timeline ● Most visitors on mobile ● Needed performance out of the box
- 39. “We wanted to focus on performance at the beginning of the project. It’s easier than trying to make a built website perform later.” -Tim Brown, Senior Software Engineer Harry’s
- 40. The Results ● 5X as fast (compared to competitors) ● Mobile optimized ● Out of the box performance ● Successful launch!
- 41. “As an ecommerce site, performance (SEO and conversion) is super important and Gatsby takes care of this for us.” -Johnny Lin, Engineering Manager Harry’s
- 42. “We were able to allow newer teammates to be part of the on-call for the launch because Gatsby made it so easy to maintain.” Tim Brown, Senior Software Engineer Harry’s
- 43. Youfit Health Clubs Youfit.com Health that’s about you
- 44. The Challenge ● Slow site led to 60% bounce rate ● Losing customers ● Poor experience on mobile devices
- 45. The Results ● Increased lead conversion by 60% ● 22% increase in organic traffic ● 50% increase in accessibility score, causing their Google search rank to climb ● Mobile optimized
- 46. “The website went from a burden to a strategic tool we use to capture leads and generate ROI.”” -Zach Muha, Director of Digital Marketing Youfit
- 47. Content Management in the JAMStack By Shy Ruparel
- 48. Shy Ruparel Developer Evangelist | Contentful @ShyRuparel He/Him
- 49. 3 Let’s talk about Content Management
- 50. COMMON CMS PROBLEMS PAGE-CENTRIC MODEL MONOLYTHIC SOLUTION SLOW ITERATIONS
- 54. Content vs. Look DON'T BREAK SEPARATION OF CONCERNS
- 55. Html
- 56. Html
- 57. Html Whenever you put HTML in your content you're breaking portability!
- 58. DISADVANTAGES OF WYSIWYG Too flexible01 Mixes content and looks02 03 Too easy to mess up 04 HTML is the goal
- 59. You can build your own CMS, but... COMMON CMS PROBLEMS
- 60. I don't want to do that!
- 61. I don't want to do that! I don't have time for that!
- 62. Don’t let a CMS get in the way of shipping software. Contentful provides a content infrastructure that enables teams to power content in any digital product.
- 63. CONTENT AT SCALE STRUCTURED CONTENT SPEEDY DEVELOPMENT GOOD EDITING EXPERIENCE
- 64. Our APIs Content Delivery API Content Preview API staging production Content Management API automation Images API assets
- 66. So it’s time for a small tangent
- 70. www.ti4.nyc Let’s dig into the About Page
- 71. I define a Content Model
- 73. A JSON API { "sys": { "contentType": { "sys": { "id": "component" } } }, "fields": { "title": "About", "slug": "about", "pageOrder": 1, "image": { "sys": { "id": "6BwngCuyHKkS28sKIimomM" } }, "copy": "[Twilight Imperium](fantasyflightgames.com) is a monstrous game..." } }
- 74. Our APIs Content Preview API staging Content Delivery API production Content Management API automation Images API assets
- 75. Our APIs Content Delivery API production
- 76. GATSBY-CONFIG.JS require("dotenv").config({ path: `.env`, }) module.exports = { plugins: [{ resolve: `gatsby-source-contentful`, options: { spaceId: process.env.spaceId, accessToken: process.env.accessToken, host: process.env.host }, }, ], }
- 77. Pull in the data
- 78. RENDER THE PAGE { this.props.cfData.map(componentEntry => ( <article id={componentEntry.node.slug} className={`${this.props.article === componentEntry.node.slug ? "active" : ""} ${ this.props.articleTimeout ? "timeout" : "" }`} style={{ display: "none" }} > <h2 className="major">{componentEntry.node.title}</h2> <span className="image main"> <img src={componentEntry.node.image.file.url} alt="" /> </span> <div dangerouslySetInnerHTML={{ __html: componentEntry.node.copy.childMarkdownRemark.html }} /> {close} </article> )); }
- 79. Build the site
- 82. Webhooks
- 84. Static Site HostBrowser Build Server ShySource Control SeanContent Infrastructure
- 85. Static Site HostBrowser Build Server DevelopersSource Control EditorsContent Infrastructure
- 87. Shy Ruparel Developer Evangelist | Contentful @ShyRuparel He/Him Slides: https://noti.st/shy Background Images: wocintechchat.com
- 89. Production Staging QA Preview Approval Draft Editor Workflow DevWorkflow Local Dev Word / Google Docs
- 90. Production Staging QA Preview Approval Draft Editor Workflow DevWorkflow Local Dev Word / Google Docs
- 93. My Editors want A Custom Field Type
- 95. Contentful doesn’t have a built in TI4 game tracker
- 96. So I built one
- 97. Let’s take a look at UI-Extensions
- 99. Let’s dig into The extension
- 100. STANDARD JSON OBJECT FIELD UI EXTENSION
- 101. Inspect in GraphiQL
- 103. CONFIGURE THE EXTENSION { "id": "ti4MatchLog", "name": "Twilight Imperium 4th Edition Match Log", "srcdoc": "./index.html", "fieldTypes": ["Object"] }
- 104. BUILD A FORM <body> <div id="content"> <div class="player"> <div class="cf-form-field inline"> <label>Players</label> <input type="text" value="Player 1 Name" class="cf-form-input inline" id="player1Name"> </div> <div class="cf-form-field inline"> <label>Points</label> <input type="integer" value="1" class="cf-form-input inline" id="player1Score"> </div> <div class="cf-form-field inline"> <label>Factions</label> <select class="cf-form-input" id="player1Faction"> <option value="Arborec" selected>Arborec</option> <option value="Barony">Barony of Letnev</option> </select> </div> </div>
- 105. SET THE DATA $(".cf-form-input").on("input", function() { extension.field.setValue(getGameData()); });
- 106. SET THE DATA function getGameData() { var data = {}; data["Players"] = []; var innerData = {}; var i = 0; for (; i < document.getElementsByClassName("cf-form-input").length; i += 1) { switch (i % 3) { case 0: innerData = {}; innerData["Name"] = document.getElementsByClassName( "cf-form-input")[i].value; break; case 1: innerData["Score"] = document.getElementsByClassName( "cf-form-input")[i].value; break; case 2: innerData["Faction"] = document.getElementsByClassName( "cf-form-input")[i].value; data["Players"].push(innerData); break; } } return (data); }
- 107. Push the code up to Contentful
- 108. Set a custom apparence for the JSON Object
- 109. And that’s it
- 110. RENDER THAT DATA {outerElement.node.games.map(innerElement => ( <React.Fragment> <h4>{innerElement.signTableNumber}</h4> <table> <thead> <tr> <th>Name</th> <th>Faction</th> <th>Score</th> </tr> </thead> <tbody> {innerElement.game.Players.map(playerElement => ( <tr> <td>{playerElement.Name}</td> <td> {playerElement.Faction} </td> <td>{playerElement.Score}</td> </tr> ))} </tbody> </table> </React.Fragment> ))}
- 111. www.ti4.nyc Game Log
- 118. A rich ecosystem is indispensable in the world we live in
- 119. My Editors want Preview
- 122. Our APIs Content Preview API staging Content Delivery API production Content Management API automation Images API assets
- 123. Our APIs Content Preview API staging
- 124. Let’s take a look at Contentful Preview API
- 126. Preview API Key
- 132. Webhooks For Preview
- 133. Create Draft Content
- 136. YOUR EDITORS HAVE TO BE HAPPY (AND SAFE)
- 140. www.ti4.nyc LET’S START WITH THE BACKGROUND IMAGE
- 142. Dealing with Assets
- 143. Our APIs Content Preview API staging Content Delivery API production Content Management API automation Images API assets
- 144. Our APIs Images API assets
- 151. Let’s talk about one of the laws of Software Engineering
- 152. Nobody gets it right the first time
- 153. When you can’t have perfection, the next best thing is change
- 155. Let's talk about the Contentful Migrations
- 156. Our APIs Content Preview API staging Content Delivery API production Content Management API automation Images API assets
- 157. Our APIs Content Management API automation
- 158. MIGRATION CLI CONTENT TYPE OPERATIONS Create a content type01 02 03 04 05 Delete a content type Edit a content type Create/edit/delete fields Change a field ID
- 159. ALL IN JAVASCRIPT module.exports = function runMigration(migration) { const table = migration.editContentType("table"); Table .createField("winner") .name("winner") .type("Symbol") .required(false); return; };
- 160. CALLABLE VIA THE CONTENTFUL CLI
- 162. Let's do something A little more complicated
- 163. TRANSFORMING ENTRIES module.exports = function runMigration(migration) { const table = migration.editContentType("table"); table .createField("winner") .name("winner") .type("Symbol") .required(false); migration.transformEntries({ contentType: 'table', from: ['game'], to: ['winner'], transformEntryForLocale: function(fromFields, currentLocale) { var winner = ""; fromFields.game[currentLocale].Players.forEach(function(player) { if (player['Score'] == 10) { winner = player['Name']; } }); console.log(winner); return { winner: winner }; } }); return; };
- 166. MIGRATION CLI ADVANTAGES Repeatable01 02 03 04 Can be kept in VC Includes sanity checks Perfect for CI
- 167. CMS as Code (automation like a boss)
- 169. That’s Great
- 170. But what if I want to Discard Test or Preview a Migration?
- 174. GATSBY-CONFIG.JS require("dotenv").config({ path: `.env`, }) module.exports = { plugins: [{ resolve: `gatsby-source-contentful`, options: { spaceId: process.env.spaceId, accessToken: process.env.accessToken, host: process.env.host }, }, ], }
- 175. GATSBY-CONFIG.JS WITH ENVIRONMENTS require("dotenv").config({ path: `.env`, }) module.exports = { plugins: [{ resolve: `gatsby-source-contentful`, options: { spaceId: process.env.spaceId, accessToken: process.env.accessToken, host: process.env.host, environments: process.env.environments }, }, ], }
- 176. www.contentful.com COMBINE WITH NETLIFY FOR DEV PREVIEW
- 177. Combine with Netlify for Dev Preview
- 178. COMMON USAGE FOR SPACE ENVIRONMENTS • Local development • Staging / QA • Continuous integration
- 179. Let’s briefly dig into Continuous Integration
- 183. MIGRATIONS + CI PIPELINE Build Create a new environment Test Deploy
- 184. MIGRATIONS + CI PIPELINE Build Create a new environment Migrate new environment Test Deploy
- 185. MIGRATIONS + CI PIPELINE Build Create a new environment Migrate new environment Test Deploy Migrate master environment
- 194. Shy Ruparel Developer Evangelist | Contentful @ShyRuparel He/Him Slides: GitHub.com/shy/talks Background Images: wocintechchat.com