Download as PDF, PPTX
 is a monstrous game..."
}
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-73-2048.jpg)
![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
},
}, ],
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-76-2048.jpg)
![CONFIGURE THE EXTENSION
{
"id": "ti4MatchLog",
"name": "Twilight Imperium 4th Edition Match Log",
"srcdoc": "./index.html",
"fieldTypes": ["Object"]
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-103-2048.jpg)
![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);
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-106-2048.jpg)
![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;
};](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-163-2048.jpg)
![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
},
}, ],
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-174-2048.jpg)
![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
},
}, ],
}](https://image.slidesharecdn.com/thecontentmeshwebcastpresentation-181115213620/75/Rise-of-the-Content-Mesh-Webcast-with-Contentful-and-Gatsby-175-2048.jpg)
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Rise of the Content Mesh: Webcast with Contentful and Gatsby
- 1. Rise of theContent Mesh: Webcast with Contentful and Gatsby Webcast November 15th, 2018
- 2.
- 3. Presenters Linda Watkins Director ofMarketing Gatsby @lindawatkins Shyamal Ruparel, Developer Advocate Contentful @shyruparel Sam Bhagwat Co-founder & Head of Enterprise Gatsby @calcsam
- 4. Developing for theweb is hard
- 5. With millions ofwebsites, developers have to create compelling experiences to engage audiences when new destinations are only a few keystrokes away.
- 6. Digitally native brandssuch as Harry’s, Dollar Shave Club, Bonobos, & Stitchfix are disrupting traditional industries like consumer goods (CPG), clothing, retail, travel...
- 7. The returns tohaving an incredible web presence are rising
- 8. With the riseof e-commerce & social sharing, a website that’s 10% better than the competition might deliver 20% or 50% or 100% more revenue
- 9.
- 10.
- 11. The CMS wasborn to make content sites possible. Now, it’s being reimagined to make them incredible.
- 12. In the early2000s, 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 ContentEditing 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 runningan 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 mostimportant to you in a website framework?
- 16. Three Areas ofRapid Innovation
- 17. Three Areas ofRapid Innovation
- 18. Three Areas ofRapid Innovation
- 19. A modern websiteexperience requires modern tooling
- 20. Source: Google Trends TheRise of Modern Development Frameworks
- 21. CORPORATE WINNERS OFTHE 2018 WEBBY AWARDS bmw.com -- Angular // AD (Conde Nast) -- React // Spotify.me -- Vue
- 22. The Enterprise CMSis 10+ years out of date
- 23. CMS development environment Modern JS Ecosystem Walled-garden development HeadlessCloud 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 ofRapid Innovation
- 25.
- 26. Rise of SmartphoneTraffic Source: StatCounter
- 27.
- 28. Every 100ms oflatency costs 1% of sales
- 29. Performance is difficultto achieve inside traditional website development paradigms
- 30. Website Perf. Modern Tools Content Creator Developer Site Visitor Headless CMS VendorsVendors Content Mesh Frame- works see Journey To The Content Mesh GATSBY MAKES MODERN WEBSITES WITHOUT THE “DIY”
- 31. With Gatsby youcan: ● Performance out of the box ● Bring content from anywhere ● Use modern development tools (React)
- 32. With Gatsby youcan: ● Use modern development tools ● Bring content from anywhere ● Create lightning-fast sites out of the box
- 33.
- 34. Out of thebox 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 perfout 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.
- 37. Flamingo shopflamingo.com Body care forwomen a product by Harry’s
- 38. The Challenge ● Bigproduct 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 tofocus 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 ● 5Xas fast (compared to competitors) ● Mobile optimized ● Out of the box performance ● Successful launch!
- 41. “As an ecommercesite, performance (SEO and conversion) is super important and Gatsby takes care of this for us.” -Johnny Lin, Engineering Manager Harry’s
- 42. “We were ableto 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 Healththat’s about you
- 44. The Challenge ● Slowsite led to 60% bounce rate ● Losing customers ● Poor experience on mobile devices
- 45. The Results ● Increasedlead 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 wentfrom 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 theJAMStack By Shy Ruparel
- 48. Shy Ruparel Developer Evangelist| Contentful @ShyRuparel He/Him
- 49. 3 Let’s talk about ContentManagement
- 50. COMMON CMS PROBLEMS PAGE-CENTRICMODEL MONOLYTHIC SOLUTION SLOW ITERATIONS
- 51.
- 54. Content vs. Look DON'TBREAK SEPARATION OF CONCERNS
- 55.
- 56.
- 57. Html Whenever you putHTML in your content you're breaking portability!
- 58. DISADVANTAGES OF WYSIWYG Too flexible01 Mixescontent and looks02 03 Too easy to mess up 04 HTML is the goal
- 59. You can build yourown CMS, but... COMMON CMS PROBLEMS
- 60. I don't wantto do that!
- 61. I don't wantto do that! I don't have time for that!
- 62. Don’t let aCMS 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 GOODEDITING EXPERIENCE
- 64. Our APIs Content DeliveryAPI Content Preview API staging production Content Management API automation Images API assets
- 65.
- 66. So it’s timefor a small tangent
- 68.
- 70. www.ti4.nyc Let’s dig into theAbout Page
- 71. I define a ContentModel
- 72.
- 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 PreviewAPI staging Content Delivery API production Content Management API automation Images API assets
- 75. Our APIs Content DeliveryAPI 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.
- 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.
- 82.
- 84. Static Site HostBrowserBuild Server ShySource Control SeanContent Infrastructure
- 85. Static Site HostBrowserBuild Server DevelopersSource Control EditorsContent Infrastructure
- 86.
- 87. Shy Ruparel Developer Evangelist| Contentful @ShyRuparel He/Him Slides: https://noti.st/shy Background Images: wocintechchat.com
- 88.
- 89. Production Staging QA Preview Approval Draft EditorWorkflow DevWorkflow Local Dev Word / Google Docs
- 90. Production Staging QA Preview Approval Draft EditorWorkflow DevWorkflow Local Dev Word / Google Docs
- 91.
- 92.
- 93. My Editors want ACustom Field Type
- 95. Contentful doesn’t havea built in TI4 game tracker
- 96. So I builtone
- 97. Let’s take alook at UI-Extensions
- 99. Let’s dig into Theextension
- 100. STANDARD JSON OBJECTFIELD UI EXTENSION
- 101.
- 103. CONFIGURE THE EXTENSION { "id":"ti4MatchLog", "name": "Twilight Imperium 4th Edition Match Log", "srcdoc": "./index.html", "fieldTypes": ["Object"] }
- 104. BUILD A FORM <body> <divid="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 functiongetGameData() { 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 upto Contentful
- 108. Set a custom apparencefor the JSON Object
- 109.
- 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.
- 113.
- 116.
- 118. A rich ecosystem isindispensable in the world we live in
- 119. My Editors wantPreview
- 120.
- 122. Our APIs Content PreviewAPI staging Content Delivery API production Content Management API automation Images API assets
- 123. Our APIs Content PreviewAPI staging
- 124. Let’s take alook at Contentful Preview API
- 125.
- 126.
- 131.
- 132.
- 133.
- 134.
- 136. YOUR EDITORS HAVE TOBE HAPPY (AND SAFE)
- 138.
- 139.
- 140. www.ti4.nyc LET’S START WITH THEBACKGROUND IMAGE
- 142.
- 143. Our APIs Content PreviewAPI staging Content Delivery API production Content Management API automation Images API assets
- 144. Our APIs Images APIassets
- 145.
- 146.
- 147.
- 148.
- 149.
- 151. Let’s talk aboutone of the laws of Software Engineering
- 152. Nobody gets itright the first time
- 153. When you can’thave perfection, the next best thing is change
- 155. Let's talk aboutthe Contentful Migrations
- 156. Our APIs Content PreviewAPI staging Content Delivery API production Content Management API automation Images API assets
- 157. Our APIs Content ManagementAPI automation
- 158. MIGRATION CLI CONTENT TYPEOPERATIONS 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.
- 162. Let's do something Alittle 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; };
- 165.
- 166. MIGRATION CLI ADVANTAGES Repeatable01 02 03 04 Can bekept in VC Includes sanity checks Perfect for CI
- 167. CMS as Code (automationlike a boss)
- 169.
- 170. But what ifI want to Discard Test or Preview a Migration?
- 171.
- 173.
- 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 FORDEV PREVIEW
- 177. Combine with Netlify for DevPreview
- 178. COMMON USAGE FOR SPACEENVIRONMENTS • Local development • Staging / QA • Continuous integration
- 179. Let’s briefly diginto Continuous Integration
- 180.
- 182.
- 183. MIGRATIONS + CI PIPELINE Build Create anew environment Test Deploy
- 184. MIGRATIONS + CI PIPELINE Build Create anew environment Migrate new environment Test Deploy
- 185. MIGRATIONS + CI PIPELINE Build Create anew environment Migrate new environment Test Deploy Migrate master environment
- 189.
- 191.
- 194. Shy Ruparel Developer Evangelist| Contentful @ShyRuparel He/Him Slides: GitHub.com/shy/talks Background Images: wocintechchat.com
- 195.
- 196.