Optimizing Ecommerce with Gatsby [Webinar]

Okay. Welcome everyone. I'm Linda. Watkins I'm director of marketing, at Gatsby, and I'm excited to welcome you to our webinar today, optimizing. Ecommerce with Gatsby we. Have a couple of really exciting speakers. Joining, us and before. We get started just a couple of announcements. Every. All the attendees will be unmute, so, if you have questions. Or comments please use, the Q&A chat. Window. To ask. Your, questions, and, this. Webinar will be recorded and. The. Recording will, be available on our website a little, bit later today we'll. Also tweet, out the recording, link as well in case you missed any of the. Webinar. The. Q&A window will, be available, throughout the webinar so as you have questions please submit them there and we'll, also have time dedicated, at the end of the presentations. For more questions. We. Are doing closed captioning. For this webinar and the link is in the chat window so please. Go there if you, would like to read. The closed captioning, during. This live webinar. And. With. That let, me introduce our. Speakers. Whoops. One. Second. Sorry. About that, I. Lost. My presentation, mode there we go. Okay. All. Right so, first of all I want to introduce Sam, Bhagwat Sam. Is the co-founder, and CEO of, Gatsby, and a core contributor, as well and he. Also authored, the, journey to the content, mesh series, which is on Gatsby's, blog if you'd like to check that out and. That's about the changing, nature of the website, landscape. Brad. Redding co-founder, of Olivar is also joining us and he's. Worked in e-commerce for about 14 years he's. Managed, over, hundred ecommerce sites during his digital agency, career from. Direct-to-consumer startups. To well-known brands, like Moo Chrisette Alex, and Annie Rebecca. Minkoff, and Charbroil, he, specializes, in data analysis, and conversion, optimization. So. We're also joined by Thomas, Slade who, is VP of engineering, at Ella bar and. He has been architecting. Ecommerce site builds, for nine years in a variety of hands-on, and technical, leadership roles he. Has a passion, for quality innovation. And architectural, efficiency. And. He's worked on a variety of Magento, Enterprise, Shopify. And custom, ecommerce builds. So. We're really lucky to have all our speakers here today, one. More. Quick. Reminder, that we have closed captioning. Here's, the link but also the link is in the chat window so just, go to the chat window and click on it there to get the closed captioning, for this event. And. Also. If. You want to follow us on Twitter if you have comments, about the webinar or questions, just. Go to Twitter. And our handle is at gatsby j/s you, can find us there. Great. And with that I'm going to turn. It over to our first presenter. Go. Ahead Sam, I think, I'm just passing you the controls, right now.

Thanks. Linda I'm really. Excited to be here I'm really excited to chat. With everyone. Thanks. For coming and thanks for taking the time out of your morning afternoon, or evening wherever. You may be. So. I'm, gonna be talking, today about, gatsby. For e-commerce and. Creating. A virtuous. Cycle for, your team or agency if. You're a team that's building if. You're a team that's building ecommerce, sites within. A company, or if you're an agency that is. Building, ecommerce, sites for, clients and. We're, going to talk about. We're, gonna dive a little bit into how. The, client thinks about things from, from. Their business, perspective, to. Help to. Help. You. As a team, or an agency. Establish. Yourself, as a strategic, partner to, the to, the business. So. A. Kind. Of caveat. Here when we're talking about e-commerce e-commerce, is, one category that this applies to and, it also applies to. Lead. Generation sites so a trend, that we're seeing is actually also being used for lead generation sites, for. B2c, businesses, in, financial, services education. And healthcare you might think of like a credit card signup, form or an online course, signup. Form where, the goal of similar to e-commerce is to convert visitors. Into, paying. Customers. Or leads for another. Service but, it's measured in terms of conversion, so. One. Way if if chaos is a ladder then, that ecommerce, is a tightrope, ecommerce. Is a tightrope because selling. Things. On the Internet is a really tricky business there. Is constant, competition really from everywhere in the world and. Anyone. There's, a very low barrier to entry which means that anyone can come, in and start competing against, you which. Means a lot. Of the your. Challenge is that your margins. Your. Profit margins approach zero as, your competition increases and your constant challenge as a, business, if you're if you're an e-commerce business, is to. Continue. Making profit, even though even in the face of a lot of competitors. All. Right and so you. Know this is this is if, you're an internal, team or, an. Agency partner, of a business, like this, is how you should think about your your, company. Or your or. Your partner and. To walk a little bit through like how this might work from. A financial perspective. And. This is a sort, of example, of a, profit and loss statement and then an e-commerce business might have or. If it's a. A business. That has many channels for example in my cell in retail any e-commerce this, might be their e-commerce the. Profits, and losses just for selling goods through e-commerce so. They. All, business will, sell a good for will stay here 100 dollars and, they'll be then. A lot of that will go to producing, the good. Manufacturing. Cost labor, cost materials, cost all, that there'll. Be some online probably, discounts. That'll, get applied, there'll. Be some, GNA. Cost which you. Know for those who, some. Of some of folks. May be familiar with refers to may be less familiar this is just general overhead so, running the office keeping, the lights on, running. Payroll of having an HR department all these all these things and. Then there's Casa de civitate customer, acquisition, so. Customer, acquisition, costs, could be like Google AdWords spend on marketing for. Example paid. Acquisition, and, and at the end of the day after. The, business pays all these costs it's, left with a little, bit of profit in this example it's 10 percent ecommerce. Businesses, vary in what the profit is but this is a I would, say reasonably representative example. And, the challenge is that like a 10 percent margin businesses, have a pretty little pretty, little margin business and it's always vulnerable to to, competition, and. So. You. Are here, if you're a team, or an, agency, partner, you're sort of part of the customer.

Acquisition Cost, you. They need a website obviously, to acquire customers and, they need you to build, the website now. That's. The. Tricky thing just in general is that websites. Are again. The cost center of the business there's something there they're spending, and. And in general like businesses trying to reduce costs so often, businesses. Will be spending some amount of money on the website they might want to know how can we spend. Less. Money for. Example along because they want, to increase their their profit. Because that's what they want to do as a business and. And that's actually here where gasps we can help you as, a as, an e-commerce as. An. Ecommerce, agency. Or or team is that gasps we can actually is actually a tool for you to. Make yourself into a, strategic. Partner by, helping by, helping. The business actually generate. Greater, profit, margins and. Turning, yourself into a way that they can make more money rather than the. Business perhaps seeing the. Website team or the agency as a, way that they're spending money and. The solution, and the way that that this works. Is, is margin, expansion. Which. Is just a fancy term of saying. And. Way of saying that for. The same amount of revenue making. More money. So. Again. What does it mean how does that work no let's, tie, this gatsby. Has some unique properties as a technology. That, that, can help with that, can help the. Business with this and that as you, build. Got. Suit properties and as you convert, the. Visit, any. Commerce businesses, properties, over to gatsby will help, expand, their their mark so here. Here are some examples, so Gatsby improves performance, especially. On mobile. Today. 50%, of web. Traffic is on mobile and. A, lot, of visitors will bounce, especially. On their their phone if the, page takes 5 seconds 10 seconds to load typically. Every extra. 100. Milliseconds, adds 1%. To the bounce rate. Second. Gatsby so. What, this does is it increases the conversion, rate the number of. The. Number of visitors who end up getting the whatever. The flow is you know to purchase our product will go up because fewer of them will have bounced along the way.

In. Addition, guess who will get you more organic traffic because, Google will reward organic, search when you have a high-performing website now, this was a change they made recently, to. Their magic, formula and, you, know for reasons, that will man understand, they want to reward sites. That load, quickly and, so you will get more organic, traffic for. This reason. In. At. The end of the day what this means for, for the business is that yes it will get them more money per, visitor guess who will get you more money per visitor, and. And. So, again, let's go back to our sort, of example, you know ecommerce. Business, profit, and loss statement, so. You know again this. Is the same slide we saw before a hundred dollars coming. In from the sale, of the good and then ten dollars of profit at the end of the day and. Actually. With. When you're able to sell, more goods all, the relative. Costs, go down and. So, all this. Is in, this example we see that the profits, going up to sixteen, dollars for, that hundred dollar purchase, price and, and so, margin is going up from 10 percent to 16 percent I'll. Walk through how that works on, the. Assumptions, every model. Has assumptions, the assumptions here are gaining. 10% more, traffic from SEO this is actually a fairly conservative assumption, and. Then increasing, conversion rate ten percent which can, also be a conservative, assumption depending on your current site speed and so generating, ten twenty percent more sales, again. As I mentioned the. Margins will increase from, 10 percent to 60 percent and what that means for the business is that they'll get sixty percent more profit right because previously, ten. Percent now 16 percent that's sixty percent more profit, so. Walking again through how this math works there's, sort of three factors that this will drive first. It's. Often the case that when the businesses, sell more goods it's, cheaper, to produce each. Each good there are economies, of scale in production this there's a there's a little bit of there's. A little so our model is that this happens a little bit the. Good previously, cost $60, per dish now it cost us 59, because we're producing more of them our. General, overhead costs go. Down proportionately, so if we make 20% more sales with the same number of sort, of headcount. In headquarters. Admin. Staff and such then we're then. Decreasing. The relative cost 20%, to. From $10, on, the good to $8, the. Same thing with customer acquisition, costs enough and, marketing spend in general because. We're selling 20%, more goods that means our cost, is relatively reducing.

20%. So from $15. I said, to $12, each of these contributes, to the margin expansion and. There's again there's the total marching expansion of 6% from 10% to 16%, so. You. Know this is what, this does is it turns, as. You. Know as the. Sort. Of executive team the CMO, in. The. In. An e-commerce software, the the GM of that particular division sees, this happening, what this does is it changes the perception. Of your, team, or your agency. From a cost center into a profit center you're actually a strategic. Tool of the businesses, to increase their profit margins and and. And and, when you're doing, projects. There's lots. Of questions to ask, like. To get a sense of well you know because you might be asking now okay so this, is a great sort of toy example, you, know how would I understand. For, my business. Or my clients, business what. Those numbers of people you can you can ask some questions you, can ask them what their profit margins are you can ask them what their customer acquisition costs are you, can ask them. You. Can ask them these these kinds of questions and, then you can you, can model, you. Can you, can ask them and try to estimate the game's performance based, on how, fast gatsby sites typically load versus how that's, their existing sites typically load and then, you can come for it and say look I think if we if, we move our sites over to Gatsby we'll, actually see these business. Impacts. Which. Is a which. This. Kind of narrative. As. Has. You. As a team or any. Working. With e-commerce partners, it turns you into a strategic partner, as. Which. Is a great place to be and it's a we. Start off this by saying it's a virtuous cycle it'll get you more business and like you. May for. Whatever is that, you may want to be. You, building, and GATS you rather than other things maybe cap it like a three it's a lot of fun to build in and maybe you and your team prefer building in gatsby and. This is by. Showing the business, benefits and. To. The, strategic. To, your client. Or your or. Your executive, team you. Become a strategic partner, and are able to build the gaps recites it that you want to build and. Generate, more. More website work for your team or agency as they see you is is key, to driving at margins in, the business. So. That's all thanks. Great. Thank you Sam, now. Before, we, move. On with the next presenters. We have a quick poll for you so. We'd love to know what ecommerce, platform do, you use, so. I, guess. If you use more than one just choose the one that you use the most or today and if. The. E-commerce platform, you use isn't, listed here feel free to put it in the chat window so. We'd, love to know are using big commerce, or Salesforce, Shopify. Magento, or WooCommerce. So. Go ahead and great. I see people, putting in their boats now, again. If the your platform, of choice isn't, listed here you can add it to the to, the chat window. And. Great. We're at about 50% voted we'll get up to maybe. 70%. In, just. A minute and then I'll close the poll and I'll share, the. Results, with you. Great. Just a couple more seconds. All. Right so I'm, going to close the poll now and. Okay. So majority, using, Shopify. And. Then Magento, WooCommerce. Kind of a distant, second, and then self-worth some bit Commerce coming. In at the end so thank you so much for participating in, that poll and, we'll. Have another one a little bit later in. The presentation as, well and. With that I'm going to change. The presenter. Over. To Brad. And Thomas. Great. Thanks Linda, I'll. Uh wait. Till we get our slides. Up here. Awesome. Nice, to have everyone on here as Linda, mentioned my name is Brad I've. Been in e-commerce personally, for far. Too long it seems but thirteen years where Thomas, and I in others we've been through a lot of blood sweat and tears when it comes to, migrations.

And Rebuilds and redesigns and, this this particular case study will be going through today I think is there's, really an amazing one as we've been seeing that the landscape of e-commerce changed, and platforms change and obviously, we have a big Shopify, contingency. Here and Shopify has really been leading that I was, historically. I've been on, Magento, for many years and, most recently spending most of my time at Shopify. So. Quick quick background on, on, lor so, we we, build. Software and solutions for, e-commerce businesses we're a bit of a hybrid where we, focus primarily in data analysis, and on site performance optimization, and you'll see some of that come to fruition through, my, presentation, and ultimately when I hand off at Thomas where he'll go through then. That nuts, and bolts of how we went through and built the gatsby site and ultimately, how we receiving such, amazing, site speed with this try beckon site, the. Site, that would be going through today is is. Drive at Caen as you can see I serve at Caen if you're not aware they're a global, brand there's skincare brand. They. Are both a direct-to-consumer site, which is what we built, and you can also actually find them in and worldwide, through a thousands of thousands, of retail store locations, like, all Tessa for etc, I'll. Be going through three. Parts, today. Before. I hand it off to Thomas who will. Get more into the nuts and bolts of the technical side so, the three parts I'll be going through is going through the challenge that, we faced I'll secondly, be going through the approach to the approach that we took leading. Into the project ultimately, through launch and. That'll be going through marketing, and how, we. Approach the marketing aspect of the build because you can build a site and have it can be the best site in the world fastest, site in the world but if if we make a few mistakes on the marketing side then, that can really cause what. We think and we're celebrating is a great site not. Not end up being the case because we were chasing, our tails and there's organic SEO or, third-party. Marketing tagging etc on, the challenge, so the challenge that that we face going into the project. Stravagant. Was on a 10, plus year old platform on. Magento, one magenta, one enterprise the. The platform the back in itself was was over ten years old there, were four, to five different themes that have been built on top of one another over the years and for. Us were, that the, biggest challenge came in was was, decoupling, the features. And third parties, and various interconnections. That were happening so as. If you've if you experienced, that before I'm sure you can relate when we're, going through the discovery process it. Can be difficult for someone to remember every, single feature every third party or every dependency, that, they ultimately are going to need for for the new site so. That was a pretty, significant, challenge that we were facing. Along. With that the, challenge. That we were seeing and then living in the Magento and and other, and this isn't necessarily just a Magento but, when. Companies. Are used to and we have clients who are used to that aren't technical, they're not technical in nature they. Weren't skilled they're not skilled in HTML or CSS and, if they're being forced to actually update content, update banners, imagery, etc, and they're having a do HTML CSS and, historically. Before we've, seen decom rapidly, change over the last three to five years clicking, that Save button or, that clear cache button, that. Can be scary. Because that can take the site down because, if when you clear cache it ends up a, problem. That was hasn't, surfaced yet that comes comes to fruition and all of a sudden checkouts. Broken, or though there's a very. Funky UX error so, moving. Moving the direction of a new. Innovative. Solution. Where we're looking at Shopify plus Gatsby, plus Brissac there's.

An Education, and and just, helping, the client feel more comfortable about the change where our, ultimate, goal is to remove that stress in that fear of you can up make updates to your site, having to live in fear of, bringing. Down the site or breaking something or impacting. The user experience. The. Second second challenge that we faced was merchandising. Subscribe. Mechanism. And their. Content and commerce initiatives, are are, great they are constantly, rolling. Out new new products, new promos, new initiatives, and giving. Them the, freedom to, build. Their own experience. And not just having to live in a quote unquote category, page or collection page UX but giving them the ability to create. Custom landing pages on a fly where they can quickly, pull in, product. Product. Grids or potentially blog posts, or really. Anything about any custom content that you might be able to pull in we're, seeing that that come to fruition a little bit with the Shogun's and zip ties of the world of, building of having landing page builders again, the merchandising, for us and moving, them down this experiences, this, was a big challenge for us to really. Hit early and how we're gonna architect, the build to, make it easy for the client where anybody can jump in they don't need to know HTML or CSS. The. The. Third challenge so this is I think one that everyone is facing the. World's. Moving mobile I won't, don't, need to go through and repeat the same stats and we probably all heard with Amazon or, a increased, conversion rate or decreased, site speed I actually increase conversion rate by why make. Four for us we look at it more in just the qualitative side of all, of us most of us or 88% of us on a daily basis are using Facebook are using Instagram, or Pinterest or snapchat or any of the others out there so. We, were, being trained to. Get. Used to a very fast experience, so when we are navigating on our phone through Facebook or Instagram the, experience, is fast it's instantaneous, there's no loading there's no waiting we don't need to wait to view. Another post, or view another image and that. Behavior so we feel that behavior, is being trained in us so when we are, prospecting's. Or try Baskin or other or if you're prospecting on different channels we. Want to make that transition into. Your, site as seamless as possible so it's not the, customer is used to navigating, through Facebook, and it's very fast and also on they they go to your site and they're having to wait three four or five six seconds for, different pages to load you'll. See that with high bounce rates so if you look at Facebook. I think campaigns to, a specific, landing page and ABC at 90 percent balance rate I could, be due to site speed so, really.

For Us it's it was honing in on how can we look. At the the growth goals for for our our customers is how can we enable that, process. Of building. The best prospecting, experience as possible on mobile as we're seeing 80 and 90 percent of prospecting. Campaigns, on Facebook they're coming from mobile so, that was a big, challenge for the project for us to to make sure that we got right and. Obviously that that ties into site speed so the fourth challenge that we. Had with the project is for. First, tribe back in and and again our experience. With with Magento for many years is you'd. Have different, apps and extensions that are added on years. Over year over year and, that. Causes site. Speed performance issues it causes outages. Or delays during Black Friday our. Different big promo periods, and I can that can be very frustrating not, only for the for the brand but can also be frustrating for the consumer on the, customers and not wanting to go back if they had a poor experience so. We wanted to be sure that we got site speed right especially, going into the holiday, season and really ensure, that we're treating, that loyal customers, and giving them the best experience as, possible. So. Those challenges, rolled, into one approach, we are going to take so, the approach, that we took which. Is I think, a bit bit unique so, Thomas, and he'll go a little bit more shortly. So, we we actually built a prototype using, magenta one you. Built a Gatsby, I have this magenta one build using, Gatsby is very, bare-bones but, we just wanted to demonstrate this, is this is what's possible in the new world of EECOM this. Is your product data this is your site and it sitting on top of gather Gatsby. Is basically making the experience. Really. That's, changing. An overnight from what if, you were to pull up your live site and looking at the prototype so we wanted, to show, them what is possible, in terms of site speed with the catalog and then we're able to move into some ROI benchmarking, of looking, at some of the KPIs. Like revenue per visitor change or mobile conversion rate change or repeat purchasers change their the.

Obviously. The big KPI for any business is revenue. And we're. Looking at or what are some of the KPIs underneath that that big bucket of revenue what. Can we really have the most control over. And, these three or big ones and the repeat purchaser, this, goes back to what Sam was speaking about with with CPA CPA a cost per acquisition is, we. We want to make that first experience for a new customer or prospect prospecting. Campaign if. We can get them through once then and. They had a great experience and, they've they've seen they've been able to compare it's an innovative site it's a lot faster than maybe competitors, the. Likelihood of them coming back we feel is going to be much greater than if they had a poor or slower Genki experience in that first time so, this is more of a long I would say a long tail KPI they're looking at for the project. And. Then finally the there the second approach is looking. At our the data-driven UX, or design so most. Companies are doing this through taking data from Google Analytics or, hot char a be test or in our case our our own on product, Ella var and using. That to help drive some initial data data-driven the UX decisions. Or ideas but, I would say the most important thing and thing, that I I'm proud, of our team for doing is our engineering, team Thomas he was he was leading the design conversations, because the going. With a prism ik and the gatsby builder this headless CMS build you're, not you don't have to live in the box that we're all used to so as designers, or marketers we, may think like oh we can't design this because we have to live in this box but with, the engineering team having, the freedom and flexibility, to really build anything the, idea is that they're going to come up with and what they did come up with are things that we would never I would never think of and our design team wouldn't think of so, good having them involved in that process I think was key for us because they're. Just they're gonna be able to stretch your imagination piece. Together the architecture, during design before. Even designs handed off and that, I think, has really led to a great experience and a great end product. So. The marketing, side so we went through a challenge once, if the approach that we took for the challenge and then the marketing before, we hand it off to Thomas so. Again as any site launch if you don't get marketing right then, it's going to be an uphill battle it. Could be the fastest site ever but, you, might be chasing your tail because something didn't go right in the marketing side, so.

A Couple points to make here in the marketing dependencies and how we handled it so we plan to early in the project so this is a shout five-plus gatsby, Prisma killed up, so it's not a normal project where a third party, install an app and then their JavaScript is implemented. And it's there and available for use so. Is educating, those third parties very, early in the process. The. Second thing is is moving as much as we can to Google. Tag manager so, we built a very robust data layer and we have the route changes there, gatsby route changes to control different page views but. Really shifting all of that third-party, tracking to, do. Google tag manager for. A few reasons one because, we're able to control more the event based tracking which even Google Analytics is going to with a new event their. New event property, based tracking but, also we're able to then time events, so is, it the Zendesk, live chat which I'd mention my, articles that, doesn't necessarily need to load at first all page load that can load two to three seconds after after. The page is also loaded for the user so, we wanted to actually move this a GTM control, the order of the tagging ultimately help our site speed performance scores at, every single third party that the Thomason team implemented we were doing a before and after here. Is the lights Lighthouse score speed, before here is it after the, things that we can do to either move the integration, to be an API based integration, with a third party or, can we started moving that timing back for the for the tag that fires in GCM so, then we can try to get reward a little bit from Google with that score then. The last thing is in, the marketing side is the on-site SEO and launch planning against, the various is, a new very, new site for, for us and and every one of the headless, build we've. Seen we've seen with other clients enter Atlas bills we've seen the organic. We're. Getting lift after, they launched and but really it's planning, out that on-site SEO so all the technical SEO the structured data not. Not just a 3-1 directs but planning all that in advance so we have that in place before, we get to that 30-day pre-launch, period so. We're not we're not chasing our tail again either pre launch or post launch and having. To scramble, and make sure that we have proper, structured data the proper metadata Open. Graph tags etc so. That's the challenge approach, and. The the marketing aspect of the build I think, all this, I'll hand it off the Thomas it'll go through more in the stack and how he built it, Thomas. Take, it away. Thank. You Brad and thanks. Everyone for for, joining today. I kind of wanted to start, a little bit by giving you some background on, on, me and kind, of the head that I've I've been in for I don't. Know eight years or so but um come. From a agency. That builds a lot of Magento sites so I'm always I'm. Used, to being an environment, where you're. Thinking about how to cash you're thinking about servers, you're getting. Called late at night the, site's low you can it seems like an uphill battle any time you want to change anything the. Front end is completely coupled, with the back end, so, I kind of am used to living an environment like that and for. The past couple years I've just been thinking, more and more like how can we make ecommerce, a static. Activity, and. So that kind of leads into the dream of this project, where we. Basically wanted, to take, transactional. User, actions, and Static user actions and try to separate those apart just. Because typically. People, think that, you need a server to facilitate, any action on an e-commerce site, but it doesn't. Really need to happen that way and of I think we've proved it with this project, another. Thing too is just getting rid of the servers we're tired, of having managed hosting or, managing it ourselves and just, having to keep up with security and, not. Being able to deploy code in, a, distributed, way everything, would have to be architected. That way to be able to to be sent out that way so. I wanted to go through some of the examples of kind. Of static econ user. Actions, so. I think browsing, the catalogs the really obvious one. Users. Don't need to go to a server to see products. Another. Example, that I, think is, pretty. Static is adding to cart if there's. Really complex. There's. If there's really complex pricing, logic or anything like that that can actually be, that. Can be static we can put that as part, of the client if we need to another. Thing is adding to wish lists like why why, do we need servers and controllers. And everything else to handle these these. Different things, another. One that we were able to do is search most people would think no, way you can ever do search as a static, kind.

Of Thing but we were able to and and, filtering, products is another one to see you know layered navigation, where someone's filtering by size or color, something. Like that it, you could make that static, then, we're talking a pretty near native experience. For the for the end-user and. I. Want to go through some of the, transactional. User actions, and and kind of how I think about those so. Logging. Into an account so if a user needs to look at their order status you know we need a server we need something. That can basically send, back that users details something, that's secure. Another. One is purchasing, a product obviously, we, can't do that all on the client and. There, might be discount, codes and things like that so, you know coupon code. Another. Won't be signing up for a newsletter so if someone comes to the site and they want to sign. Up for your newsletter we need we need somewhere to capture that data store, it. So. That's kind of the headspace that I was in going into this project and, now I'm going to kind of dive into a little bit of the goals that we had the technical goals for the project. The, first obviously, Brad's, already talked about this one but speed and performance that's. A huge one another, one that kind of goes overlooked. Most, of the time. Sometimes. Not necessarily by the engineering team but just as a is a, problem, that happens from a platform that's really old its developer experience, I mean, the, amount. Of time that it takes the developer to get ramped up on a project, and contributing. If you can shorten that it, makes everything much cheaper much like Sam was talking about earlier. We. Wanted, the ability to have you, know all the niceties of, a modern developer experience, so hot reloading, we. Want to data access to be really easy and the, ability for any developer to get up and running really quick. Along. With developer experience comes type, safety so we wanted, to use typescript just, so that any. We. Could do error checking during our deployments, and builds as part of our CI CV, we. Also wanted, to have static payloads, that kind of goes back to getting rid of the servers. And. And, data layer access, so you. Know I don't I don't want to think about you, know complex queries I don't want to think about left joins I just want to I want people to be able to get the data they need and put it into components, and. Make that process as seamless as possible and then. Another, aspect too is is making, sure the content model for the client, is intuitive. So, coming. From Magento, you, know you have these kind, of like static blocks and they can reference other blocks and you. Know after five years the site just becomes spaghetti and no one knows why how, and they. Get scared to delete anything so it just becomes kind of a nightmare so we wanted to make it so that things. Were really intuitive for the client so. After coming up with these technical goals we, came up with kind of like an idealized, stack that we wanted to use and, this. Was, after I had done the prototype, that Brad mentioned, before, so, all. Of our products are hosted on Google cloud so we wanted to use use Google cloud we. Wanted to use gatsby to basically generate that payload for us and. We. Wanted to use storybook, so, the developer, would just be interacting, with gatsby in storybook and.

Have. Prisma, Kaleo. Source. For, gatsby, to be able to get the content that's, needed and the. Last aspect here is uh having, Shopify. So. Check. Out an account management if we're thinking back to kind of static, versus. Transactional. We basically wanted to offload. Everything we could to Shopify. Where, possible so I'm gonna I'm gonna go into each one of these and kind of give the reasons why we, did idealize, this stack, so. The first Gatsby. The, developer, experiences, is amazing, and the speed is awesome. So you get server-side. Rendering at build time you, know you get react hydration, so that's a very a very, familiar. Place for most, front-end developers to be you. Get image optimization you know the WebP II support you get the lazy. Loading, the, content, mash the thing the content mesh if you haven't read Sam's article, on the content mesh it's it's pretty mind-blowing once you get in there and see. The power and that just having consistency, for, how things can be queried it's it's very very powerful. Also, link pre loading so that's kind of that near native speed. Gain, as well where things. Are loaded in the background, and a, user doesn't have to load, the header, 500. Times if they go to 500 pages you know just trying to basically minimize the amount that the the, user needs to get and. Also. Gatsby's, plug-in ecosystem it's it's. It's pretty popular it's got a lot of a lot of good plugins and a lot of source, and transformer, plugins as well and. Just the community I mean going. Onto github and seeing the amount of contributions, and just the how big the community is it Gatsby, it's it's, pretty amazing just to see how far that, they've come, and. So Shopify, is the next piece of the puzzle so, they have a storefront, API, that, allows for, querying and. And. Mutating. Where, needed so that you, can basically perform all the transactions, that. Need to be done for the site they. Also have a pretty pretty, vast plug-in, ecosystem and it's um, it. Wouldn't not all of them would work for our use case and we kind of went, into it knowing that just because a lot of them are our theme, based plugins but there's. Still a lot that just, interacts with the backend that a client and an econ manager, would would look at and really want to have for their site, and. The last part you know security again so just being able to offload that and not have to be able to not. Have to worry about it and be able to sleep comfortable, at night. So. One of the one of the next parts is story book so, story books basically a UI framework, for displaying UI components. It. Allows, it's. It's designer friendly, it allows you to see components, and in various, states, and. It also allows, for you, to approach, your project plan a lot a lot differently than a typical, project. So you can actually componentize.

Your Project, plan and i'm going to go into, that in a little bit more, detail in the next few slides but it's, a pretty powerful idea, and it. Also decouples. Your component, data from, your fetching which i think is very nice so that your, developers, aren't worried about, basically. Where the data come from they're, not worried about. How. To power component. While they're designing it so having, that having. Your mind share dedicated. To a component and the, state is, is. Really nice and not having to consider how, does this data get from point A to point B if you can separate yourself from that it allows. You to develop in a lot cleaner manner. Then. Also they have add-on so there's, there's a lot of things like viewports, and knobs and things like that that makes storybook, a really a powerful, way. To show different, components, and how you can interact with them and, then. Kind. Of one. Of the final parts is prison ik so prism, ik is basically a headless API content. Management, system and. They. They, have a pretty intuitive, content modeling so it's just basically like an admin you, just kind of log in and you can define you, can define blocks and you can reuse them and basically. They're exposed, via API and, there's a source plugin for it so you can query them in gatsby they also have releases, they have web hooks so they have all the things that developers, want to have and they, also have a beta, integration. With Shopify so that your catalog basically, shows in the admin of. Prisma. So that you can associate. Things. To products, which is which is pretty nice and then. With Google Cloud no. Matter what you know there there might be a situation, where you need to. Have, basically. An endpoint or something for maybe you have a like a secret key and you can't you. Can't put that in the client so you need a place to be able to hide that well that's. Kind of pushed, us towards firebase, so, firebase, hosting basically. It's. It's pretty simple, but they have a they, have functions. Basically cloud functions, that integrate with them so you can have your, site. Calling. Endpoints, that map to functions, so, that all your back-end processes. Can. Basically live in functions, and you don't have to worry about managing a server you don't have to worry about scaling it's. A pretty simple way to handle. Things they. Also have cloud build so it's it's similar a circle, CI but, um it has an integration we'd get up as well but I'll show, a little bit more of that once we get into the how. We deployed, and. So. Now I'm going to get into the project plan so I think this goes back to the, storybook, slide where a. Lot. Of today's talk is is focused. On, approaching. Projects, a little bit differently than, page-by-page. So. You. Can see from the different stages below, that you know we started with design and then, we went into story butkin storybook probably. Took, the most of the project, it's, probably 50%, of the project, just because we're. Just basically, creating, components, creating state we're just basically we're making the whole website but we're doing in a way where we can separate, data from that process. Then. We move into prism ik and then Gatsby and then the integrations, and deployment. So. For story book I'm, going to get a little bit into how we approach. Approach. The project plan and kind of broke things down in story books so what we would do is we'd start out with the design so here example. Over the actual design and what actually, became components, so. You can see on the left the, mock-up and we, basically, me. And shout out to Jo Alden so, him and I would go through and, take. The designs and basically break them down meticulously. And go through mobile and desktop and, we, would break them down and come up with little reusable, pieces that we could from a design and then, so, in this example you can see the last, component, down here the before and after we, would take that and, actually. Start, breaking it down and say okay well what kind of props are driving this component, what kind of states driving, this component, and we would come up with ways to come. Up with props. And, and. Type, every. Component, before. We had any data coming from an external system. So. You can see here the props that are that. I've outlined for each one of the component.

Pieces. So. That kind of leads into the storybook, aspect, of it so you can see on the top left, there's. The before and after props which is just an array of slides and then the actual before, and after slide you, can see that again it has that label the title text, the disclaimer that are optional and then, we kind of have our component, definition, below and then, the, code on the right is basically. What it looks like in storybooks so, the. Slides function, is just to show that you. Know in storybook we're just generating, a bunch of mock data and then, we. Actually use. That as the prop for, the before and after side as you can see when the story's actually. Added and. Below. You can see what that looks like in in storybook so, you. Can see that, the, components, there and also the, there's the nobs feature with, that. Shows basically, the different props that are driving, that so let me get into where. That comes from and that is basically, via the add-ons with storybook so we, used a bunch of different add-ons, but the ones I'm gonna touch on are basically. Viewports. And knobs. And. We. Also had actions as well I feel like knobs and actions kind of go hand in hand but. I will. Show examples of how those work so viewports. Is the first one it allows, you to view, your components, in different viewports. So that the client we don't have to think about. Emulating. A device or anything like that and. Again it's not it doesn't do like full emulation. But it at least just shows things in different and different break points for us it makes a little bit easier to navigate, components. The. Next one is the knobs and actions and as. You can see below I'm, changing, text at the at the bottom here, and you can see that the text changes above are, represented. And. Basically. It allows them to just toggle state toggle data so if the client wanted to come in here and go is this kind of overflow if I had too much text, things like that they could use those knobs to kind of toggle toggle, different, things there. So. That moves on to the next stage which was basically the content modeling in prison ik and I, was. Kind of explaining a little bit before but Prisma cos is like, an admin for defining, what they call types and it, allows you to basically just make up fields, and they, could be rich text, they can be images, and you can just basically drag, and drop them to make, whatever. However, you want to model your content and it. Also has the integration, with Shopify as well so here's an example of the product, product. Type you can see it's just fields there's nothing filled out because this is just a type. And. So, you. Might be asking stuff well how did how did you go about defining your types you, know because you already went through the story but processing it, you, know you you've, already you've already kind of done most of the work there and that's that's exactly the point that's why we separated our data from. From, the implementation, just because we. Were able to take on our left here you can see the ingredient, type. Ingredient. Props and you can see how, we essentially, map those directly, into prism Akande can define each one of each one of them them, here so, I think that's the that's the point of going through this exercise is, that if. You can separate your data from, your components, and develop. Them in isolation it. Makes the integration, with whatever CMS, you want to use if it's prism it contentful. WordPress. Whatever, it is whatever that external system, is it makes it very simple to, to.

Basically. Define what you need. So. Stage 4 was gatsby, and with, gatsby you, know probably the most complex thing about our project is is the build time, so. There's things you have to consider here like the content, mesh. Routing. There's. Validation, as well prison. Offer validation, out of the box so that that can be pretty troublesome. So. Here's an example of our content mesh as you. Can see this is like the home page and the, carousel at the tops coming from Prisma. Course. Plugin we have is yacht PO which is basically a review system, so their API is feeding in the read the reviews, that, you can see with the Stars and then. Shopify. Is actually. Mapped to the products, that are displaying on the site. So. With routing things that need to be considered like what what. Documents. Or what documents. Imprisonment, heed to actually have pages so if you have a product that obviously needs a page because somebody needs to be able to view a product but maybe, the footer doesn't, need a page. Right just because it's it's just a design element that's there but, it doesn't necessarily need a route. So. You, know I mentioned before that prism it doesn't have validation, but there's also you, know there's other things that you need to consider that might not be too, obvious like, what if what. If your product, in. In, prism, ik doesn't have an Associated, Shopify, product there's situations like that where a client could, potentially, publish something so it's developers. Just need to kind of consider those things and and build in some some. Failsafe ways to to. Handle them so. Those are kind of the things that we had to think about for before the build time and that kind of takes us to to run time so. Run time I think was was. In our favor because. The. Clients, catalog was relatively. Small probably. 200 products so. It did make it, did. Make things a lot simpler from from that standpoint but, there's other things we had to consider if we're thinking back again. To static, versus, dynamic we. Had sessions, so we we. Need to be able to manage cart state wish list the, person's logged in or not know. If what products have they recently viewed and then, um you, know obviously that's those. Those sessions are going through global context. And. Just. Wrapping. Wrapping all the components, that are you know if you like a layout file and gatsby and then. Um you, know the other thing is just wiring, the components with real data so, a. Lot of is just use data query which is a nice hook that gatsby offers so that you can you can query things and components, relatively. Easily. So. If i break down the sessions. In global context, a little bit we. The. Layout like i like i mentioned contains a lot of context, so we have, context.

For You know like the wish list we have context for the cart and a, lot of those contexts, that are user specific, or synced via local storage and, just. Let you know - for, this product we used react. 16.8. We. Might actually be higher on a higher version now because we kept our dependencies, up to date using. Renovate, bot but, we didn't use Redux, or anything like that we just used the reducer, hook, that that. I react provides. And. I. Mentioned, before that the clients, catalog, is relatively small so this allowed us to really do something that is. Probably. Not conventional, and and not appropriate for every client but for us it was it's just that our client since they only had such such a small catalog, we were able to store the products in global context, so, basically. On any page anytime. We needed like basic, product details we could use that this. This, allowed. For us to render products, and a list or grid without having to think about querying which is really really nice and it. Also just made our searching. You, know searching and filtering like much simpler because, we kind of had we. Had the details, of every single product that we needed and. Kind of here's an example of what those details, look like you can see there's not much data here it's just it's, mostly. Basic, data. And. I wanted to show everyone, kind of like a component. Example, so, this is what generally, what most of our components. Look like it, starts with data fetching as you can see to. The right there's our footer query. Obviously, this is all reduced just to show it in one slide and then. We kind of have our translation, layer and then, we. Have our component. With data, so. These components, are really just like wrappers for your real components, it's, just the difference the difference between the components, and storybook and these components is that storybooks, giving the mock data we're giving them real data and translating, them. So. Then that leads into the integration with Shopify, so. A lot of people are probably wondering well how do you how do you integrate with with Shopify and basically. Like I was saying before we just wanted to offload all the transactional, aspects, to Shopify, so checkout. Was done via the API. Logging. In and out an account management we're actually using the storefront so a user actually going off-site, to, actually, log, in and do things like that so here's an example of like a checkout mutation, with Shopify so. When someone wants, to check out we. Essentially send this mutation over and then, what, comes back is a URL that's, like a unique checkout URL for that user and then the users redirected, there to finish, the checkout and.

Then. For account management you know again like I mentioned it's a subdomain of our current store and we, just redirect users just go to Shopify, when they want to law and you account information and, look, at their orders things like that and the, only downside to this is it requires. It. Requires some theming and also, it it. Allows, you to not be, able to use some third parties, but we had specific, requirements, where third parties were, managing. Account pages, so this forced, us kind of into, this approach. So. That's. Kind of it from the development, side of things and I wanted to give, you a glimpse into the, deployments. That we that. We did for for, the environment, as well so to our right, you. Can see github. Basically. There's. Some conveniences, there so we have environments, per pull request we, have environments, per merge and, you. Know I would mention earlier, renovate pop but every time we renovate bot runs. A dependency update we automatically, get those as separate. Environments, as well and, all. Of those go through Google cloud functions, and, those. Functions. Serve. Two purposes some. Of them are functions, for. For. Things like like, for instance our client. Cells recurring. Products so, there's, an API call and he's happen in their secrets that need to happen a secrets, that that, need to be secret. So, what. We've done there is basically split the check out and we, manage that secret in a function, and the, user hits it like an HTTP, endpoint and then they're redirected, from there but, the functions also serve purposes, like running lighthouse for us every day or triggering. Builds, when github, notifies, the function that it wants to build, we. Also have web, hooks you can see to the left that are coming from Shopify, and Prisma Kuenn updates are happening and then. Cloud, build. Down. Is the is what, what the functions are firing and those essentially, triggered, gatsby builds which come out website, payloads, those, payloads, are then synced to firebase, which is our hosting and. That's. Kind, of it, it, looks a little intimidating I feel like from this diagram but it's it's not too bad and. So anyways we launched, the site and Felicity. The CDOs try backing you know she had to say this. This, about the launch him is very very smooth it, felt, really, nice to come from the magento world and just see how simple it is and, so just some results on the site you know it's it's really really fast, we, we deploy like 20 or 30 times a day so we always have deployments, going, on our.

Builds, If they fail from, like type-checking or something like that they never get deployed so we have a kind of a some, nice checks. That happen that prevent, bad, code from getting shipped and. Again launch was simple and you. Know some marketing things of things as well as that organic, search I know Sam mentioned it is but our organic, search went up 30 percent and. Yeah. We're just monitoring the conversion, rate and. Gonna. See see where that takes us and I know Linda, wanted me to share as well like. A side-by-side so, this is like a side-by-side of, of, their, Magento, site with Gatsby's on the Left magentas on the right just. So you can see like you. Can see the, server. Like. Probably. Burning through Ram trying, to get a page to basically. Load, you. Know they were paying around 2000, per month I mean I know their database server was like 128. Gigs of ram it's. Just crazy to think the amount of the. Amount of energy getting wasted, when. It when it doesn't need to be but anyways. On the left you can see gatsby it's snappy. And and. Really fast so just wanted. To show that and I think, Linda. Can take back over and we can get to Q&A. Great. Thanks. Both Brad, and Thomas really appreciate that and. As. A quick reminder if, you. Haven't. Started building a, ghastly sight yet you can get started at Gatsby genius calm or, if you already have a Gatsby, sight you want to use Gatsby, preview, which is a, way, to see real-time. Updates. To. Your site before it goes live on you, can also get started on Gatsby chants calm, so. We've had a couple questions coming through we have time for just, a few, and. So go ahead and keep submitting your questions, there but a, couple, questions were around, Shopify. And any challenges that you faced using. Shopify. Thomas. I can I can jump in from the marketing. Side I honestly. I don't really think there were too many challenges, that we encountered, from the transition. Product. Management it was pretty straightforward we, were able to mirror products and prism ik checkout. Checkout API in terms of the QA and testing process, worked great we have recharged or using the recharge checkout API as well as Thomas mentioned for the recurring payments, so. From the marketing. Side no, no, major red flags came up other than the. Occasional third-party, that would have their global JavaScript, that they want to implement that, we.

Would We would either route them to towards, an API based integration, or through Google tag manager Thomas. I don't know if there are any other technical, challenges, that that, you faced yeah. I mean it really just it, kind of goes project, by project but. Shopify's. Apps, use. A proxy, through. Their theme so. It, really does kind of limit you if you're not using their theme but. For us we knew that we knew how if the apps worked so we, went into it expecting, those, challenges, and we worked around them when, we could. Great. Do. You run any a/b, testing. Yes. Right, now we currently are not but, we have, dynamic yield, which. Is the the, tool, that we'll be using for personalization. And, they'd be testing. A generally. Post post-launch, we like the way at least 30 days just for any any site but wait 30 days just to let everything, settle in and then start implementing. Test ideas there so, yes with we don't have any running now but we will be probably within the next 30 days. Great. And then. How. Long are, your build times or how many pages are statically, generated. I. Want. To say around. 300. Our, build times are around seven. To nine minutes. Okay. Great, and then. What was the timeline for the project. We, kicked, off. Design. Roughly. About March first and. Design. Took about. Two. Two and a half months, we, were getting started a little in the background on the on the shelf I and data migration, side and we launched on July 24th. Okay. Great. A few. More questions on Shopify, and then we'll probably need to wrap, it up one is around. Is. The client, able to edit Shopify. Sections. No. Our. Yeah. I'm just gonna say our RCR Prisma. Is driving, the content, purely driving the content there's there's. No content, coming from Shopify, Shopify's, only, there to, control, inventory pricing. And. The. Transactional. Things. That I touched on. Okay. Great well, unfortunately we're out of time so just another big thank you to Sam, Brad, and Thomas, for joining us today, like. I mentioned before the. Recording, of the webinar will, be up on our website at, gasps PJs, calm a little bit later today so. If you missed any of this webinar. You can catch it there and again. Thank you so much for all the speakers for joining us.

2019-11-28 03:28

Other news