Next.js Conf - Stage D

[Music] uh [Music] [Applause] [Music] me [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] so [Music] [Music] [Music] [Applause] [Music] [Music] [Music] [Applause] [Music] [Music] [Applause] so [Music] [Music] do next [Music] next [Music] [Music] so [Music] x [Music] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] hi everyone i'm delba and i work as a developer advocate adversal if you are new to react in xjs you may have wondered how you can get started learning these tools so in this session we're going to discuss some basic react and xjs concepts by building a simple example step by step we're going to show you how we can go from javascript to react to next.js and along the way we'll also be covering how we traditionally use javascript to build interactive websites and how react makes this process easier the essential javascript skills we need for react and the react and xgs concepts we should learn first to help us get started but before we jump in let's clarify what react and xjs are react is a javascript library that makes it easier to build user interfaces by user interface we mean the elements that our users see and interact with on the screen react was released in 2013 by facebook and over the years it has become the most popular library for front-end development next.js is a react framework that helps us viewed production-ready applications by production ready we mean applications that are beautiful real world use and traffic next is also referred to as a framework because it builds on top of react and provides the essential configuration and boilerplate for building react applications to fully appreciate how react and xjs work it will be helpful for us to have a basic understanding of how browsers interpret our code to create the user interfaces that we interact with when a user visits a web page the server returns a html file to the browser that could look like this the browser reads the html and constructs the dom or document object model the dom is a representation of the elements of the page and has a tree-like structure with parent and child relationships the dom acts as a bridge between our code and the user interface the dom is what allows us to use programming languages to manipulate the elements on our page we can use javascript and dom api methods to select update add and delete elements in our user interface let's see how we can do this here in our example we have a plain html file with an empty development let's add a h1 title inside the div element using javascript and the dom let's give the div a unique id so that we can reference it later and we can add javascript inside a html file by using the script tag and now we can use a dom method inside the script tag to grab the div element by its id then we can create a new h1 element using another method create element and create a new text node for the content right now our text node is floating around in space so we need to attach it to the h1 element and finally let's also attach the header element and its content to the development if we look at the dom elements inside our browser developer tools the dom of this page is now different from the original html file this is because the html represents the initial page content whereas the dom represents the updated page content which we just changed with javascript manipulating the dom with playing javascript is very powerful but definitely a bit of both we've written all this code just to add a h1 element with some text as the size of our team grows and our apps do too it can become increasingly challenging to build applications by manipulating the dom this way we spend a lot of time telling a computer how it should do things but wouldn't it be nicer to simply describe what we want and let the computer figure out how to do it and this is what the clarity libraries like react aim to do we declare what we want to show a h1 element with some text and react will figure out the steps of how to update the dom for us so let's add react to our project we're going to load two react scripts from an external website called unpackage.com instead of manipulating the dom ourselves we're playing javascript we can use the reactdom.render method to tell react to render our h1 title inside our app element if we try running this code in the browser we will get a syntax error now this is because the code is not valid javascript this block of code is actually jsx or javascript extension jsx allows us to describe our ui in a familiar html like syntax but browsers don't understand jsx out of the box so we need a compiler like babel to transform our jsx code into regular javascript let's add babel to our project and we also need to inform babel what code to transform by changing the script type to text jsx so we've just achieved the same thing but with react i hope you can start to see that by using react we can cut a lot of the repetitive code and this is exactly what react does it's a library that contains reusable snippets of code that can perform tasks on our behalf and in this case it's updating the dom there are three core concepts of react that you will need to be familiar with to start building react applications these are components props and state let's start with components user interfaces can be broken down into smaller building blocks called components components essentially allows us to build self-contained reusable snippets of code if you think of components as lego bricks we can take these bricks and combine them together to form larger structures if we need to update a piece of the ui we can update the specific component of brick and this modularity allows our code to be more maintainable as it grows because we can then easily add update and delete components without touching the rest of our user interface now the nice thing about components is that they are just javascript let's see how we can write a react component from a javascript perspective in react components are functions a component is essentially a function that returns ui elements so inside the return statement we can write jsx to render this component to the dom we can pass it in as the first argument in the react render method but wait a second to get this to work there are two things we have to do first react components should be capitalized to distinguish them from playing html in javascript second we use these real components the same way we will use regular html elements our applications usually include more content than a single header and we can keep nesting real components inside each other just like we would regular html elements we're going to create a new component called home page and then we place the header component inside the new homepage component we can keep nesting react components this way to form component trees this modular format allows us to reuse components in different places inside our application in our example since homepage is now our top level component we pass it to the react dom render method and then so far if we were to reuse our header component it would display the same content both times but what if we want to pass different texts or we don't know the information ahead of time because we're fetching data from an external source regular html elements have attributes that you can use to pass pieces of information that change the behavior of those elements for example changing the source attribute of an image element changes the image that is shown changing the href attribute of an anchor tag changes the destination link in the same fashion we can pass pieces of information as properties to our react components and these are called props we can design components that accept custom props that change their behavior and we can pass down these props from parent components to child components here in our homepage component we can pass a custom prop to header just like we would pass html attributes and the chow component can accept those props as the first function parameter if we console.log props we can see that it's an object with a title property now since props is an object we can use object d structuring to explicitly name the values of the props inside our function parameters let's replace the content of the h1 tag with our title variable oh no it's printing the actual word title that's because react thinks we're intending to render a plain text string to the dom and we need a way to denote to react that this is actually a javascript variable so to actually use the variable we just defined we can use curly braces a special jsx syntax that allows us to write regular javascript directly inside our jsx markup we can think of curly braces as a way to enter javascript land while we are in jsxland and we can add any javascript expression that is something that evaluates to a single value inside our curly braces for example as we just discussed an object property with dot notation a template literal the returned value of the function in ternary operators we can now pass any string to our title property and since we accounted for the default case in our component with the ternary operator we could even not pass a title prop at all our component now accepts a generic title prop and we can reuse it across different parts of our application all we need to do is change the title our conference website is coming along nicely but a conference website wouldn't be very interesting without any speakers so let's add a few it's very common for us to have a collection of data that we need to show as a list and a great tool for the job is the array.map method then we can use a narrow function to map a speaker to a list now notice how we're using curly braces to weave in and out of javascript in jsxland when we run this code react will give us a warning about a missing key prop this is because react needs something to uniquely identify the items in an array so we knows which elements to update in the dom we can use our speakers names for now since they are currently unique but it's best practice to use something that is guaranteed to be unique like an id stephen lee and steph whoa this is one exciting lineup is there any way we can show our excitement maybe with a like button let's explore how react helps us manage interactivity with state and event hunters as an example let's create a like button for our conference website to make the button actually do something when clicked we can make use of the on click event in react event names are commerced and the on click event is one of the many possible events we can use to respond to user interaction for example we can use on change for input fields or on submit for forms we can define a function to handle the click event whenever it's triggered and then we can call the handle click function when the onclick event is triggered react has a set of functions called hooks hooks allows us to add additional logic such as state to our components we can think of state as any information in our ui that changes over time usually triggered by user interaction for our example we can use state to store and increment the number of times a user has clicked our like button in fact that's what the react hook to manage state is called use date ustade returns an array and we can access and use those array values in our component using array destructuring the first item in the array is the state value which we can name anything let's name ours something descriptive the second item in the array is a function to update the state value we can name the appdata function anything but it's common to prefix it with set followed by the name of the state variable we're updating we can also take the opportunity to add the initial value of our state zero and we can check the initial state is working by using the state variable finally we can glue our state up data function to the onclick event handler we previously defined clicking our like button will now call our handle click function which calls our set like statup data function with a single argument of the current number of likes plus one to summarize i hope that you can see that react is just javascript if you want to get started with react these are the javascript essentials it would help to get familiar with functions and narrow functions useful for components and event handlers objects arrays and array methods useful for props state and rendering lists this structuring and the spread operator template literals ternary operators and es modules with import and export syntax we've also talked about three essential react concepts components props and state having a strong foundation in these will help you get started building react applications once you do feel more confident then also check out these other react features other react hooks such as use effect how to make your own custom hook context the virtual dom and how react handles re-rendering you can gradually adopt react by using what you've learned so far to add small components to existing websites however many developers have found that the user and developer experience react enables valuable enough to just dive right in and write their whole front-end project in react while react excels are building ui it does take some work to independently view that ui into a fully functioning scalable application the good news is that nexus handles much of the setup and configuration for us and has all the features needed to scale our project to bigger teams and millions of users in the next section we will transition from react to next.js and discuss some nextgs call concepts to help you get started building applications [Music] we previously explored how to get started with react now we will discuss how we can get started with nexjs in this section we will cover how we can go from a react application to next gs pages routing and navigation pre-rendering and data fetching and styling applications but before diving into the nexus features we just mentioned let's see how we can move from a simple react application to nexjs so going back to our react example let's see how we can migrate this simple example to next.js first we don't need to load the react and react dom scripts from onpackage.com anymore instead we will install them locally using node package manager or npm to do so let's create a new file called package.json with an empty object in our terminal let's run npm install react react dom and next now jumping back to the index.html file we can delete the html in body tags because next will create those for us we can also delete the code that interacts with the app element in the react dom.render method because next will manage those for us too we also don't need to worry about babel because next we'll set up and configure a compiler that transforms our jsx code to valid javascript that the browsers can understand finally we can see that the only code left inside the file is jsx so we can change our file type to js or jsx and delete the autoscript tag there are three more things we need to do to fully transition to an xjs application first let's move the index file to a new directory called pages and more on this later we also need to add the default export to our main vr component to help next.js distinguish which component to render as the main component of this page and finally let's add the script to our package.json file to run the nexjs development server while we develop we can now view our app by running npm run dev inside our terminal and navigating to localhost 3000 in our browser so let's confirm everything works and yes did you notice that once we saved the change in our file the browser automatically updated to reflect the change that's a cool feature it's called fast refresh it gives us instantaneous feedback on any edits we make and comes pre-configured with lecture yes so to recap our code went from this to this on the surface this is a small reduction in the lines of code but it does help highlight something react is a library that provides essential primitives for building modern interactive ui but there's still some work involved to combine the ui we create into a production ready application nexjs gives us the best developer experience with all the features we need to go to production or with little to no configuration this allows us to focus on the features that make our products unique in looking at our migration here we're already getting a sense of the benefits of using next we've removed the babel script a taste of the complex tooling and configuration we no longer have to think about and we also saw fast refresh in action just one of the many developer experience improvements we can expect so in the next sections we will discuss some of next.js features optimizations and conventions that can prepare us for production going back to our example you will notice that the home page of our application is located inside the pages folder this is intentional because just like the name implies each file inside the pages directory is considered a page or route of our application this file system based routing supports more advanced features like subfolders and dynamic routes where we can create a single file to render any number of routes for pages like blog posts or products so let's create a schedule page for our conference application and we'll add a title to help our users know which page they are currently browsing if you remember we've already created a header component in our home page there is nothing wrong with copying and pasting this code but if we find ourselves reusing a component in a few different places it might be worth moving it into a separate file it would be quite useful if there was a way to import it into the schedule.js file so that we could reuse our code for this we can take advantage of es modules modules allows us to split code into separate files and import them when needed and modules go hand-in-hand with react's component-based model we can create a new header.js file and move our header component into it and then we can export it so that we can use it later now there is one issue here we might not realize since we created the header.js file inside the pages folder of our application it's considered a route of our website this is definitely not our intention because header is a component and not a page it's common to move react components that are shared across our project into a folder called components one other convention is to capitalize the file names to signify that they contain react components we can now import the header component into our home page and our schedule page and let's add some navigation between our two pages with html anchor tags our header component is a great place to add our navigation because it's used on both pages now pay attention to what happens when we click the link did you notice that the page completely reloaded when we switched there is an opportunity to improve the user experience here nexjs provides a link component that builds on top of a regular anchor element this component enables client-side transitions giving a smoother client-side navigation experience without the page reload link components in our user's viewport will also prefetch the page information in the background for faster loads let's see how we can use the link component we can import the link component from next link then we can wrap the anchor with the link component and move the href attribute to the link in addition to the link component next also provides a few other helpful components that also build on top of regular html elements and add additional features and optimizations these enhanced html components include the link component we just discussed the image component which lazy loads images outside the viewport avoids content shifting around as they load and serves the image in an optimized size in a format the script component which provides a flexible loading priority for third-party scripts and the head component which allows us to make changes to a page's head metadata from anywhere within our app including deeply nested components now it's important to note that these components are enhancements and they don't break the original functionality of the html elements they are but on there is a unavoidable unit of work to convert the jsx code we write into the html representation of our ui this process is called rendering when and where rendering happens determines the type of rendering method so let's go over the available options we have with net js let's start with client-side rendering in a simple react application the browser receives an empty html shell along with the javascript instructions to construct the ui this is called client-side rendering because the initial ranging work happens on the user's device in contrast next pre-renders every page by default pre-rendering means the html is generated in advance on a server instead of having your own done by javascript on the user's device in practice this means that for a client-side rendered app the user will see a blank page while the rendering work is being done compared to a pre-rendered app where the user will see the constructed ui because of this in other implications such as seo and social media sharing it's generally recommended that you use free rendering unless you have a specific use case for using client-side rendering so let's look at the nexjs pre-rendering methods with server-side rendering the html of the page is pre-rendered on the server for each request before being sent to the client with static site generation the work is done once at view time when the application is deployed the html is stored and reused for each request pre-rendering allows us to place a content delivery network or cdn between the server and the client cdns store the static result of the pre-rendered work in multiple locations around the world this makes cdns fast because they are situated closer to our users traditionally cdns could only store static content such as html and image files however more recently a new class of cdns can also do some computational work this means some of the rendering work can be done closer to our users previously choosing which rendering method we used was largely dependent on whether our content was dynamic or static but with edge rendering we can get dynamic content at the speed of static and the beauty of nexjs is that we can choose the most appropriate rendering method depending on our use case and on a page by page basis whether that's static site generation server side rendering edge rendering or even client-side rendering so for our example we will use static site generation to fetch data from an api we began by listing our speakers as a inline array however the list of our conference speakers and their details is actually found on an external api to statically generate a page even though it's fetching external data we can export an async function called get static props to help us understand how things work let's first move our speakers array into get static props and return it as a prop now the props object including our speakers array is passed down to the page component and we can now access our speakers array by destructuring the props object instead of an inline array let's actually fetch our data from an external api next we'll now fetch the data once a build time and generate the html of the page if our data frequently changed or if we had large number of pages we could use incremental static regeneration or isr which allows us to create and update static pages without needing to rebuild the entire application isr can be enabled through the revalidate property in getstatic props so in this case nexjs will regenerate the page in the background at the most once every five minutes but since our list of speakers won't change very often we will remove the revalidated option there are other ways to fetch data in xjs including get server side props allowing us to fetch data on the server at request time api routes a simple solution to building our api endpoints with nexjs and client-side data fetching using a data fetching library such as ucswr and of course add functions allowing you to run javascript at the edge before a request is processed so the design of our conference app is looking very blunt let's spice things up a bit by adding some styling to the title of our header component first let's create a new file called styles.css and create a new class for our title next let's give our title a large font size in a nice see green text color we can then go to our header component and add the css class name to our h1 element now this is a good place to highlight a potential issue we could have in the future css selectors by nature are global so looking at our example this means that anywhere in our app that also uses the class name title would get a c green color applied the chance of this accidentally happening increases as the size of our applications grow one solution is to make our elements more specific these rules will now only apply to the titles inside a header another option is to make the class name more unique but another approach is to use a styling solution that foggles the issue altogether instead of a generic style.css file let's name this file header.module.css and move it into the components folder we can then import the styles object we just created into the header component and use the styles.title property to style our h1 element behind the scenes next is using css modules to avoid styling collisions by automatically scoping css rules to the component using component level css gives us a better user and developer experience because of a few reasons your apps load faster because styles are minified and only the styles of the components used on a page are loaded styles are automatically prefixed to support older browsers the thousand one components don't affect the styles in another component and it's safer to delete styles without having to worry if they will affect other pages in addition to css modules next also supports whichever styling solution you prefer including global css or sas style sheets utility-based css frameworks like tailwind or your preferred css in js library so to summarize we went from a react application to an xjs application and we also talked about a few next.js features including pages and navigation pre-rendering and data fetching and styling this was only an introduction to nexjs and there are many other features we haven't yet explored if you're new to nexjs a great place to start is by doing your interactive course on nexus.org forward slash learn this course will guide you through everything you need to know to get started with next.js and you can also check out our documentation on nexus.org for slash docs and the extensive list of examples we have on our github repo and of course if you have any questions you're more than welcome to ask a community on github discussions i'm looking forward to seeing you there thank you and bye [Music] so [Music] [Music] hello everyone i'm tj coley creative director at monogram monogram is a digital agency from atlanta georgia who specializes in building jam stack websites and web apps using the latest technologies like nexjs tailwind css algolia and headless cmss like prismic dotto cms and contentful monogram has been a long time user of versailles and we're honored to have the opportunity today to present the mac stadium website and its process with everyone [Music] hi i'm heather robertson and i'm vice president of global marketing at mac stadium mac stadium provides cloud solutions for developers who are building for the mac ecosystem so essentially devops teams and developers that are building ios or mac os apps need mac hardware to be able to build and test their apps and what mac stadium does is we take that consumer grade apple hardware and we enable it with networking connectivity storage in an enterprise scale data center environment and provide that to them through a cloud so they can actually access and use mac hardware the same way they would with azure or google cloud for their other projects originally our project was we wanted to re-enable and redesign our customer portal to make it easier and more user-friendly so we were looking for a company that could do a lot of ui and uex design for our web portal and then in talking about that project we also realized it's probably a good time to refresh our website so then our scope kind of expanded to being not only app ui and ux but also website design and build and so that's kind of what led us to monogram is we knew that they would excel in both areas they also are a local atlanta company and we're here in atlanta so it was a really nice opportunity to get to work hands-on with a company local and side-by-side which we haven't had a lot through the pandemic and so that made the project even more exciting for us one of the things we're really excited about in working with mammogram is moving our website to the jam stack and so we had been using a platform that had some cms elements to it but it was still basically a wysiwyg web editor and we were running into some problems where we were limited by how big the site could go how much we could scale how much unique customization we could do and what i really discovered in this whole process was between using prismic and next we were able to do everything that i wanted from a scalability standpoint and it was really extensible and really customizable and working together with tj and the monogram team we were able to come up with some really unique things that gave us a lot of customization as far as design and content and execution for our website that has been really really exciting one of the benefits of going with a jam stack website and having it more componentized and api enabled and more flexible secure extensible is that we really can use this website and grow in the future mac stadium has a lot of plans for the next couple years and so being able to take the same backend the same content the same cms and apply that to not only our website but our blog and our portal and new products that we're developing all from one place and also change it and evolve it as we go along to kind of fit our needs that was really exciting for us platforms that we've been on in the past were pretty static and it was just our public website or our marketing facing website where now we can kind of take the same website content and expand that to be more broad across the entire organization and benefit not only marketing but product and you know customer engagement and things like that so that's that's a really exciting part of it we're looking forward to growing with monogram next.js has a great developer experience with zero config install which is ready to go within seconds and it provides a lot of functionality out of the box like auto optimized images prefetching links deferred loading of scripts code splitting with dynamic imports hybrid ssg ssr incremental static regeneration or isr typescript support and api routes in a unique digital agency like monogram we're equally versed in building websites and web apps due to the versatility of nexjs our developers are able to work side by side within the same framework it's easy to pick up and works great whether it's for a small blog or a large enterprise website or web app an xjs project can be as small or as large as you need multiple options for generation allow building a website or an app as ssr a spa or isr hybrid generation enables cross app unification for mac stadium we chose ssg or server side generation and isr or incremental static regeneration for the perfect balance of speed and build times the integration ecosystem is very strong with nexjs versailles offers one-click ci cd deployment no managing servers no dedicated ci cd team necessary slack notifications for error builds make it easy for us to know when issues occur vircell analytics enables performance testing with every single build as one of many small ways vircell and xjs improves our workflow vercell environment variables means no more sending env files to each other in slack and it also means we can keep our api keys secure a bonus side effect of monogram switching primarily to nexjs is that recruiting is now simpler we do not have to hire or build complex cross-platform teams everyone is an xjs developer and those switching from vanilla react love the convenience next.js brings being agile and moving people across projects enables monogram to stay lean and provide the level of service our clients expect we started with low fidelity wireframes in figma we used our design knowledge and experience worked closely with heather and her team and performed user testing with usability hub as needed iteration in this phase is key since this was a big brand refresh for mac stadium as well we brought creative art direction and worked very closely with heather to establish a clear vision of mac stadium's new aesthetic after many rounds of iterations and refinements we settled on a new rich purple based color scheme that perfectly complements mac stadium orange prismic played a key part in building this next.js website as it was essentially our backend and data repository as well as the client's interface monogram definitely stretched what is possible with prismic and the slices feature and innovated in a few key ways that made this project a success we'd love to show you and walk you through some of these innovations today the first of these was the way we apply themes to a slice as you can see from the design it was not enough for us to have every slice look the same with a white background we wanted heather and her team to have flexibility in choosing a theme for every slice to be able to control the look and feel of a page for example certain pages could be dark while others could be primarily white a theme was created as a repeatable content type in prismic and simply had two fields a title and a unique id the unique id is written as a class on the slice via a custom next.js slice zone we wrote this is passed as a parameter to every slice and if no theme is chosen our next.js code has a fallback to white in prismic everything is optional there are no required fields some may consider this a minor annoyance but this is clearly a fundamental design decision taken by prismic rather than a shortcoming and we took full advantage of it by wrapping every text image and embed field from prismic in a conditional statement heather and her team had additional flexibility with slices for example a logo party slice without a title could serve as a simple grid of logos while the same slice without logos and only a title could be used as a standalone title this expanded the number of slice variations to the millions as you can see here another innovation was our custom prismic next js slice zone essentially it's an xjs component that accepts prismic slice array for a page and renders the correct slice in its place we use the switch case statement here as you can see because it performs better and is less memory intensive than if else conditional statements one of the requirements for building this website was that certain pages had to be grouped together within directories for example company related pages needed to be under slash company while the obvious answer for this may be to create a company type in prismic we did not want to duplicate all the parameters that we spent building the general page type so we devised a better solution we leveraged prismix tags as the method to filter the getstatic props query and conditionally build only pages tagged with company under the company folder the footer navigation is being built entirely from prismic which is great for mac stadium to maintain links moving forward however this posed a challenge for us when building pages with ssg with hundreds of pages we did not want to query prismic for the same data for the footer of every single page so we're using node filesync or fs to download the globally used data once and use it to build the rest of the website in any large scale enterprise website it's important to have lots of internal links between pages the challenge with many jamstack websites is to properly maintain internal links from a content perspective so we're leveraging prismic's internal document link feature and we wrote an innovative yet simple link resolver function that automatically finds the correct url based on the past items this is built to be foolproof and can accept a url string an object or even an array as a cherry on top we wrap this in a cta button component to unify the styling of the button site-wide the cta button component is essentially an xjs link component styled to look like a button and these are used throughout the website with the label type url object and more being passed through this also was helpful in implementing segment analytics we simply wrote segment code into the cta button component and it all just works websites are blazing fast right out of the gate but if you're not careful it's easy to add heavy external scripts fonts and large images that can lower your performance score although we're super careful about adding even a single package to the project and undergo a thorough internal performance review versailles analytics performance helps us keep tabs on whether a certain build caused a significant performance decrease it's also a bit of a challenge to performance when external analytics scripts can cause a severe performance hit but that's when next.js script tag and up and coming plugins like partytown come to shine we're watching this part of nexjs very closely and we are working very closely with the vercell team to find ways to keep performance at 100 percent while simultaneously loading external libraries needed in the enterprise looking forward we have a bright future in our partnership together with mac stadium we are working on some really great things together all using nexjs for example monogram is working on an in-house next js animation system that keeps animations at 60fps and doesn't impact web vitals performance we're working closely with nextgs engineers to help bring nextgs live to mac stadium and others and can't wait to see what the future holds we're really excited about everything that we're doing at mac stadium especially partnering with monogram we've got a lot of really cool tools that we're building for our customers to really enable them being able to build for back in the cloud jam stack technologies are rising every day with nexjs at the core monogram believes technologies such as next.js to be key instruments in the jamstack orchestra and we can't wait to create a symphony together the future is only getting started and the future begins today [Music] hi i'm corey and i am on the marketing team at notion i'm a designer and developer and just this last year we migrated our entire marketing website from a client rendered approach to 100 next js fully static and today i want to talk about that journey this talk is especially for you if you're working on a project or a team and you're thinking about going static using nexjs as a static site generator but you're not totally sure hopefully this talk will give you some ideas about how to migrate and what that process looks like in this talk i'm going to cover four parts i'm going to start from where we started with our client rendered marketing site next i'm going to talk about our journey to choosing next.js then a little bit about building the static site and the technical decisions we made and finally i'm going to share our really incredible results let's talk about where we started when i joined notion it was still quite a small team we worked out of this little garage in the mission under 20 people and a lot of technical decisions were made to move quickly so we had one giant components folder and we shared components between the marketing site and the app and this monorepo approach was super cool and sharing everything allowed us to do things like pulling in live demos to our marketing site because the marketing site was the product there wasn't really a distinction but over time this started to create issues for us on the developer experience side if we're pulling in a button that said sign up for example it would pull on all this complexity from the app it would have all these different props um that were related to like mobile and touch when all we really needed for the marketing site was a simple button that allowed us to sign up so here we were faced with quite a few developer experience problems but at the same time we were having a lot of user experience problems and some of these pain points were first of all our javascript bundle size on the marketing site home page was 9.1 megabytes and this is because we were pulling in the entire app code onto our landing page we didn't have any code splitting set up because it was a small team and you know that kind of webpack configuration can take forever another problem was seo our marketing site was 100 client rendered so some pages were showing up in google some weren't a little later we started integrating a headless content management system called contentful and on the blog for example we had three contentful api calls so this meant there was going to be loading spinners everywhere on our blog and finally our performance we were scoring about 50 out of 100 on google lighthouse the score just wasn't up to where we'd like it to be so eventually it hit a point where as a developer i was getting frustrated i could tell our users were getting frustrated and it was clear that we needed some sort of solution to increase our performance of our marketing experience we started with an rfc dock in notion and we outlined what we saw were two paths forward one path was to optimize what we have and another path was to use a static site generator you know i'm not a fan of totally throwing out everything and starting over in many cases it is smart to optimize what you have we could have you know implemented code splitting on our own we could have reduced that javascript bundle size we could have um simplified the shared components there was a lot we could do without making a drastic change we also compared it to using something like next.js and what we found is that migrating to next.js would be a similar amount of work but we would also get all these extra benefits um for free it made more sense right if we're gonna do a lot of work to migrate we might as well get as much benefit on the dx side and ux site as possible once we identified that we wanted to go with the static site generator we didn't just choose next js we actually had a wish list of things that we were looking for that next.js just happened to fit on our wish list we wanted something that was react based because our whole code base is react based we wanted typescript support that's been super helpful in catching bugs early we wanted easy content management system integration with contentful we wanted full css support and we wanted to use something like style.jsx that would allow us to use the full power of css we wanted a great publishing workflow we have a bunch of contributors to our marketing site and we wanted them to be able to preview content and ship it quickly and finally we wanted to choose a solution that was future proof we want a marketing site that can grow with us ideally we don't want to replace it again in a few years we want to choose a platform that we feel is in it for the long run and is going to continuously improve as we do next js was that all right so we've chosen our static site generator next i want to talk about what building the static site with next.js was actually like how much work was this what was actually involved first i want to get into the actual migration scope this was a big project i'm not going to lie it was about 200 000 lines of code we had to migrate 109 react components 23 static pages 129 dynamically generated pages two locales and at the end it took about two months and about two engineers um working on this to do not a small undertaking you know it's all react so most of the components and code we could reuse one of the things we had to figure out was version control and we were initially considering creating a separate repository for the marketing site but eventually we decided to stick with our monorepo so this is what it looks like now basically everything is in one repo right so marketing has a folder our mobile apps have a folder desktop apps have a folder we can continue to share critical code like analytics helper scripts we've moved away from sharing our components folder just because we found that marketing components were very different from app components so components are no longer shared but we do use this monorepo approach to share other configuration information the next big challenge was routing and this was the thing that we were probably the most nervous about going with this monorepo approach because our marketing site and our app live on the same domain notion.so and a lot of companies will put their app on a subdomain right like app.notion.so but we we don't do that so we had to find a way to run this nexjs app and our client app on the same domain and have our router be aware the solution we ended up choosing was implementing a reverse proxy and the way it works is actually quite straightforward so a request comes in to the notion marketing website it first hits our api server and our api server parses the url it looks at the route and we have an allow list of marketing urls which are essentially the next js urls if it is one of these urls the api server through the reverse proxy forwards the request to our marketing server which is running xjs and if it is not a marketing url the api server handles a request on its own and for example serves the response needed for a notion database so with this talk of reverse proxies and multiple servers you're probably wondering how we deployed our marketing site and the answer is that it lives in its own docker container and it is deployed to aws ecs and we we stuck with aws because it powers everything else at notion someday in the future we may migrate to purcell there's a lot of features that are included there that we'd like to take advantage of another big change we made during this migration was moving away from react style props towards style jsx for our app react style props make a ton of sense because it's super easy to compute style values with interpolated javascript but for the marketing site style.js we found is a lot more expressive it allows you to do things like pseudo classes like hover or active um and media queries are a lot simpler too on top of that style jsx is included with next.js you don't actually have to install anything you know you end up with this super nice solution where your styles are co-located with your components and it's been incredibly great for us we also love how styles are scoped to components and they don't leak after a few months of heads down migration work it was finally time to make the switch and there are a lot of big pr's we needed to come up with a solution to launch this new static marketing site without any downtime and also with the option to revert to the old site if necessary the solution we decided upon was we have an experiments framework we use to turn features on and off in the app and we did the same thing through the mark for the marketing site we had our new nexjs marketing site running alongside our old client rendered site um so they both existed in our code base for a period of time we'd say half of the traffic send it to the old site half of it send it to the new site so we had this period of about two weeks where we slowly ramped up traffic to our new marketing site as we investigated the performance and the server load we saw that everything was okay and then eventually we got to 100 and at that point we were able to pull out all of our previous client rendered marketing site code so all this hard work is behind us and now it's time to look at the results i was very excited to share internally that we had a new marketing site and it was a funny message to share because the first thing you'll notice on our new marketing site is absolutely nothing and this is something i'd really recommend if you're transitioning to next.js from an existing marketing site we intentionally de-scoped the project as much as possible we could have turned it into a redesign or a rethink but that would add more time and complexity we wanted to keep this project to purely performance migration our final performance scores were just incredible of course with all the next js sights we're in the green here with a 97 out of 100 the the great thing about using xjs is once a year when this the the big release comes out i feel like our performance gets upgraded without us even lifting a finger from my perspective the the true magic of next js is this marriage of user experience and developer experience and i think that's super unique there's a lot of tools out there that me as an engineer i'll look at them and i'll say i really want this tool it's going to make my developer workflow better it's going to make my life better but there isn't always a strong argument for how it's going to make the user's life better so nextgs is in the sweet spot where i'm really happy notions users are really happy and it's just a win-win for everyone so i want to talk about the main user experience improvements we've seen first of all we have super high performance our google lighthouse score is now 97 out of 100. every page on our site is pre-rendered and cached by cloudflare there's not a single loading spinner on our entire marketing site much smaller page weight our initial required javascript on our homepage is down 93 percent from 9.1 megabytes to 847 kilobytes and finally seo is way better than it used to be help center articles and blog posts are finally showing up at the top of google users can actually find things now and finally i want to talk about developer experience i am just overjoyed my job has gotten a lot easier i'm probably twice as fast and productive day to day in this new code base it's it's really incredible some of the things i really like first of all performance is a default in xjs we get automatic code splitting no webpack config you don't really have to think about it and performance often just happens content queries come without a cost so on our blog there's three different calls to our headless cms to grab different pieces of content and before that would result in loading spinners on the client no longer it's all pulled in at build and serve statically full css support and this is thanks to style jsx which isn't technically part of nexjs but has been a game changer and i highly recommend it i finally feel like i can be creative and make a beautiful page and finally something we've started using recently is incremental static regeneration which if you haven't used it i highly recommend trying it the idea is you render your entire site initially and then at request if content changes on a page that page can rebuild in real time without rebuilding the entire site so you get all the benefits of a static site without the downfalls of having to rebuild and having out-of-date content so we've implemented this across every page on our site that has semi-real-time content and it's been amazing okay so that was a little bit about notions journey and now it is your turn and i want to say if if you're on a team and you're trying to make this decision about should we move to a static site generator should we choose next js it is a hard decision and it's a big decision our experience has been nothing but positive and every year when there's new nexujs features released our performance increases our developer happiness increase increases our user happiness increases and it's just a win-win for everyone i really think it's worth taking the leap and at least trying it out good luck so thanks so much for spending some time with me um i'm on twitter at coryatscorn and the content from this talk is also available on the notion blog if you'd like to dive in a little deeper thanks [Music] hi i'm amy dutton i'm the creative director at zeel hi i'm james quick developer media manager at auth0 now amy and i are the co-host of the podcast compressed fm a weekly podcast about web development and design and we both love next.js but we figured don't just take our word for it we wanted to pull together some highlights from different members of the community creators if you will and have them share why they love nexus and how they've used it now you'll hear from people of all different backgrounds and experience levels so i'm really excited for you to get to hear from these creators that said let's go ahead and roll the tape [Music] i'm chande person this is dr adonis i'm a senior software engineer at netflix and i'm using next.js to rebuild my personal site nexjs has definitely been a game changer for my developer workflow where i feel like they keep nailing it with intuitive developer experiences like data fetching methods which has helped me and my project next js wordpress starter pull in all of my data from a decoupled wordpress instance where i can manage that headlessly and then deploy a jam stack application all powered by nexjs hey this is drew founder of protege.dev we're using xjs to build an inclusive job board hey there i'm avnish and i started programming almost a year back i started with react and moved on to next the transition from zia to next year's was very smooth and i've been loving it because next is so fast and the development experience is pretty good i have built some great production yeti apps with it and i'm looking forward to learning more about it i hope you also enjoy next as much as i do i used nexus to build roll your tweet it allowed me to move swiftly and create an mvp in a short amount of time hi i'm catherine peterson and i'm a software engineer at github next.js is my go-to framework for side projects because of how great the developer experience is i've always loved react and next just adds another layer of awesome features on top of it like server side rendering and built-in routing last april i used next js to build a side project called readme.sew which ended up landing me my current role at github because of how easy next.js was to use i was able to build and launch the whole thing in just a couple of days and that project ended up changing my life by landing me in my dream job i use nexus to build a newsletter app with twitter review api and tailwind css i use it for my website thanks to next js's api routes i was able to add stripe to the new better.dev website and i was able to take payments in about one hour so i went from zero customers zero dollars to having one customer and a little money in very little code and that's thanks to nexgs's ability to do full stack apps so one of the things that i really like about nexjs is the way it allows you to handle routing next.js uses a file system based router and all you have to do is create a pages directory and that's it any file you put inside that pages directory is now a route it's really that simple hello this is alex from codingcat.dev i use next.js and firebase to build our site it is easy to create our static podcast pages and dynamic admin pages using next.js codingcat is open source so feel free to check it out today aloha everyone cap here so i wanted to upgrade my portfolio which is originally built with react can now be built with next.js why you ask because with next.js i can statically generate an seo friendly portfolio so next.js allows my portfolio to be served as html awesome be bot friendly great and get my portfolio ready for more eyes to be on my work all great things [Music] [Music] hi i'm tim cto and founder at shaklee checkly is used by the best dev teams to ensure the reliability and performance of their web apps and apis let me show you how you can monitor your next app with checkly first you use our powerful javascript based browser checks to make sure your web apps work reliably and fast we automatically give you web files console logs network data and a lot more then you add some api checks to make sure your backend apis are snappy and respond with the correct payload of course if anything fails we will alert you on slack email sms and whole bunch of other channels lastly you hook this up to your for sale account with our new deep integration so you never ship any broken web apps again sign up for a free developer plan over at checkleyhq.com [Music] your app just crashed the phone running it has exploded it was struck by a hammer manufactured in 2005 by harry's hammers the hammer's head is composed of 75 nickel 20 percent steel and 5 percent iron the phone flew into the air an 86 degree angle and came crashing down at 11 miles per hour hey everyone my name is pedro duarte on twitter i'm a dx engineer at modules what does dx mean fair question let me explain it's like ux but as if my users are developers like you i focus on api design documentation community things like that recently i've been focusing on two of our open source libraries radix and stitches radix is a library of low-level accessible and unstyled components and stitches is a css engine solution the title of my talk today is so you think you can beat a drop down that's a question but that's not a challenge and in this talk we're going to dive deep into the complexities of designing and building a fully featured accessible drop down menu we're also going to do a live demo on how we can use redix to help you make faster drop down components when i was younger i used to think i could build a drop down to explain what i mean i'd like to replay one of the many conversations i've had with colleagues in the past it goes like this so one morning i'm just sitting on my desk when i got a message from alex showing me the new design of a page we already had and i'm looking at this part here and i can tell it's a new component but nothing to worry about we need it for tomorrow's client demo that's okay i know i can do it young pedro will always deliver so 45 minutes later all done alex is happy he thinks he works great and i'm feeling pretty proud but let's just stop here for a second today with a lot more experience and a lot more care i'd like to take another look at this page so i remember that i made a button that when clicked i would show a position absolute element with three items inside and that's what i was calling a drop down menu i also remember that i made it so when you clicked outside it would close and that's where i stopped i did nothing more and nothing less this component has absolutely no keyboard navigation so if i open it and i press the down arrow notice how the down arrow just scrolls the page and up scrolls back up what if i press escape nothing happens there is no type ahead so if i start typing in edit for example nothing happens now apart from all of these features that left out there is absolutely no accessibility let me show you how voiceover interprets this entering web content button you are currently on a button inside web content to click this button press control option space to exit this web area press control option shift up arrow so far the only thing the voiceover knows is that this is a button that's because i'm using the button element but it has no idea what this button does so what happens if i press enter you see how the drop down opens but nothing happens in voiceover he doesn't even know that a drop down menu showed up okay so i think we've seen enough on how broken this component actually is let's just go back to the chat okay so one hour before the demo alex reached out again and he said to me here's the tweak design and i remember looking at this and thinking this is not a tweak design this is a whole new thing and i have no idea how i'm gonna be able to deliver this for the demo that's happening in one hour and that's exactly when i started to freak out to be fair i still think i could do it just not by tomorrow it would take so much time we need time to research all of its features we need to read the why i respect we then need to implement all of those features and accessibility concerns we need to worry about complex logic such as positioning type ahead after that we've got to test everything and once we finish with the testing we may have to repeat these things again and again and again when we don't have enough time we end up shipping a broken component we see this type of broken drop downs everywhere on the web most drop downs are problematic even for sighted users who don't rely on keyboard navigation but in many situations they're completely inaccessible there are so many cases to consider from positioning logic accessibility features sub-menu separators labels icons checkable items the list goes on it turns out that building a drop down is really hard i'm not the only one that thinks that this is a massive problem and it's a bottleneck because all we want to do is focus on our product our challenges and our users the platform has made a ton of progress recently and it'd be nice to use it but it's still catching up with some of the needs of modern web apps so here we are if building components is such a challenging task and it takes such a long time and the platform is still catching up what can we do luckily for us there are libraries we can delegate to who focus explicitly on solving this problem they focus on building accessible primitives for the web by using a library we have more time to focus on our product and that's exactly why we build radix primitives let me show you how it works so we can visit the radix website by going to ratings.ui.com and then we click on primitives and we're taken to the introduction page but i'm going to give you a quick intro here so in a nutshell radix is a library of ui components that are completely accessible and unstyled these components can be used as a base for your design system or you can use them incrementally to make your current application more accessible so just to recap when you render a radix component you're going to get all of its functionality and accessibility features out of the box but you're going to get no stylings you can then apply the styles using your favorite styling solution radix includes lots of components and we're working on lots more today we're going to be focusing on the drop down menu but as you can see there are also lots of other stuff like pop overs and sliders scroll areas so let's talk about the drop down menu when you go to the drop down menu page you're gonna see a demo that you can play with you're gonna see a list of all its features and then you're gonna see steps for how you can install how you can use it and then documentation for all of the api okay so today we're going to be doing a live demo so instead of taking you through the docs we're actually going to get practical cool so we're going to be using next.js as our framework and we can install that by going npx create next app and because redix is built with typescript we're going to use the typescript template we'll call our app radix demo and then we'll go into that new directory and we're almost good to go now we're just going to install the radix ui react drop down menu we copy that and we paste it in here all right so first thing we want to do is we want to just render a basic radix drop down menu straight out of the box and see how that works so you can see here in the anatomy section this is where it tells us the order of which the parts go together so we know that we need to render the root first and then the trigger this would be the button essentially and as a sibling of the trigger there's a content and inside the content there are many parts that we can render okay well let's go ahead and do that then we import drop down menu from radix nice then we'll do drop down menu dot root that's the first thing we need to render then we're going to do dot trigger we can just say settings here now we're going to do content and inside content we're going to render an item and we can say new tab and another item will say new window and then new private window okay saved hot module reloaded and now we've got a button here that would be the trigger and when i click on it you can see that it opens all the items are being focused i can click outside to close and everything is completely unstyled this is radix straight out of the box so even though we haven't had to write a single piece of logic everything just works and everything is fully accessible if we inspect the element we can see that the trigger has the right area attributes and if we open it we get a portal over here the inside is where the content lives and inside here there's also a bunch of area attributes so screen readers or assistive technologies in general know how to interpret this component okay so now that we know that we can render radix components just by rendering its parts how do we style them so for the sake of this demo i'm going to keep things very simple and we're just going to do some basic styling with vanilla css the first thing i'll do here in the stylus folder i'll create a file called dropdown.css and i'm going to import it over here in the app dropdown.css okay so you can see there's not much going on here we've just got a empty css file and let me make a little bit more space and here we've got the drop down markup so let's add some styles to the trigger some basic styles to the content and some basic styles to the items so we can style this the same way would style any html element we'll just create a selector and create a css rule i'm going to give it a color let's just make a color red like this so it's very obvious what we're doing and then we can apply that over here and save and there we go the color is red if we inspect we can see dropdown menu.trigger is literally just a button and all we've done is added a class name to it in the same style we can do content and in the content we can say let's do background color white for the radius of 6 pixels and box shadow let's add a bit of top shadow here the opacity there we go and finally we do an item and for the item we're simply going to do some padding and we can do 5 pixels 10 pixels and then when the item is being focused we're going to change the background color to gainsborough now we can add the class names to the right parts so here will be content and the items will be item okay we can open this we can see the content is showing up we can see the box shadow and as i hover them we can see the background color as well as the default browser outline that's perfect so that's how we add styles to the radix parts now that we know the adding styles to radix parts is exactly the same as adding styles to any other html element i'm just gonna put in some styles that i've pre-written that look a little bit nicer another thing i've done is i've updated the markup below to create a more realistic example okay so let's have a look at the code you can see that this is almost just like writing html there's no crazy logic there's nothing special going on it's just adding the right path in the order that we want so for example this is our trigger with the hamburger menu icon then we create a content as we've covered that previously the content is a sibling of trigger and inside content is where we add all of our items as well as sub menus so here are the first three items and then we are nesting a drop down menu route inside a drop down menu route that's how we do nested menus and that would be this over here so then we can add separators we can add groups we can add labels at this point it's up to you to decide what you want to add based on your requirements all right cool so let's start having a look at the features shall we um by now the most basic features have been covered because i've been using my mouse up until now so we know that i can hover over these menus and i can open sub menus all of that with my pointer but what if i rely on keyboard navigation well you'd be glad to know that the radix drop down menu supports full keyboard navigation first thing we can try is you see how right now the focus is on the button i can press either enter or space to open it so here i press enter and as i do that you can see how the first item is already focused i can use my up and down arrows to navigate across these items in the case of a sub menu i can press my right arrow to open the sub menu and the left arrow to close by the way this can be configured if you're using right to left reading direction as i continue pressing down you can see how i can cycle across all of the items but when you get to the last item and i keep pressing down it stops there well as i've explained radix is quite customizable so one of the things we can do we can add a loop prop to the content part and by doing that we should be able to loop through all of the items whether you're going down or whether you're going up for more information you can always look at the documentation where we explain all the props that each part accepts right now we just use the loop prop okay so let's talk about type ahead type ahead is the feature that allows us to jump directly to an item by typing in the label of the item so let's say we want to go from here directly to the item print we can simply start typing in print and as you can see it's jumped straight there but on the way it stopped in paste because the first letter we typed in was p so he jumped to paste first the second letter was r so then he went to print let's try and do that a little bit slower p r that's nice so type ahead works with every item in your drop down menu even items containing a space so let me just explain that a little bit earlier we covered that when we press space or enter you actually select the item so if i press space here we've just selected the item new window but what if i want to jump directly to new window and a space exists between these two words well type ahead is smart enough to know what your intention is so if i start typing new space window space will be taken into account in the type ahead instead of selecting the item another cool feature of type ahead is that if i keep pressing the same letter over and over again then type ahead will cycle over all of the items that begin with that letter so for example if i keep pressing the letter n notice how type ahead keeps cycling over all of the items that begin with n another thing that's pretty cool is that the radix item part contains a prop called text value this prop is extremely useful if inside your menu you have an icon for example in no text you can still tell what text you want type ahead to search for redix primitives also work with assistive technology for example here's how it works with voiceover settings menu popup button new tab command t new window command n new private window shift command history collapsed menu item you are currently on a menu item to choose this menu item press ctrl option space to close this menu press escape versal menu item menu history three items stitches menu item modals menu item history collapsed menu item cut menu copy men paste menu ite print command p fine command f menu item you are currently on a menu item settings menu pop-up button voice over off so that's how radix primitives work with voiceover alright we're making really good progress so far we've covered so many things and there's only a few more left but i did tell you the drop down menus were complex this feature is called collision aware positioning let me show you how it works when you open a menu by default it's positioned below the trigger and center aligned you can change this behavior using the side and align props but this is the default so i'll be using that for the demo in the case of when there's not enough space for the menu to fit below the button is going to get positioned above and when there's not enough space on the sides the menu will also be repositioned for example in this case there's not enough space on the right so the menu will get pushed a little bit more and if you go to the left there's not enough space you'll get pushed a little bit more what about sub menus well sub menus by default will show up based on your reading direction in my case my reading direction is left to right so they show up on the right if there's not enough space on the right then the sub menu will get moved to the left and the moment that there is more space you move to its ideal position again this is how collision aware positioning works another cool feature of the radix drop down menu is something that we call sub menu pointer grace this basically allows us to keep the sub menu open even if the pointer is moving away from the item trigger so check this out if i move up notice how it closes straight away and if i move down it also closes straight away as long as i'm moving towards the sub menu it will remain open sometimes you may want to add an arrow pointing towards the trigger the radix drop down menu contains a part called arrow and this is how we can use it the arrow goes inside of the content so i'm going to put an arrow in the main content drop down menu dot arrow i'm going to close it now when we open it we can see a black arrow using css we can style the arrow the same way we styled all of the other parts so let me make this a bit bigger and here we can do class name arrow this is a class i've already created and now when i open it you can see that there's a white arrow pointing towards the trigger now you also may realize that this arrow is actually touching the trigger we may want to give a little bit more space we can do that by adding a side offset property to the content and here we can say 10 and there we go if you think that's too much which i do we can just change it to five that's nice now a cool thing about the arrow is that when collision happens and your menu gets repositioned the arrow points towards the new direction the last thing i want to talk about is animations you can animate the radix drop down menu the same way you can animate any redix primitive either with css or with the javascript animation library like framer motion or react spring so what i've done here i've created two css animation keyframes and i'm adding them to the content based on the side i'm either going to animate up or animate down so check this out by default because we want the menu to appear below the button it animates down because it's dropping down but if there is a collision and we know the menu is going to be repositioned we want it to animate up this is collision aware animation so we are able to use these data attributes the radix exposes to us and we can apply different animations depending on the side even when collisions have taken place while we're on the topic of animations there's one last thing i want to show you and this is what we call origin aware animation basically it allows you to animate your menu based on the computed origin of the menu taking into account its size its side offset its align align offset and any collision that may have happened so check this out i've created a scale animation keyframe and i'm applying it over here in the content part i'm setting the origin of the animation to be this special css variable exposed to us by radix i then just give it the animation the duration and the easy so let's open this up and see how it looks you can see how it's scaling from this point over here but if there is a collision and the menu is going to get repositioned then it's scaling from this point over here this also works with sub menus you see how the origin of the sub menu is the top left but if there is a collision and the menu no longer fits on this side and i open it again now it's the top right and this happens based on every possible combination of collision detected the drop down we just built was so easy and so painless but behind the scenes it's taken us over 2 000 hours across 6 months 50 code reviews and literally thousands of commits to recap on radix it's a library of unstyled primitives you can use your favorite styling solution whether it's vanilla css or css and js like stitches or even a library of atomic classes like tailwind it's accessible so it supports full keyboard navigation and screen reader tested radix primitives are customizable so you can make it work for your use case to wrap it all up why does all of this matter building good ui components takes such a long time it distracts us from focusing and shipping on our product it costs companies hundreds of thousands of dollars poor quality ui can reduce both customer acquisition and retention and now products like superhuman stripe discord linear and figma are raising the bar for ui quality and accessibility on that note shipping accessible components is the new normal businesses are even being fined for having inaccessible uis we're all responsible when we build and ship broken ui components we're collectively contributing to a broken web we're making the web difficult for everybody to use but especially for less able-bodied people developers are tired of having to reinvent the wheel over and over again ui components are like table stakes it's undifferentiated work if i need a drop down i just want to use a drop down i don't want to have to build it that takes us to our last point it's absolutely fine to delegate i promise your products will be more functional more accessible and you have more time to focus on your unique product features to learn more about redix you can visit ready stash ui.com and follow us on twitter radix underscore ui cheers [Music] [Music] at prisma we redefine the developer experience of working with databases with a next-gen oram you write your data model in a human-readable schema allowing anyone to quickly understand how your database is designed you then get an auto-generated type-safe query builder that you can use to read and write data to your database and when your schema needs to evolve you run a single command that auto-generates migrations for you however regardless of whether you use prism as your orm working with traditional server-based databases in a serverless environment you're not into an issue each serverless function opens a connection to the database so during traffic spikes you'll quickly exhaust the database's connection limit this negatively impacts performance and leads to failed requests that's why we've built the prisma data proxy it's a service that sits between your server and database and handles database connection management for you it's currently in early access and we would love for you to try it out to learn more go to pris prison.li dataproxy hi my name is lena and i'm a software engineer at tiny bird in this talk i'm going to show you how to take advantage of real-time analytics within your own products using just next years on tiny birth a great example of a product currently used in real-time analytics is versailles they provide a great platform for developers to build deploy and preview their own apps but they also offer virtual analytics so you can understand how each one of your end users is experiencing your app in real time so let's see how you can do this with your own apps for this talk we are going to use next cas commerce starter git and we are going to add real-time analytics to it if you aren't familiar with it it is a pre-built nexus project that you can connect with your headless e-commerce api of choice like big commerce shopify or others so let's start gathering the events that we are going to use each event will be a json object that we will post a tiny bird initially events would look something like this these are just the initial fields we'll start working with don't worry too much about them as we can add as many fills as we want later on first of all we are going to create a new data source to store our events by uploading the json file with some rows tiny bird guesses the columns out of the case and objects and you can then simply hit the button and boom it's done so we're going to start sending just a few events but you can see later that these data sources can scale indefinitely now let's see some code this is the root application file let's modify it we've included the next tiny bird library so we can start sending events right away when calling the tie number function it's going to send an event every time a page is loaded or every time the user switches to a different page we only have to set up the tiny bird provider component with the values we need which are the api url component the token the tracker library and finally the destination data source which in this case is named events okay so now we navigate into the different product pages we'll be sending events to our data source if we check now our dashboard we see how the events data source has now been filled with the new page load events cool so in order to explore the data we'll be generating we're going to create a tiny bird pipe a pipe is where you work in tiny bird it's like a sql based notebook where you can change your sql queries and that you can use to explore data transform it or build api endpoints that you can consume in this case we are creating a pipe named get products ranking and we are going to use a simple sql query to get the visits count per product by counting each page load visit filtering the product url and grouping by the product sla by clicking on create api endpoint we publish a new api endpoint for this use case this endpoint will allow us to sort products on the main page by must visit it we can see what this endpoint returns by calling or api simply here in the browser so now that we have created our endpoint let's use it in the application we have a trending section that is now manually created so let's try to make it work based on the actual analytics we need to modify the ghetto products utils function to call the endpoint that we have just created after that we can modify the product ranking based on the results from our endpoint finally we're going to add the ranking number in the product tag so we can see it next to the product name if present if we take a look at the results we can see how now the products are sorted and we can see the ranking of each product next to its name now let's see one more example of something useful that you can do by using the power of real-time analytics if we see that users are drawn to certain images wouldn't it make sense to put that once first let's see how let's edit the product slider component by using the tiny bird utility again we have to modify the on-click callback from the slider we'll send an event named click product image and we'll include the url and the new field the product this information will come from the productv component as a data attribute now let's click on some images randomly and after that let's go again to the events data source we can see that tiny bird has automatically detected there's a new column the product column so we only have to click on the button to to add this new column it'll be empty by default but as we start clicking on the images this column will be filled with new information so the next step is to create a new endpoint called get mouse clicked images so we can sort the images the users have clicked the most we do that by filtering by event name but we also need to filter by product id since each page shows a different product so how can we do that a tiny bird you can add custom parameters to your queries in this case we are adding a product id parameter if this parameter is not defined it returns all the products otherwise it will return only the selected product this templating system makes it really easy and quick to have dynamic endpoints for your application so let's modify again the product view by using the data component this component allows you to render other components based on the results of a tiny bird endpoint we only have to set the endpoint name and send the query parameters we need for this endpoint in this case the settings are getmostclicked image as endpoint name and product id as parameter after this change when the b component is loaded it will sort the images based on the response let's click on some images randomly i'm going to click more on the last images so when we refresh the page we are going to see that this image is now in the first position so this is just a quick sense of the kinds of things you can do on the page but now that you have your data coming in you can do so much more and more importantly you can scale this up as much as you want let's see how so we've implemented analytics based on the events coming from the page but let's say you want to scale your application as it starts to get more and more data let's say we have transactional information coming through kafka these events are coming through a kafka topic so let's bring it to tiny bird we'll start by adding a kafka connection and connecting it to a topic it is as simple as that the key point here is that we can use this data source in the endpoints we have created before as one of the key benefits of tiny birth is that you can work with billions of rows just like you would with a small amount of data for example now that we have created a data source from kafka let's build an analytics project from scratch that uses the events that we are collecting we can see how the events demo data source is now receiving data constantly this one in particular already has 640 million rows and it has received 62 million in the last hour for this project we are going to use our common line interface it enables you to have your project safe in your local environment and structure it in different files data source endpoints pipes so you can work with it as with any other software project for example this is how the endpoint that we have created before the getmostclip image endpoint looks like in a file and it is really easy to upload it to tiny bird by using the tiny bird common line interface let's push your files by doing tb push we can see how the project is being uploaded so as soon as it finishes if we go to our new tiny bird workspace we are going to see that all the data sources pipes and endpoints are there and we can start using them for our application but first let's take a quick look to the data flow for this project we can see how the different data sources and endpoints are connected we have the events demo data source which is the one receiving data from kafka and we have created a materialized view that filters the columns on the information that we don't need and stores it in the events this data source so the endpoints can work even faster all these endpoints that we have just pushed are going to power an admin page for our ecommerce application so that using the very same data that your application generates you can understand how your application is performing in real time we are applying different filters like the product size the category the color or the device where the events were registered from as we can see each time we apply a filter we are calling our endpoints sending the needed parameters and yeah this is happening over those 640 million events that we saw earlier [Music] [Music] we hope you enjoyed this talk if you want to know more about how to build applications over billions of rows email us at hitanibear.com or sign up to get an early access to our common developer plan [Music] nexjs has incredible momentum and is for good reason the framework brings first class developer experience and productivity it's no wonder developers love it but development teams don't work in a vacuum developers collaborate with many other stakeholders outside of engineering in fact requests from across the company often get blocked on developers they're always strapped for resources serving these requests this is where a headless cms comes in we can totally use these to let non-developers help themselves and build pages and other content on the site how do we do that well first let's define the schema for our landing page just the title and body text right oh but what if you also want to have different sections so a title and a list of sections but each section should have its own title and then probably an image to go along with that but the picture can be on the left or on the right and where's that call to action gonna be but i want different colors for the call to action button oh and some sections should show a product grid and the grid can be from different collections and different sizes but then for mobile i want the grid to just show on one row okay i have a schema then of course i'll want to actually implement all the code that powers the schema into our website code base great that's settled lastly i just need to toss our marketing team some huge forms fill out and i'm done right oh actually marketing is now asking for a secondary call to action in the heroes and the accordion faqs need to support images too also the design team shared a figma file for a redesigned product grid layout and they're also asking if we can make everything fit in on scroll companies spend a ridiculous amount of time modeling and implementing their visual content even building custom bespoke plugins and tooling and all this just so that content editors can navigate huge nested forms that look nothing like the content they're actually composing there has to be a better way what if we could make it easy and intuitive for anyone to directly create new user experiences without developer involvement we could completely change our team collaboration workflow we could free up developers to do higher leverage work we could unblock non-developers whether they're in marketing design product and we could just help the whole organization iterate much faster i'm yang i work on plasmic plasmic is a headless page builder developers drop a snippet into their code base and from then on non-developers can start visually creating services in the app everything from landing pages to parts of existing pages these are production grade experiences that integrate seamlessly within our next.js app so the content editor is it feels like a no code page builder but something that makes plasmid special is how deeply it integrates with code your code we'll see exactly what that means i want to go through building a sample landing page this demo will be using plasmic but i mentioned earlier the fundamental problem is manipulating an inherently visual medium and i want to focus the discussion more on dissecting that again you can always build your own page editing infrastructure on top of something like a headless cms i really want to focus more on what are the things to consider when editing visual content in these real world apps let's just dive in and see we're going to take the next jscommerce code base and let's add a landing page to it i'm in plasmic in a project that's already connected to our code base we have this blank new page and we can see what it looks like on desktop and mobile just two different views of the same thing let's start with designing the hero section i'm going to add a box for the hero and we'll add some copy let's center that and let's add a background image i want to make sure the product is centered so i'm going to tweak the positioning just a little bit and maybe i will make this hero a little bit taller as well okay i like that but the text is a little hard to read against this dark background so i'm gonna make it white i'll add a call to action button right here as well it's also a little hard to notice against this dark background so i'm going to switch it to the inverted cell and maybe i'll play around with the layout a little bit great that looks good maybe i'll make a few adjustments on mobile just by directly manipulating it great that looks good to me now i'll add another section with some more copy and i'll add a third section where i want some content side by side so i'll insert some columns which are responsive out of the box on the left i'll add some nested copy and on the right i want to display the actual products now in my code base i have this product slider component it's a react component and it's doing some isomorphic data fetching of product catalog data from our commerce backend in this case the shopify graphql api what i'd really love to do is to reuse this in my landing page so i'll just go ahead and register it in my plasmic integration and specify its props now i can start dragging and dropping into the editor we can go ahead and interact with its props from the right sidebar with immediate feedback and i just want to sizes to show a single product at a time there taking existing and unmodified code components especially ones with interesting logic and behavior attached and letting you drag and drop them in the editor opens up a world of possibilities and just changes the building experience for the non-developers that you support so now i want to add an faq to the bottom here i could just start by adding some text for the faq so i'll add a section but this is really secondary content and i don't want it taking up so much attention i have this expander component in the code it uses this accordion from the ant design system it's a very generic react component it just takes a header prop and a children prop for the body how do we make use of this in the editor when we register it we can expose the header and children props as quote unquote slots let's insert the expander so we have our normal props on the right like this one to toggle whether it's expanded and then our slots like header are directly editable from the canvas i'll update the body as well remember this was a children prop one thing that makes react powerful is composition i really want to be able to add an image here or any other nested content as well i'll just go ahead and insert an image or maybe i really want these side by side so i'll nest some more structure here in the form of columns actually i think i prefer the old look so let's undo that this ability to seamlessly interleave your design within your code within your design is what makes composition powerful largely we don't really think about it at all we want to manipulate things directly on the canvas and have it just feel natural and intuitive for this last one let's add a call to action button let's see how else we can apply this concept i want to spruce up the page with some very light animations there's this nice little library called react awesome reveal that gives you these nice effects when scrolling things into view let's just drop that in i'll move some content in there and if i scroll back to it it's starting to fade into view i'll tweak the settings to rise up from the bottom and also stagger the animations a bit that's nice so composition is very powerful this kind of animation wasn't something that was built into plasmic we effectively just extended the tools feature set and there are many other examples like this when you can find the right level of abstraction to expose this malleability is what makes plasmic feel hackable a tool that you can make your own now for this landing page i want to create a product gallery section but i'm imagining a new look that we haven't built before in our site if we look back at our product slider it's displaying a gallery of products with all the right data but it hard codes the look and feel what if i want to be able to change this from the visual editor let's again turn the composition and break this out into a few components for instance for the title let's extract it into its own component and it just reads from a context the data for a single product and formats and displays it we can do the same thing for the product price and image for the main container i'll change the product slider into a product grid component that fetches the data from the same graphql endpoint and then loops over each product and provides each product as the context to its children who are displayed in a grid let's add a section here and insert the product grid it starts off empty now let's drag the product title in there now we see the names for all the products similarly we can add the product image and the product price let's change this to points of the collection we actually want to show and limit the count to eight things now i want to add that new visual style for our product catalog first on mobile i want this to be two columns rather than four because these are all separate elements we can essentially have unlimited design possibilities we'll show off some of the more interesting layout capabilities i'll just take these titles at the top i'll make them free floating i'll add a background and some padding and i'll make it bold great and i'll put the price up next to it as well i'll just copy and paste the styles and that's pretty much all i wanted to do so you can effectively design with real dynamic production data and this isn't just for ecommerce you really want to let the data be anything from any data source whether it's social feeds or logged in database state it can even be content from a cms you should complement your best of breed tools and let your cms do what it does best which is modeling structured data rather than trying to model html and css and react in it now the goal of this landing page is to drive conversions i often want to a b test ideas or add some personalization to see what works best let's see if this page does better if it focuses on jackets rather than boots i'll go ahead and add what's called a variant to this page let's call it the jackets variant now i'll change the hero image along with a few other adjustments this isn't a hard copy of the original it's just a set of overrides so we can go back and keep editing our base page and all variants are kept in sync that's pretty much it at the end of all this we'll hit publish which triggers our for cell deployment hook and we can see the final results on staging or production while building a simple landing page we just saw a few of the primarily visual concerns that pervade every action adding visual editing is powerful but the rabbit hole runs deep maybe instead of a full page you just want to add a section to an existing page maybe instead of total freedom you want some restrictions to the structures that editors can build to help guide them we haven't talked about quality and performance of the result how to bake into static builds or server rendered pages image optimization layout shift etc maybe once we start questioning our tools and collaboration workflow for building pages we start questioning our tools and collaboration workflow for building apps these are just a few of the things that plasmic already enables today all in all it took us a few minutes to throw together a new landing page that had responsive layouts dynamic data interactive content animations and effects a b testing if we think about the actual code that we had right it's really a handful of specific building blocks that we needed often already existing components most of the page didn't need code at all most of the content is just that it's content rich visual content content that we want to look good to our users we wanted to convey our story and our brand we're just used to using code and data structures to represent that and render that content and having developers cobble this together for the actual content owners but it doesn't have to be this way we can redefine what it means to edit and manage content teams are already seeing the effects of this change we can share what we've observed from teams using plasmic plasmic really is for everyone and we've been lucky to see it used in a diverse set of environments we have individuals and solo creators just building their own portfolio or side project and on the other end we have fortune 500 enterprises like intuit designing their flagship product conversion page visually all in different versions of it and then there's everything in between ecommerce has been very interesting for us we have brands like yours who launched a headless shopify storefront on xjs migrating the whole team to a visual editing workflow helped them ship four times faster than before and they're just launching campaigns non-stop beard struggle also runs an xgs storefront and they replace their traditional cms infrastructure with plasmic that way their creative team can ship without developer involvement we have teams like thinking machines using this to build out their entire next.js marketing website moving beyond websites into apps teams like play versus use us in their logged in dashboard experience and of course we here at plasmic use plasmic not just to build out our next.js website but the plasmic editor itself this very complex and dynamic ui huge changes are coming in how sites are built next gs is leading the way in making it easy for developers to use react to build blazing fast sites and visual editing makes it possible for marketers designers anyone to directly participate in the process it's time to empower developers and content creators to do what they each do best without stepping on each other's toes and just letting the whole team move super fast that's our focus at plasmic please tell us how we're doing thank you [Music] [Music] hey i'm jeff nice to meet you all i was just taking a stroll through the woods i thought it might be a more lovely environment for the beginning of this talk it would be great if we could all be together in person but since we can't i figure may as well get creative right anyway the title of this talk is interactive documentation at scale using mdx and next.js a bit of a mouthful i know before we get into the details let's talk context i work for a company called hashicorp that builds a variety of devops and infrastructure management tools you might have heard of terraform vagrant or vault these are all hash of corp tools all in all hashicorp builds nine different products we've got terraform vault console nomad packer vagrant waypoint boundary and sentinel these products all need documentation on top of that we have a lovely team of technical writers that produces learn.hashcorp.com a tutorials and guides website that includes over 750 guides on how to use hash core products in different situations these websites are all the same in many ways because they're documentation sites but they also dramatically differ as far as their content and their scaling needs for this reason we need to build on top of a strong but flexible foundation for all of them together and for us this foundation is mdx and xjs like my metaphor all right let's keep walking i'm assuming you all know what nextgs is being here at the conference but i want to talk about mdx for a second in case anybody isn't familiar mdx is a really great open source project that allows you to use markdown alongside react components that you can just put in line it's a project that's built by the team behind unified unified is a collective of different really interesting and cool parsers and they are a completely community funded project so you should definitely check them out and if you're using any of their tools consider sponsoring them anyway let's stop here for a moment and look at an example of what mdx actually looks like so here it is as you can see it's just marked down and then you can use react components in line that's pretty much it let's keep walking [Music] we chose mdx at hashicorp for a few reasons first our engineers and technical writers love using github and markdown to author content product engineers will make updates to the code and as part of the same pull request will update the documentation and github provides a familiar environment that enables collaboration and review on changes to content it's all part of the same system as a simple pull request but we knew that over time as hashicorp grew as a company pure markdown wouldn't be enough to keep up with what we needed from our documentation websites we already had a library of shared react components that we use across hashicorp's websites and we dreaded a situation where we kept extending markdown with custom syntax and custom javascript loaders until it became a language of its own this would be difficult to maintain and to onboard new staff into all right well we've made it back home so let's go inside and check out some examples of where we use mdx on our actual documentation sites come on in [Music] all right so we're back at the computer let's take a look at a couple of the ways that we actually use mdx components in our documentation websites i want to start with the tabs component which is one that's used very frequently throughout all of our websites the way that this component works is pretty straightforward and as you would expect you can click through the tabs and it shows different content underneath them so i want to go through a few examples of how this looks on our websites but before i do so i just want to mention this interface since it might come up a few times this is part of a project that's called swing set we're building it out as an open source project here at hashicorp and the best way i can explain it is it's kind of a storybook but made specifically for an xjs really excited about it it's really cool but it's not exactly production ready quite yet and so maybe this could be a topic for a future conference talk hopefully but it's got a live code editor and it's a really helpful tool for us in developing components all right that's enough about swing set let's go back to examples of tabs here we are on the console docs website and you can see here that there is that exact same component right here used to switch between different code examples and here used to switch between different configuration examples tabs component is used all the time throughout our docs websites and is a really helpful tool for our docs authors to compress content and not make pages stretch out longer and longer having users read through things that they don't really care about if that's not the option they're after here's another example this one's on hashicorp.com i highlight this specifically because hashcorp.com doesn't actually use mdx at all it's just a normal next.js website that's used as our main company website and marketing page but still we use the exact same component and you can see it here used to toggle between different types of partners it's really valuable for us to be able to use the same components that we use on all of our non-mdx websites also in mdx because then we can kind of share the same code base and not have to repeat ourselves here's another example a little more creative and with a dark theme on hashcorp.com this one toggles between timelines of company milestones and product release milestones and my final tabs example is on hash corp learn which we mentioned briefly earlier this one is interesting because you can see that there are two sets of tabs right here on this page and when i click over to the second tab here it syncs with this other tab group this tab sync feature is really valuable in certain styles of documentation and would be an absolute nightmare to build out if we didn't have react components and react context available since we do it was trivial to implement and provides a really useful chunk of functionality for our users that's enough about tabs let's move on to another example another component that we use all the time in our docs websites is the code block component of course for technical documentation it's very frequent that you need to show blocks of highlighted code showing samples of how you would actually use the products why i want to mention this specific one is because of its usage you might have noticed for the tabs component its usage was pretty straightforward and what you'd expect you pull out the tabs component like you would in any react app and you write it down however for the code block you can see that the usage is simply by using a fenced code block in markdown and it still renders our custom component this is enabled by a really cool feature of mdx where you can actually set up custom configurations to override default html elements with custom react components and i want to show you exactly how we configure that for our websites we're diving deep into the core of our code so don't worry about understanding all of this because it's a bit out of context but the important part is that you can see this mdx provider here if you've used any if you've used mdx before you might recognize this if not it's just a provider that you can wrap around your mdx content and it allows you to set up certain configuration options here we pass in a components prop the expected value is an object that has a key of the name of a component and as a value the actual function that is the component and it makes those components all available to your mdx content for use here you can see the value that we end up passing into that tabs and tab are familiar options that we just talked to recently we can pass by this one and then i want to look at these three which are generated by this codeblock primitives function we'll be seeing the way that code block config and code tabs are used over the next couple minutes but pre really stands out among these other options these all look like the names of react components they're capitalized however pre is all lower case and it is also the name of a default html element if you pass the name of a default html element to the components configuration in an mdx provider it will actually override that default html element in the output with your custom component so what we've done here although you can't directly see it it's set it up so that pre-renders our custom code block component that way when authors simply put in a fence code block they will get as a result our enhanced custom component which is really cool i want to show off a couple other cool pieces of functionality that are part of this component in addition to the base functionality with fence code blocks we have extended this such that if you add this code block config component wrapper around it you can add additional functionality without interrupting the base syntax of markdown or making any changes to it in this case you can see that line numbers will add numbering to the left you can also highlight specific lines you can see three and five are highlighted and the rest are grayed out which is pretty helpful in certain longer code examples you can add headings or file names to code blocks which can really be helpful contacts as well this is also a really cool feature if you use the code tabs wrapper around two different code blocks it will separate them into tabs so you can toggle between different languages this feature can also be used with the codeblock config wrapper in order to combine features from both of them and finally you can also add a dark or light theme and these themes can also be combined with all the enhanced features as well as the tabs which is really great and makes for a super powerful and flexible code block component for our docs authors to make things nice and clear for users let's move on i want to look at a couple other components so this component is our hands-on lab component this shows up on hash corp learn and when you click on it you can see it opens this portal with a hands-on lab from a company called instruct i'm not going to go into this as it takes a minute or two to provision and set up but you can see that this can be sized up and down as you read through the guide and it can be hidden from the same button that you showed it from or at any other point in the tutorial it can be showed or hidden through a consistent ui panel this is again one of those things that's made trivially easy with react but would be very difficult if it was a custom extension to mark down so we're really grateful that we can do this so easily with mdx and it provides a ton of value to our users who are able in this case to actually open up an environment where they can use and tinker around with console live as part of the docs last one i want to show is this sentinel playground sentinel is a policy language for hashicorp tools that allows you to control who and when and how people can make changes to your configuration the sentinel team built this sentinel playground that lets you run and evaluate sentinel code and live edit and make changes to it which is another really powerful interactive tool for the documentation not only can you read about how it's used you can actually use it in line and see how the results are which is much more of a powerful learning tool i've covered a lot of components there are plenty more but we don't have forever so i want to move on to how we actually consume mdx we talked about how we use components but the way that the mdx actually gets rendered into our docs is another interesting part of our stack we built an open source plugin called next mdx remote that you might want to check out if you're interested in using mdx i want to show a quick example of how this works and we'll just go down to the main example what's interesting about mdx remote is that it runs out of get static props it doesn't rely on anything being in the local file system so here you can see we set up an example source of the string but this could also easily be replaced with an awaited function that calls to an api or reads from a database or whatever other data source you might have you don't need your markdown content to be local to your website they can be split up and this is very powerful as we'll see in a few minutes you can pass this source to a serialized function return it through get static props and consume it in your component into this mdx remote component which will render it for you and of course you can pass custom sets of components that are available for use in your source we'll get back to how this is relevant in a minute but i want to move on to the last part of this talks title which is mdx documentation at scale we've already covered the fact that we render thousands of markdown files through all these websites and get several million views a month so that speaks something to the scalability but there's another project that we're working on now and we're really excited about that's going to take this whole to a whole different level and this project is adding versioning capability to our documentation this may not seem unique or interesting or difficult but we've really taken it to a whole different level and absolutely made no compromises on the developer experience or the user experience on this feature and especially not the scalability and longevity so i want to talk a little bit about how we've set up this structure and hopefully this will be interesting for you all basically if you're a product developer working on one of hashtags products you might get to the point where you're ready to cut a new release when you push that release tag to github we have two things that happen on one branch we will pick that up and run a normal deployment through to and on the other hand we have a custom github action that looks at the mdx files that are actively in the repo at the time of the release and syncs those files contents into a database associating them with the release tag that was pushed now when the website needs to build a page it can use mdx remote inside of get static props to go to the database and ask for the right version of the docs from the files that they need in the database and render the content which is great perceptive viewers might be asking themselves at this point why do you need a database at all why couldn't you just go to the file system to get the docs and the answer is mostly around the bloat that is introduced by versioning if you want to be able to render 10 50 100 past versions of your products documentation and you want to be able to use the file system at deployment all of those files must be available in the repo at the time that you deploy so that means you're storing hundreds and hundreds and hundreds of copies of nearly identical markdown documents in addition to all the embedded images videos and anything else that are part of your docs in your repo over time that ends up being a very bloated big slow and difficult to work with get repo on the same note this thing would also happen to your deploy times so as you add more and more and more versions to your docs your deploy times will get slower and slower and slower because you need to render more and more and more content in order to get your site out the door our scientists and analysts did a study of the effects of what would happen if we were to implement this type of infrastructure and came out with this result if you build all versions every time that you release your doc site you'll end up with a seriously large chungus worth of a deploy time and a chunk is worth of a github repo and nobody wants that so we needed to figure out a better way to do this and the database is largely the key to doing that what we've done effectively is made it so that on the current version of the docs it will pull the content directly and render all of those as static however for any older version of the docs we leverage next.js's isr feature to dynamically render the page based off of the version tag that's necessary pulled from the docs database this way our git repo works exactly as intended it only has the current version of the docs and if you want to see old versions in the git repo you can go check out older tags it's the same way with our deployments it only deploys the current version of the docs and our build time stays fast and constant over time even as we continuously add versions and yet user is still always able to access stocks for any version that they need leveraging the power of isr this split between the docs content and the rendering functionality also enables a really interesting optimization for us i mentioned earlier when we are outside that our product authors like to make changes to the product code and then also make changes to the documentation as part of the same pull request this is a nice workflow for them that makes perfect sense but if your files and your website are bound together in the same place because you rely on the file system in order to render it this means that your website needs to live in the repository for your product code this creates a lot of difficulties since the website structure is effectively a different project and so you have pull requests flowing in for making performance optimizations to the website in the same place that pull requests are coming in for making changes to the actual product code which is written in a completely different language separating these out to two different places has a lot of benefits and helps to clean things up and retain a lot of sanity and we're easily able to do that using mdx remote and our content sync scheme so now we can keep just the markdown files and the product repos and product authors can still use the same workflow to update them whereas we can pull out all of the logic for actually building the website and all the javascript and typescript pages into a separate repository that the web development team can work on when they need to make changes the structure of the website there's a lot more here to talk about we've only scratched the surface of this structure for example we have frameworks set up that will transform our content if we make breaking changes to any of our components or if there are breaking changes that come into mdx so that older versions are no longer are not no longer compatible i should say with the current website we have workflow set up for how product authors can make changes to older versions of the docs if they notice a typo or something need to adjust and there's tons more we're super happy to talk about it we're loving this project it's super interesting for us and so feel free to reach out and ask about it and we're happy to chat if you're watching this live at the conference we'll be in the discord answering questions all right well i think we've gone deep enough into the weeds for now let's wrap this up and we'll go back outside to do so [Music] if you're thinking about building a documentation site that needs to scale up over time next js and mdx are great choices you get a ton of flexibility extending markdowns native capabilities and a nice clean interface for your developers and authors using mdx oh hi [Music] and with isr from nexujs you can easily scale up your content no matter how much it grows or how many versions you need to support these tools make my team feel confident that we'll have a stable foundation for our docs for the company's growth for many years to come that's pretty much all i had so thanks for tuning in before i go a couple of shameless plugs first of all if this type of problem seems interesting to you we are hiring at hash corp so feel free to reach out and second if you enjoyed this lovely scenery check out serenbe the little town i live in outside of atlanta we could always use more nice and friendly people here thanks for tuning in and enjoy the rest of the conference bye [Music] imagine that you could build an xjs app with a database without having to worry about writing sql scaling or managing infrastructure what would that look like i hope that today's talk can give you a glimpse into the future of databases in serverless made easy i'm daniel from the prisma team but first let me begin with how we got here over a year ago we launched prismaclient to general availability a next generation orm for nodejs and typescript that helps you build faster and make fewer errors when working with databases since then we've heard from thousands of developers about how prisma is helping them build and evolve their data intensive apps rapidly today there are more than 40 000 prisma developers many of whom using it with nexjs and this is no surprise while next.js makes app development fun and easy prisma makes it databases fun and easy to use since releasing prismaclient to in june last year we've worked tirelessly to make prisma even better we released prisma migrate to general availability and prisma migrate helps you evolve your database scheme at every step of the development workflow from prototyping to production we also expanded our range of supported databases and we now support postgres mysql sqli azure sql sql server in general availability in mongodb and planet scale in preview finally we also launched the prisma data platform which helps you start collaborate and scale your project this is all part of our vision to liberate data and enable teams to take applications from prototype to billion users scale without compromise on productivity security or compliance but there was one issue that kept on coming up amongst nexjs and prisma users using databases is tricky database connection management in serverless was the main problem one of the promises of serverless is easy scaling with zero operational overhead of maintaining infrastructure but the reality is that using databases in serverless is tricky database connections don't scale as easily as serverless functions do relational databases that can handle thousands of transactions per second can have a hard time dealing with 30 concurrent serverless functions connecting to it and so today's talk will be split into three parts in the first part we'll see how prisma gives you the best dx when working with your database in the second part we'll see how prisma is the perfect companion if you need to work with a database in an xjs app and finally in the third part you will learn more about our vision for the future of databases and serverless and this includes the prisma data platform the prisma data proxy and finally prisma with serverless at the edge and so i'll keep this talk hands-on with real code samples so let's get right in prisma the best developer experience for databases there are three pillars that make prisma so easy to use with databases the first one is the prisma schema a declarative single source of truth where you define your data model can be written by hand or populated by introspecting an existing database the second is type safety and type safety is a way to ensure that all application code interacting with the database can only do so safely for example attempting to write to a non-existent database column will raise a type error that you can immediately see in vs code zero cost means that you don't have to define typescript types like in most orms with prisma these types are generated for you moreover the types that prisma generates give you rich auto completion unlike any other orm the third and finally is code generation and the idea here is that you should only need to write things once prisma saves you time by auto generating two artifacts that you would otherwise have to write by hand the first is the fully typed typescript client that is known as prismaclient and the second are sql migrations which are generated for you based on changes in your prisma schema so let's see how all of these pillars work in action here i have a very simple prisma schema that defines a single model with prisma a model maps onto a database table and this is a schema a data model that will be used for a blog and so what we're going to do now is we're going to do a couple of things we're going to evolve this schema and then see how we can use that in an xjs app and so to start off we're going to extend the functionality and extend this data model to include commenting functionality so that every blog post can have multiple comments associated with that so i have vs code here with the prisma vs code extension which gives you auto completion and helps you when you're modeling your problem so in our case we want to define a comment model we want it to have an id that will be the primary key and we also want it to auto increment we're going to define a comment field of type string this will actually store the comments and we also want to define the relation and for the relation we're first going to define the foreign key so i will call this post id of type int and then i need to define the actual relation field that will tell prisma how you can fetch those relations in prismaclient and so for this i'm going to name it post of type post now if i use the format of prisma it'll automatically add the back relation and there we have it so i'm going to rename this to comments so that it makes sense in terms of the fact that it's plural and there we have it so we've just finished extending our prisma schema by adding a new model which will be the basis for a new database table and now we're going to use prisma migrate in order to generate a migration so that the database schema is aligned with our prisma schema and so this is really a simple as the npx prisma migrate dev command this will look at the changes in our prisma schema compare them with the database schema and generate the sql based on this and i'm going to call this migration add comments and there we have it our migration has been generated for us and our database is now in sync with the schema we also had prismaclient generated for us so that we can already access and interact with the database in a type safe manner including this new comment table that has been created for us so let's take a quick look at the migration and here we have it creates a table and it adds a foreign key which references the post table okay as a next step we're going to define a seed script and a seed script is a way to populate your development database with some initial data that makes it easier to build and develop so for this i've already defined an initial file which imports prismaclient and in this main function i'm going to use prismaclient in order to write a post with some comments to the database so let's take a look at how that works equals weight prisma dot and you can already see how you get this reach auto completion i already have the two models that i've created in the prisma schema and this is all coming from the generated code that was automatically generated after we ran the migrate dev command so in our case we want to create a post and here we have all of the different crud operations that we can do in our case we want to use create because we're creating a single post and here too you get auto completion and you can already see the squiggly lines and this squiggly line is because we're missing the title and the excerpt which we defined as required fields in the prisma schema and so let's start with the x excerpt and we'll define a title and you can see that the squiggly lines are gone because we already defined the required fields and now we want to also create related comments and you can see how easy this is with prisma using the auto completion we have these comments and here we want to create and we're going to pass it an array and comment wow if i create another comment and i pass a number to it what i expect to get is a type error and this is because we've defined this as type string in the prisma schema and so here we're getting this type error to make sure that we're using the right type and there we have it the final step is to make sure that we've defined this uh seed script in the package json which i've already done and you can see that here this is the command and so let's go ahead and run this seed script and for this i'm going to use the prisma db seed command and there we have it our post and related comments have been generate created for us in the database let's take a look now using prisma studio a modern gui for your database what that looks like in the database from the browser to do this i'm just going to use the prisma studio command which will start a server and there we have it our post and the two related comments we can also go ahead to the comments and add a new one and here we can pick the post that we want to relate it to and save it and there we have it so that was prisma in action and let's just recap what we did we extended our prisma schema by adding the comment model we then use prisma migrate to evolve the database and to update the database schema we then use prismaclient to define the seed script we seeded the database with some initial data and then finally we used prisma studio in order to interact and view our data from the browser in the next step we're going to see how we can use prisma with nexjs part two nexjs and prisma in this part you're going to see all the ways that you can use prisma to serve your data needs with next js so this brings us to all the ways that you can fetch data with next js and essentially there are three ways at build dime using static generation with get static props this is suitable for data that doesn't change often like a blog you also have the option to fetch data at request time using server side rendering with get server side props this is really useful for highly dynamic data that you want fresh for every request and finally using api routes with client-side fetching and this is really useful if you want to extend your client-side functionality with some more data and the good news is that you can use prisma with all of these three approaches so let's take a look at the code here we have the same schema that we've defined before and an xjs app built and based on it and here we have the index page that we can see here and as you can see i'm using get static props and i'm making a prismaclient call in order to fetch the posts ordered by id in descending order which will ensure that the most recent ones show up on the top also worth noting that here i'm using the same type that is generated by prisma as the type for the props and this ensures that we have end-to-end type safety so for example if i try to log one of the posts i immediately i get the same auto completion as we get in the client side so that was our index page and we also have the page to show individual blog posts and for this we're going to show the server side rendered version and the equivalent code and here we're using get server side props which means that it will get rendered for every request and here we're using the find unique because we want to get a single individual blog post we also taking the id in the url parameter and using that to narrow our query to an individual blog post and you can also see how i'm also including the related comments ordered by their id and ascending order which means that we can in a single query prismaclient query we can fetch both the post and the related comments finally we also have these likes functionality that allows you to like a page and this is using api routes and for this let's take a look at what the endpoint looks and so here we have this handle function and here we use the prisma.postupdate method in order to increment the number of likes by one and so those were all the different ways that you can use prisma to fetch your data and i want to make a quick note about another optimization that you can do and that is called incremental static generation and the idea behind incremental static regeneration is that it's like a hybrid between server-side rendering and static generation so the challenge is if you add a new blog post to the database you now have to wait for the whole build to finish for that to be reflected and if you want those changes to be reflected more quickly you can rely on incremental static regeneration the idea here is that you define a revalidate configuration option in the get static props and what happens when a request comes in it serves whatever's in the cache but in the background it goes ahead and re-renders the page and so that way you don't have to trigger a new build for every time something in your database changes so let's go back and take a look at what that looks like in practice i'm going to use the index page because incremental static regeneration is used for pages that define get static props and really it's as simple as defining this revalidate and the number of seconds after which it will regenerate when a request comes in and so if i save that that will ensure that the index page is always fresh with data from the database so that was incremental static regeneration another great optimization that next js offers and so to sum this up prisma can be used for all of your data fetching needs in next.js in the next part we're going to start looking back at some of the challenges of serverless and how we can solve them with the prisma data platform this brings us to the future of serverless in this last part of this talk the prisma data platform in this part we're going to look back at some of the challenges of working with databases in serverless and how the prisma data platform can help you solve those so for this we have an ask me anything page that allows me to answer questions with voice the page has been built with next js prisma mysql and we're going to see how the connection management problem arises and so this is a very similar page in terms of the end points you can you can ask questions you can react to questions by liking them and also i can go ahead and record answers using voice right from the browser i love next js and prisma and i can upload that and then it becomes visible to users okay so let's take a look at the code for this so for example here i have the reactions endpoint that is called every time i click the like and all it does is it increments the number of reactions we also have the create question endpoint which just creates a question in the database using prisma and also the get questions endpoint which is used to render this page to show all of the questions on the initial load and this is using server-side rendering i should say okay so when does this problem arise my database has a connection limit of 40 connections that means that as many as 40 requests simultaneously can start causing the database to fail which means that those requests will fail and the user requests will fail in order to really emphasize this i'm going to run a load test and i have the load test defined here and essentially what this load test does is it makes three http api calls to get the questions to submit a question and also to increment the likes on a single question and so to run this i'm going to open up my terminal and here i have it configured and it's pointing to the same url as the deployed app and what i expect to see when i run this is that many of the requests will fail and this will happen as soon as the database connection is exhausted and i also should say that i'm running 40 virtual users that means that in this load test it'll be running this as if 80 users are making this request at the same time and as we can see only 90 of the get posts succeeded uh 88 of the create question in 87 um to to like a question and so our goal is to reduce this to zero because we're building production apps and we want them to run reliably and so before we do that let's take a quick look at this connection management problem with a nice animation with serverless each user request starts a new serverless function that opens a connection to the database the problem is that during traffic spikes you will quickly exhaust your databases connection limit this leads to failed requests and lost data that's why we've built the prisma data proxy which makes it a breeze to use databases in serverless with prisma it's a managed service that sits between your serverless functions and your database and handles database connection management for you that way you can scale your app without crushing your database and without user requests failing and today it's available in early access at cloud.prisma.io now that we have a solid understanding of the connection management problem with serverless we're going to import our project into the prisma data platform and then create the prisma data proxy and see how it can solve the connection management problem and hopefully we'll do another load test and see how all of the requests succeed so let's go and open up the onboarding page i'm going to name this project ama prisma i will import the repository and tell it to use the main branch and define the schema path and we're going to use i'm going to use the existing database and set it to the frankfurt region that's great the connection string for the data proxy has been created for us which means we can go ahead to the versal configuration page and update the environment variables so we'll copy that over and i will open up my environment variables page for the project and here you can see we have this database url and we want to look at the production one and so we're gonna go and change that to use the prisma connection string and save that and we will also need to update another one called the prismaclient engine type to tell it to use the data proxy and i should note at this point that by using the prisma data proxy you're actually making the serverless function even smaller because the prisma engine doesn't need to be packaged with it okay so now that i've gone ahead and updated these environment variables i can redeploy the app and let's look at the main one the production and we'll redeploy it and this will use our new connection string now that our build completed let's check it out so let's first open up the app and as you can see it's working it's also showing all of the questions from the load test and let's run a load test now to see if it still runs perfectly and if there are any failed requests [Music] and as we can see all of the requests succeeded we just saw how the data proxy helped to solve this connection management problem and i'm excited to share that you can try it out today it's available in early access at cloud.prisma.io and if you have any questions be sure to go to ama-prisma.versal.app and drop your question i'd be happy to answer those but wait there's more database connection management in serverless is tricky and as we saw the prisma data proxy solves this problem but the prisma data plot platform offers much more than just a data proxy let's take a look at some of the functionality it gives us so here we have the prisma data platform and what you can see now is the data browser and the data browser works very similarly to prisma studio except that it's hosted in that it allows you to invite collaborators to view and also edit data in the database so for example here i can update the status of questions i can look up the users in the database in addition to all of this functionality i also have the ability to write queries right from the prismacloud platform and this is using this query console so if i open up the query console i can issue for example a query to find many amas and here in this query i'm selecting just the id and the question and of course i could also use order by here and even here you get the same auto completion that you used to so for example we could order it by created at in descending order we could also order it based on updated dates in any order that we like and so this is a bit more of the prisma data platform and of course we have a lot more coming in store for you so stay tuned before i leave today there's one more thing that i'm excited to share and that is i'm excited to announce that prismo orm is the first orm to support relational databases in versal edge middleware and cloudflare workers here's the thing with serverless runtimes as we saw connection management with databases can be challenging and while the prisma data proxy solves that problem there's another problem namely cold starts initial requests to serverless functions take time to load which leads to bad performance today with the advent of versal edge functions i'm now excited to share that it changes because you no longer have to wait and so i've already implemented a middleware function in this ama page to show the number of visitors so for every request that is sent to this page middleware function updates the number of visitors let's take a quick look at the code for this so here we have this middleware function and as you can see the structure is a bit different this is because it's using cloudflare workers under the hood which is a completely different runtime that doesn't rely on nodejs here we make sure that if it's the root path we continue otherwise we just continue with the request and if it is the root path we'll take a hash of the ip and then store that in the visited table we also have the visitors endpoint which lists a count of the number of visitors from the last five seconds in sorry the last five minutes and so this allows us to provide this rich functionality with no compromises on load times and in the near future we expect to see both server side rendering and static rendering to also support versal edge functions and so i couldn't be more excited to try all of this out and i invite you to try this out support for reversal edge is now in early access and you can try it out today before we wrap up and i leave you i'd like to summarize what we did today in the first part we look at how prisma is the easiest way to work with databases in the second part we learned about all of the different rendering techniques and ways that you can use prisma with nexjs and how prisma is your perfect companion if you're building database backed next.js app and finally in the last part we looked at some of the connection management problems and the future of serverless and databases with prisma and so before we leave i'd like to thank you for tuning in today and i'd also like to thank our community for having been with us on this journey um and trying out prisma and providing us feedback this wouldn't have been possible without you and so thank you very much [Music] hello everyone i am saad and today i am going to talk about the elephant in the room a particular asset of your website that is responsible for making it either slow and crappy or super fast yeah i'm talking about no other than images and how if they are not optimized your site's performance literally goes to hell so before i begin let me introduce myself my name is saad i am a senior year computer science undergrad student currently working as a student expert at rapid api i am a huge fan of what open source stands for and i love building open source softwares in fact i have personally authored 20 plus open source tools that are used by thousands of developers out there i love giving back to my community my love for it took me to get accepted into different community based programs that google and microsoft if you want to reach out to me i am most active on my twitter and you should also definitely follow me there so now let's talk about image optimization i have built this small demo using nextgs with simple html image tag and then the image component of nextgs in using this demo i'm going to show you how the simple image stack works what are some of the disadvantages of using the image tag and i am also going to show you the you know working of the image component of nexus and some of the advantages of using the image component over image tag so without any further ado let's jump in so i'm going to click on this image button it is going to take me to another page where i am loading a bunch of images using simple image html tag so i'm going to click on it you see that there are a bunch of images in here they are being loaded on the screen by the way all of these images are being taken from unsplash.com if you want to visit so i'm going to go back up there so there is how it works button i'm going to click on it it is going to take me to this page so let's take a look at the inner working of image tag you define the source and alt attributes of image tag the client requests the server for the image using the provided source the server sends back the image in its original format for example if the image is a jpeg it is going to send back a jpeg if it is a png it is going to send back a png the image tag then renders the image with its original size it is not going to take into account the user's browser or the user's viewport if the user is on a mobile device it is still going to load the same image so this is how it works let's take a look at some cons of using the image tag and the server requests all images at once what does that mean is that for instance you have an image at the very bottom of the page and you have just loaded the website and the images that image is at the bottom and you don't necessarily want to go to the bottom of the page yet the image has still been loaded on the screen the client has still requested the server for that image even if you don't go to the bottom let me show you if i just go back here go back to this area and open the developer tools let's go to the networks tab you see now i'm going to hard reset this page and you will see a lot of requests here and all of these requests will be related to getting the images from the server you see there are a lot of requests here some of them have been successful some of them are still pending but yeah there are a lot of requests in here even at the image that is at the very bottom of the screen is being you know requested from the server even if i don't want to go to the very bottom it is still being requested from the server so it is actually wasting users bandwidth and it is also at the same time decreasing the site's performance because all of the images are being loaded are being requested from the server which is sure which should not be the case because let's say the user don't want to see the very last image on the screen so this is one of the problem with this image tag so let's close this and go to how it works again so let's go to the bottom of the page again and you see there is no lazy loading with simple html image tag what it means is that client should request server for an image as soon as it is about to appear on the viewport it shouldn't request for images all the images at once this issue is basically related to the first one so yeah there is no lazy loading with simple html image stack and now let's take a look at the last one layout shift occurs so this is actually cumulative layout shift that occurs with simple html image tag so what happens is let's say you have a huge image in your website and the image is in the middle of some content when the image is loading the content is going to appear side by side as soon as the image appears the content is going to move away from each other so this is called cumulative layout shift and you know this it is one of the issues that arises with using simple html image stack so this is the image tag some of the issues that we saw was there was no lazy loading the server requests all the images at once even if the user doesn't even you know maybe don't even need those images there is cumulative layout shift that occurs using the simple html tag so now let's go back to the home page and talk about the image component of next.js so i'm going to click on this image button here it is going to take me to another page where i am loading a bunch of images using the image component of next years so let's do that you see this image is blurred i'm going to tell you about this later why it is blurred almost all of them are blurred right now if i go back up there you will see that this image has been loaded and this one as well this one as well and now if i go down almost all the images have been loaded some of them are still haven't been loaded and they are still blurred i'm going to tell you about why they are blurred a little later so let's go to this how it works so let's take a look at how you can use image component in next year's you provide the image component with the source and alternate text a width and a height of the image the client then requests the server for the image using the provided source the server sends back the image with webp format the image component then renders the image according to the viewport let's take a look at the component in you know in action so i have this code here so by the way this is the code for this you know this application you are seeing so this is the image component i have a source an alternate text a quality i am going to tell you about this later then there is width height and then again i'm going to tell you about these two as well you know a little later uh but these are placeholder and blur data url and yeah so let's go back and scroll down to take a look at the pros so the first thing that you will see is that next year's optimizes image by adding source set so what is source it so you know earlier i talked about how you know the image stack doesn't care about what the viewport of the user is it just gives the image in its original size next just doesn't do that the image component of next.js automatically adds the source set even if you haven't added it yourself so let's take a look so let's go back to the previous page i am going to then inspect this picture and you will see that i have a source set attribute here i haven't added this attribute myself next gs has automatically added this using the image component i can even show you you see i don't have any source set attribute i have just source attribute here so if i just go back and i'm going to show you one other thing as well you can see that i have a file size of 16.3 kb and you know if i just show you the size of the original image it is 446 kb it's like 500 kb image and it's been you know optimized to 16.3 kb using nextgs so what does the source do it actually renders different size images based on the device pixel ratio of whatever device you are using to see the application let's say you are on a laptop then in that case it is going to render a larger image let's say you are now on a mobile device it is going to render a smaller image now so it is actually optimizing images based on different screen sizes and different screen resolutions so let's close this now and go back to how it works scroll down so let's take a look at the second advantage now next year's image component serves webp format if i scroll up you will see that i have written the server sends back in the image with webp format so what is this format it is actually the recommended image format that you should use in your website google states that webp typically achieves an average of 30 more compression than jpeg and jpeg 2000 without loss of image quality and apple has also recently added the webp format support in the safari browser last year so let me show you how the server is sending you this webp format let's go back to the previous page open the developer tools here go to the networks tab now if you scroll down you will see images are being you know requested from the server and the type of them are web b so let's close this and go back up here and go to how it works page and scroll down so the next thing is next js image component prevents cumulative layout shift earlier i explained to you what cumulative layout shift is and with next year's image component you can prevent this what happens is if you are using a nexus image component the content is not going to be appeared side by side in fact it will have a space for the image where the image will come as soon as it renders on the screen so the next one we have is lazy loading what is it let's take a look uh i'm going to go back to the previous page so i'm going to hard reload this page now and you see that this is now blurred now i'm going to inspect element this page go to the networks tab and now if i just scroll down as this image appears in the viewport you will you can see that the client has request a server for this image you can see it's pending right now and now if i again scroll down you can see that client has again requested server for another image and again scroll down as i'm scrolling down the client is requesting servers for more images i go back up you can see that with images with 200 status have been rendered on the screen so this is actually lazy loading the client has not you know requested all the images at once from the server in fact as soon as the image is about to appear in the viewport the client is you know requesting that image you can see all of these are at 200 status and all if i go down there are more images that are being requested from the server and yeah you can see that so this is actually what lazy loading is and it greatly affects the performance of your web application one more thing that i should add is if you want an image to appear instantly as soon as the website loads you can also do that with the image component all you need to do is provide the loading prop and set its value to eager and you will have an image instantly load as soon as the website load so let's now close this and go back to how it works so now let's take a look at another advantage so with next year's image component you have built-in responsiveness in your images let's take a look at what it means i'm going to go to the previous page and now again i'm going to inspect element this page let's you know select this option and from here let's go with responsive if i show you now what happens is you know when i have a wider screen i have this image and as soon as the screen gets small the size of the image changes along with it so this is built-in responsiveness in next year's image component and you can also take a look that i have not added anything in next year's image component that is related to responsiveness and it is handling this itself so now let's close this and go to how it works page again so the next thing we have is placeholder prop option earlier i said that i am going to tell you about that blurry effect later and this is it uh if we go back and if i hard reload this page you will see that there is this blurry effect here what's happening is right now the client has requested server for this particular image and while it is waiting for the server to give it back a response it is actually adding a placeholder and i am using that particular image that is being requested from the server as a placeholder as well so it's being rendered on the screen and you can see if i just scroll down there are many there are some blurry pictures and they are just being you know rendered on the screen with the original images let's take a look at how you can do this in your next year's application so i have this image component here i have what i need to do is now i have to add this placeholder prop and give it the value of blur and the next thing is you need to give it a blur data url it is going to take the url of the image that you want in place of the you know placeholder so you need to give it the url of that image so now let's go back to the how it works page scroll down and so we have the last one that with next yes image component you can set the image quality of an image the default image quality is 75 like if you are not setting the image quality it is going to be 75 for any image that you insert the range is actually 1 200 and you can select any of the number between this range and the nexus is going to automatically you know optimize your image according to that number so this is it folks i hope you like this talk and now you know the difference between the image tag and the image component of nextres and now you're going to use the image component of nexus to make your websites even faster than they are right now i'm going to share the link of this small demo that i created on my twitter so if you are not following me there you should definitely follow me i think that is pretty much it until next time see ya [Music] hello everyone i am maida batul i am a developer advocate for content and community for the last 10 years i've been leading several content teams and have published hundreds of advanced guides for developers so basically i love to translate complex web development concepts into simple mental models on the community side i'm serving the official wordpress marketing team as one of their lead representatives and i'm also one of the digital ocean navigators my most recent work is my ebook and there is an attached video course to it it's called content for developers at righty dot io where more than 1300 developers are already learning these days i am most active on twitter where i actually create content for developers so twitter is like my mini blog so feel free to follow me and my work there my twitter handle is at maidabatool and let me tell you that this is going to be my first next js conference talk and i'm super super excited about it i hope you all are going to have a great time in the next few minutes who would have guessed next years could be used to write an e-book well if you ask me initially not even myself so today i'm going to share the story of how i got fed up of formatting issues and whatnot with google docs when i was writing a book called righty dot io that was actually meant to help developers to improve their technical writing skill set and finally how i ended up building an entire web application for this ebook with next year's and wordpress which is of course blazing fast and has a dark mode as well coupled with this there was some my own preferences other than the light and dark modes that included optimized layouts a performance structure and this seemed almost impossible to achieve with a traditional book writing framework so guess what eventually i decided to build it with next years and react components and dang it was my best decision so far all of this took care of my front end and of course the book writing experience itself but i needed a robust solution for back-end that could help me maintain my course platform without any hassle so for me there wouldn't have been a better choice than wordpress now things were getting sorted and my ebook infrastructure was ready to be executed the final shape was a strong backend built with wordpress a cutting-edge nexus powered front-end and of course a final deployment on versailles so let's find out how all of this was made possible just in case you don't know then let me tell you that wordpress supports an out of the box headless api where i used its rest api to fetch the content so what i mean here is that i can still use wordpress like we all generally do for example using the wordpress admin panel and other related content management tools but the different part is that now i'll use it only as an api for my content where next js will pull data in to build my website so going with this headless wordpress approach it gave me an overall control over my content and with that came the freedom to build a completely custom front end however the process of configuring and designing that front end is generally not always easy so i'll quickly walk you through how wordpress is helping me maintaining my course platform with next year's so wordpress is my database which is better tested and you know it has an ecosystem of more than 50 000 plugins which allows me to perform tasks like authentication roles management audit logs and a number of other things and not only this i can track and record several other analytics like the number of times my book has been downloaded which specific sections of the book were more popular in terms of readability and whatnot so when it came to building a custom front end next year scattered the cause exceptionally well it helped me create a beautiful high performing front end we all know that next year's prioritizes performance so my goals which i had for my ebook they aligned really very well here so if you ask me then next year's offered an exceptional developer experience which of course uh sequentially led to a fantastic user experience there were no formatting issues i had a completely optimized layout and again a free web version on versa as well but i missed all of this i wanted my course platform to outclass itself in terms of paid speed and performance and once again next year's perfectly served the purpose so here's my take about how next year's helped me write and build my best selling ebook since we all know that nexus uses automatic code splitting to only load the javascript and css so my front end was blazing fast had i not used nextgears the browser will have to download several unnecessary scripts that would significantly affect load times so at present if i would share some stats then my course platform's average speed is generally between 0.8 and 1.5 seconds which gives an incredible user experience so i just mentioned that i wanted my course platform to be highly performant both in terms of speed as well as better search rankings and we all know that performance is a major factor in deciding the seo rankings sometime back it was only the page speed that was the deciding factor for the browser rankings but now like trends have slightly changed today google has set another benchmark other than page speed as a ranking parameter which is called as core web vitals so when i decided to opt next years i was truly amazed to find that next js is fully compliant with this new feature set of browser rankings as well and today when i analyze my site traffic it's like more than 60 from the organic search so this means that nexus is helping me climb all those important search ranking steps just in case if core web vitals is a completely new concept for you then let me quickly explain the three matrix on which it is based on so here are these three last contentful paint which is the lcp and it's the time to get the largest element on the page visible within the viewport next is the first input delay the fid and it is the time when a user first interacts with a web page after entering it to the time when the browser can start processing that interaction imagine like signing up for a newsletter on some website and last is the cumulative layout shift the cls and it measures your site's overall layout stability these three metrics may all your site's loading interactivity and visual stability so i wanted all of this in my web application this means that if my website could get an impressive score for these three parameters it would ensure a smoother web experience both for my users as well as for my seo rankings generally what happens is that whenever you decide to jump to some new framework they are notorious for having like steep learning curves honestly next year's didn't give me a tough time at all it is designed in a way that makes it super easy to use there are so many features that are just integrated automatically like compilation and bundling like i've mentioned my next js based ebook app has both a light and a dark mode i just created an automation that allows me to render light and dark mode pdfs along with other formats like epub so here are the performance results by lighthouse and you can see they are super impressive i haven't done much optimization there this means that without employing any specific optimization techniques the website is performing exceptionally well and the credit all goes to next years of course here are some detailed performance scores for the core web vital metrics which are again incredibly awesome next is very conveniently takes care of all my seo needs regarding layouts react helped me to dissect the web page into series of components and as you can see in this slide every possible section of the website is handled via a separate react component the bio pricing table the testimonials each is built separately this architecture makes site assembling maintaining and debugging super easy for me and if you want to see the real picture of how my web app renders in light and dark mode then there is a representation for the dark mode and here's the light mode honestly let me tell you that when i started working on this idea of writing and selling an ebook i considered it an easy task that would comprise of a simple google docs file but that was not the case especially because my target audience was developers so i completely owe it to next year's that has helped me refine my ebook all together to a next level developers who have purchased a copy really like the entire experience from onboarding to the final stage of reading so to sum things up let me tell you that i am using next years both to empower the marketing stack through the front end landing page and of course the actual web app which is my ebook that is built with next years and react components that's pretty much about it i hope you had a great time learning through my experience and i hope uh you had this completely new perspective that it could help to build you a cutting edge and blazing fast book writing infrastructure if you have any questions feel free to reach out on my twitter account i would be more than happy to connect with you there have a great day peace [Music] hi my name is patrick zavatsky and i am the cto and co-founder of sailor commas sailors graphql api empowers developers to solve difficult problems more easily we've got strong support for omnichannel we offer an open source and cloud option and sailor is in production at global scale it's also the world's most popular open source commerce platform today i'll explain why headless commerce emerged why modern complexities require headless approach to commerce and how commerce apis like sailor can leverage next.js for better performance i started commerce development in 2009 and at that time the platform seemed to have come as solved the monolithic approach with one massive back-end rendering a single front end brought lots of efficiency platforms competed at being feature rich one-stop shopping for all things commerce software but the architecture requires innovation to happen in platform and as platforms fell in and out of favor teams had to either wait for new innovation to come from the vendor or face the time-consuming and expensive platform to the shiniest new solution it was never ideal but the giant monolith worked quite well until commas needed to be available everywhere the future of comos is decentralized a headless architecture is the only path to decentralization which is why bran's pushing bux envelope like the lush team are making commerce choices based on openness and performance rather than on our checklist of cookie cutter features over the years we moved from architecture that look like this to building sites that look like this at first glance having everything built into a single monolith is attractive but the accelerating pace of innovation makes it obvious no single platform can keep pace indefinitely in 2021 feature completeness is a moving target pursued by hundreds of independent teams so today's best platform is the best team player you see headless is not ground-breaking tech in and of itself the excitement is around what it enables and what headless enables is rapid adaptation rather than replacing a slab of code every three years tech teams can meet business needs on a continuous basis there's the waiting on a platform the team is now able to solve its own problems the coupling the front end from the back end with multiple backends separated by concern gives you the ability to scale which finally takes commerce everywhere and headless benefits increase with complexity several factors makes commerce complex there is a need to go to new markets quickly the different currencies languages and shipping providers but also regional requirements on everything from business ops to marketing tools to social media platforms and even opinions on what makes great ui ferry by region so keeping commerce fresh means constantly changing requirements and the complexity of modern commerce means platforms must become more sophisticated at sailor platform sophistication means leveraging innovation from the centralized teams adapting rapidly to changing commerce requirements and easing the path to global scale but global scale means performance is held to the most exacting standards there is a direct connection between page speed and sales revenue plus performance optimization means more efficient use of resources which becomes critical during major events like a black friday sale and performance is exactly what next js brings to the table let's start with images crucial to how products are perceived in commas when you look at lighthouse results unoptimized images often stick out as a sore fund because sending a 30 megabyte image to the mobile user is not what you want to do you must only send what's absolutely necessary but what's absolutely necessary depends on the user it changes with each session as we must load high resolution images for higher density screens we must serve next generation formats like web p or avif to take advantage of better compression and we must be ready to support future advances in imaging like taking advantage of increased fidelity of hdr screens for example ideally you don't want your staff doing this manually they'll either hate doing that or not do it at all next.js offers a way to automate all of this with the image component and the image optimization pipeline that you can customize so nexjs will take the source image and generate all of the required formats and it will also generate the html code required to select the optimal image based on the user's browser screen density screen size etc but even with images out of the picture you're not yet free of performance concerns because it's important to get accurate information about your user's experience so it's not enough to make sure your html is delivered quickly because experience may depend on other external resources and factors so it's impossible to obtain those metrics on your end and you must measure where the metrics are available which is in the browser with things like network latency fonts or external scripts it doesn't matter if you've cite renders in 20 milliseconds if the user has to wait another five seconds for the fonts to load luckily next js analytics can collect all of these for you but to measure you need to first bring traffic to your site and no one will visit your page if they are unable to find it so far google is the only search engine that supports react natively which means by rendering everything in the browser you could be missing out on entire countries or even continents where the dominating search engine is simply not google this means we need to do some pre-rendering and the easiest way to solve this is with static site generation an ssg does work great with maxjs unfortunately it also has a major limitation because every time your data changes you need to rebuild and redeploy and data does change often in commas because prices change products sell out sales start and end and there's a physical limit to how many pages you can generate because if generating a single product page takes 100 milliseconds then rendering a million of those would take more than a day so we need to take a step back and consider server-side rendering and now ssr does solve the problem of data freshness while keeping the seo benefits of ssg but it also sacrifices the benefit of only rendering each page once which can actually result in the site being slower than if everything was rendered in the browser so a hybrid solution would be better we could pre-render some of the pages like the most regular products and then render everything else on demand next.js allows us to do just that by using the fallback mode the most popular products become part of a static build so they always load quickly but it's not a complete solution yet we still have the problem of data changing which requires us to discard all of the previously rendered pages but text.js can also help with that the cache invalidation api allows us to only cache each page for so long and once that time is up do a background check to see whether the page needs to be updated those two features combined with ssr form a pattern called incremental static regeneration but at sailor we believe we can do even better than that so together with our cell we are working to make invalidation real time so you could have very long cache times for your pages with it changed to the data being reflected immediately stay tuned for future announcements around this area and next day solutions to heart commerce problems like image optimization ux metrics seo isr and soon to be real-time isr are important enough when you're on a single website but in our omni-channel world with multiple teams working on multiple storefronts all those people constantly updating the information necessary to render your pages using nexjs to move towards real-time is essential but real-time caching validation is not the only thing on our radar today nexjs announced another feature edge functions allow you to process requests even before they reach the server and for commerce that means easy a b testing it also means an easy way to gradually roll out features based on either time or geographical area but as my time here is limited i've only scratched the surface of what next.js makes possible so key takeaways modern challenges mean a more sophisticated approach to commerce first it must easily incorporate innovation from the centralized teams second it must adapt continuously to business requirements third it must deal effectively with the new omnichannel commerce everywhere reality and finally it must deliver breathtaking performance sailor handles the decentralized continuous adaptation and commerce everywhere requirements with its vast graphql api sound apps architecture and powerful omnichannel features but truly breathtaking performance requires next.js together with nextjs sailor delivers the most sophisticated solution to modern commerce and like versailles we're building in the open but as a developer i know you'll want to test that claim yourself so we've made it easy you can go to sailor.io nextjs 2021 where you will find everything you need to get started from a comprehensive sailor tutorial to a complementary zero cloud sandbox environment and more on non-technical seller benefits like a dashboard your team will love a cloud option with easy to understand pricing and details on cloud support options i'm going to leave you with a quick run through our tutorial which shows how to put the concepts i've discussed in practice with sailor and nextjs even if you lack experience in commas you will be able to follow along at your own pace you'll start in the command line to install the necessary components then you'll learn how to use sailor's powerful graphql api one thing you will notice right away is that sailor handles a lot of the complexity for you bring you to focus on vital ux components like beautiful product pages and lightning fast search finally you'll implement the next js optimization techniques i've discussed previously like image optimization and isr to achieve truly breathtaking performance together with ourselves we're building the future of commerce thank you [Music] hey y'all my name is lauren i do devrel at sanity.io and we're a platform for structured content um we help you manage and deliver your content however and wherever you need um it can replace a traditional cms and let you treat your content as data and so that you can flow it over apis today we're going to talk to john wheeler and he's a senior product marketing engineer at envision he's been working with sanity since around 2019 and he started to modernize the envision marketing stack um beginning with the legal pages and then moved on to some other things so john how are you doing i'm doing well um excellent yeah happy to be joining you here i'm excited i'm always excited to talk about sanity um so uh yeah as as she said i i work at a vision i've been here for uh since 2015 six years now over over six years uh i've dealt with a lot of stacks and uh i'm confident i'm on the best one ever um without it yeah well thank you thank you thanks sandy thank you thank you um but but my role my my role at in marketing um senior product marketing engineer it means that i touch everything in front of the login screen and i'm a part of a very small team it's myself it is my manager and believe it or not it's only one other person that i actually found in the sanity slack group i sourced if you're not a part of it go to slack hyphen io slack lands be a part of that community i'm in there if you have questions after this you can you can ping me in there um you're great maybe you should come on the jeffrill team that's awesome that was good i'm sorry you tripped me up i didn't think i'm sorry you want me i won't i won't ad lib in there no it's fine are you going to keep that are we are we are we going to keep that we might how do we come back into this um and maybe maybe just start showing my screen and i'll just start talking so here's my twitter if anybody wants to follow me and uh definitely join the slack group i just mentioned here's here's here it is uh it's a very helpful community it's helped me a lot um and i've even met some friends and hired some employees there excellent i agree we have a fantastic community in the overview i want to i want to touch base on a few of these things here how do you convince your manager that you needed this stuff yesterday because it's not easy to do because he's got to get buy-in and then you know their manager's got to get buy-in and it goes up the chain to all the execs so we're going to touch base on that and then i i definitely want to leave you all with something that is you know your confidence level is going to be high to start start in on monday you're going to be able to take something away from this and be like yeah i'm going to start on this monday you know what maybe you could start it over the weekend go for it that's what i did and then i'm i'm going to cap it off with some real world examples that we use here at envision and that really helped me change the way in which we rapidly launch content web pages the whole shebang excellent um so to get us started out um can you talk a little bit about any some of the problems and challenges you had to solve from the outset when you first started uh yeah great question on you know background how did i get here and uh it's interesting that this is an xjs insanity talk because it was uh next js people that brought me to sanity and and what i did was i went to tim the maintainer in xjs and i said hey man i got this huge problem i i got i got all these stacks and they were all some of them were in xjs some of them weren't some of them were even older than that some legacy legacy code from when i started back in 2016. and i need to get away from this structure where we're trying to launch web pages super quickly we've got these headless wordpress instances and it's kind of this broken process and i need i need to streamline this i need to overhaul this whole marketing stack what what do you what do you suggest and he just said you know if you're looking at you know new cms's have you looked at sanity and i said i've heard about it but finally this was word of mouth confirmation so i got connected with ceo of sanity and uh and bam i'm here today um awesome yeah but in in reality uh and i kind of touched on this is we're expected here to launch things within two days and i completely agree with this i think you should be able to launch a full-blown landing page in two days tops and well now we can um so we we had this struggle of well why does why does it take you a month well it takes you a month for for a lot of reasons but now no we don't have this problem i can launch your website in 10 minutes while we're on this call right is there like a sort of repeated is there a repeated pattern that's happening on these pages is it the same similar content similar content types if you will happening on these landing pages or other pages yeah um it's a great question about using a cms and whether that puts you into this you know creative box you're stuck in there and then all your pages look the exact same and that's a huge problem to have especially when you're trying to move as a dev team you need velocity as much as you can and then you have designers and i've worked with some of the best because i work at envision that want like this incredible experience every single time they don't want a templatized you know way of doing things and i don't blame them because that's not fun that's not fun at all that's not a good experience for it for your users so the answer is no it doesn't need to be that way but that's because of sanity and when i started looking into cms's the cms world it's super saturated it is it's yeah there's there's so many of them now and when i got to sanity i just said okay these people are doing something different and that's what really hooked me in and i said i can i can latch onto this and i can pull this into my org and i'm gonna figure out how to do this because this is gonna make my life easier it's gonna reflect great on my job and on my team um and it did and it paid off in a huge way so no it your pages don't need to look the same but um they can if you want but don't do that how did you start actually working on the project how did you go about starting this sort of transition to using sanity and next together i went to my boss and i said i want to redo these legal pages and you want to know why because i don't want our lawyers coming to us asking to change the the verbiage and i also don't want to be held accountable for that so i was like you know what the lawyers love this so i in my free time i mean because sanity was so easy to set up and it was built for react front ends and although it does all of them but we have a react stack because in xjs i just i said let's do the legal pages let's get that off let's just get that right off my team's weight and believe it or not since i've launched it we haven't we haven't touched them since the it's been two years it's been two years and the lawyers are just you know taking over um which is exactly what we wanted it's less headache for us so right and you put the like power back into their hands and empowered them to be able to make some of these like content changes on their own if they need you right yeah yeah like super smart decision i think to um just like start with something that is seemingly lower stakes right this isn't a major marketing campaign this isn't you know a major feature like this privacy policy is this exciting folks no it's it's not exciting at all but what is exciting is this like this wasn't attached to a campaign so when we were first starting out on sanity if something went wrong and you know the site blows up it wouldn't matter on this like if the privacy policy goes down for 10 minutes it's not gonna matter because it's not attached to anything like really specific there so i just picked something that it wouldn't have a huge impact on and started to get buying once my manager saw this he was like wow and and to be fair like you know i'll jump into our uh our instance here this is a great starter project and the reason it's a great starter project is because you can get familiar with the content block that sanity has which is arguably the most powerful thing that they've got if you're going to build a landing page no this is not a wizzy wig no it's not a kitchen sink this is a wysiwyg on crack i mean it absolutely it absolutely is but so you're building even though these are legal pages you're building you're learning all the tools you need to do the big big stuff down the road and then after that it's copy pasta of code to then start building your other schemas if you if you're not using next.js or you're not using sanity start a new instance of nexjs and go go look at examples of both sanity and next js they both have examples in their github i use these constantly do not google search and find something from 2017 from stack overflow go go look at their example folders they're great and just start building something that you know is going to pay down some tech debt in places but aren't you know isn't really customer facing um i guarantee you it will pay off in a big big way i'm really proud of this one because this one was this was sick we we were on uh we were on hubspot for all of our forms um and and it our lead our lead generation goes through hubspot or at least it used to and so that's where our contacts would would be held and blah blah and that's where we would generate our emails which i used to write all the emails for envision until recently um but they wanted to migrate over to something that i guess could scale more they wanted to migrate over to marketo i i'm not saying that marketo is better than hubspot it by any means i don't want hubspot to get upset here so my boss came to me and my boss said well what if we created this concept where we just decoupled like we're very scared to do this massive migration of every single form and the way it's implemented and its messaging um its gdpr requirements oh my god uh those are big things and he he asked me he's like could we do this insanity and have this like extra layer that sits between marketo and and us and i was like you know what absolutely and and so what we created was the concept of in a vision form and uh what we've done is we basically every single form at envision is generated first from sanity and it hits sanity and says hey what are we getting today and sanity will come back with here's the messaging above it here's the here's the thank you messaging if you submit it here's the gdpr stuff um all uh all sorts of things here's here's the redirect mechanism if it needs to redirect to another page does it need to pop up a modal to trigger a download afterwards all these are stored within sanity and why did we do that because if all of a sudden a new exec came in and said no i want to go back to hubspot i mean i'm fine with it because we've already decoupled the whole thing you do you understand that so like it's incredible to be able to say okay we're not locked in so all we would have to do on our entire stack is switch one component out and it would just change everything and everything within our cms and all the messaging that would go around it would all stay the same i mean it's it's it's quite it it was quite intuitive um to to the to the users i can get into it here but we have forms and we have marketo forms and then we have envision forms um we can even turn these forms into landing pages what sort of use case or problem were you solving when you decided to sort of decouple your forms and then come up with this well envision formed um you know configuration uh yeah great question it it has a lot to do with if you're if you've ever dealt with a forms provider like you know a hubspot or marketo they're not storing everything that you exactly need uh for example like the header on top the redirects i mean sometimes they have the redirects and all that i get that um but what about thank you messaging what about stuff that wraps around your component what about the messaging you have with gdpr requirements which is such a huge thing um so you know decoupling that was just amazing and this project was supposed to take us i don't know two three months it took it took us one month we were way ahead of the curve and we had such high praise because if they needed to switch a form or change something it was instantaneous with insanity and i understand that you could probably done some of that stuff in marketo but it's not the exact same because if they want to change messaging involved well then bam we have that right in here we can do all that right in our cms instance and uh it just i i would never want to do this anywhere in any other way if if you have to if you run if you run a marketing team and you've got a lot of forms this is the way to do it i guarantee you yeah so legal page is so exciting but i promise seriously i i promise i promise everyone it it is it was a super hard challenge for me to convince a huge organization to go this route and that was that was the foot in the door so awesome and i think you know again like i said before that was definitely a great approach a lipsticks smaller project to really highlight the possibilities i think is what you need a lot of time to get a lot of really strong buy-in yeah it touches on every little point that sanity can do and doesn't go too in-depth like i didn't you don't need to add a bunch of plugins you don't need to customize an xjs like out of the box these two tools are insanely good don't modify them on monday when you start with them just use the out-of-the-box features i promise you because if you try to do too much you won't get it done you won't get the buy-in you need to show that it was easy and simple and then that's gonna you know shake things up a bit can you explain a little bit about your process or the describe the content the journal content like of envision um because i know we discussed a little bit about you know not just doing the landing pages or not thinking of your website it's just landing pages so can you talk about sort of the global content and the related content and how you reference those together or what was your process for doing like your sort of content model if you will yeah warm vision i i think that there's a misconception off the bat with cms is that they need to be full-blown landing pages and and don't break this mindset that's the that's the old wordpress days get it out of your head because sanity is doing something different as i said and and so when you go into using sanity we didn't i mean the legal pages sure that was that that's a landing page but immediately after that i said we we implemented all of our forms those aren't landing pages and from there we were like okay well what else can we do let's let's have some fun so we started we started in with globalized content um so every single page in a vision is touched by sanity in one way or another typically that is with a globalized piece of content um one one example that our our navigation is completely inside of sanity i could change it right now and do a preview on you and you would see a completely different nav um render in a moment i'm not gonna but i could do it uh i promise you um i mean another are butter bars i love the name of these but they're the the thing at the top the home page they're butter bars i don't know who named them that but i i love it and uh it's magical though my boss loved that i was able to get like a stick of butter being sliced right there yeah for the win yeah we actually have this on a on a timer insanity it's on a timer that just have it up between these months and then automatically take down so these are things that don't need deployments they just automatically know to come up and come down based on a time stamp that we set insanity i mean hey stuff like that it's like set it and forget it we don't want to we don't want to have an engineer deploy that you know um i don't want to i don't want to deal with that but all these pieces of globalized content are are really amazing i mean i i know we don't have forever but they really did streamline our processes and uh one of some of the big ones were related content this is where we've got like a three up at the bottom of pages where we you know if you're on like the freehand homepage you get to the bottom you got like uh you know a three up that shows you three pieces of content you might be interested in if you landed on that page i can show you on the homepage here so if i scroll to the bottom this will that right there you didn't even see it okay but it hit sanity in that moment it literally it just flashed it hit sanity in that moment and then it popped and populated these three which are our customer stories um which uh also is this is fully completely inside of sanity which i can i can touch base on that but this this idea of global content break out of the mindset that you need to build a full landing page and you need to have this like you know very hard that's a hard task to come up with all your components and all that stuff don't do that put it this way if you were doing a landing page and you had 100 of them and the person had to manually enter what the closer information was and what the link was and what the images that's not that's not smart so we make globalized content so that they can just reference it on the home page or wherever it is they'll just say oh no i want you to use the uh let's see here um i want you to use the inspect closer or the freehand closer something like that the the freehand refresh closer which is the you know the video that's the one i want to grab so we've got all these these things loaded in here um and it it it makes the editor not make mistakes which we've got to do yeah customer stories we've got some great ones in here and this is this is definitely was my first time doing full page like this is sanity all the way through um all the images are rendered out from sanity all the text all the content all these components that i was able to stack the testimonials here come from a global content a bank of testimonials we have a whole bank of testimonials that we don't rewrite them we just grab a testimonial that we we need um these images are all done via sanity uh so and they've got that nice fade-in effect because yeah yeah so lazy loading i would say the most exciting piece though one of the best examples of using sanity for the entire site is the freehand lp i can build you a full-blown landing page right in here this page comes from this section believe it or not these are all components that i made that you can customize using sanity including this text here just to prove it i had a little demo going um i'm going to preview this let's combine next.js insanity i mean i know that's awesome and you're probably thinking well why did you even need to do that well we need to do that for lead generation stuff we we actually do use this page in different formats for dynamic content so we will duplicate the page and slightly change the verbiage and push it towards a different audience and see if we get a better generation of leads i mean that's just smart right right sanity enables us to do that instantaneously um as an example sort of automated your workflow a little bit in a lot of ways oh my god this is really really cool i still let people think it takes me forever but it doesn't because you know what i mean uh as an example here i'm gonna go into the use cases block and i'm just gonna go to the default content and i've got this component called svg words and lines um i'm going to change this to my full name which nobody calls me but my mom and dad and do that and if i see preview this it should change that whole animation because these these types of animations are usually baked right into the page you know what i mean um but yeah now i've got this thing that's circling my name and i just caused that by adding brackets around john yeah you know it's it's cool stuff like that that i'm like hell hell yeah yeah like you want to change you you want to change the word let's do it it's not going to be a headache anymore you know what i mean and then do you do any kind of like a b testing with this or testing with customers to see oh yeah we prefer that's awesome yeah we definitely will we'll have different versions of different pages um we have the ability to add dynamic content blocks in here that are run off of uh url flags so if you if you have you know a url param if you have like a different param that says persona equals designer it can show you a completely different freehand page but on the same exact page it allows you you know it gives you the freedom to build these rich experiences without limiting your designer right you don't you don't want to fight with them anyways you want to give them what they want because it's going to be a better it's going to be a better user experience so uh thank thank god for sanity when you when you see what it's doing you'll realize okay this is perfect because it's so easy for your front ends that are probably javascript based to consume there it's dead simple you don't need to parse html and spit that into props and all this stuff which is probably not going to happen um in a in a good way anyway so um i mean that's what i'm talking about when i said oh my god this this this hits it i've gotta i've got to get this into the organization and i mean the impact that we've had is just insane um you know i we're talking real world examples here and my boss uh i mean my boss and i really do tag team this uh he helps come up with the ideas and i i help engineer them but he was on a meeting with his execs and they were like all right we need to we need a we're doing a kick off for they're doing a kickoff for a project and uh i can't tell you what it is um and they're like you know what we we need to get we need to have a landing page asap brent and he's like okay what's on it and so he opened up sanity while they're on the call he's not showing them and they're like we need you know this type of a hero with this type of a closer and we need an faq section we need this type of video we need a river with all these different assets pulled from all these other pages and within two minutes he posts the link and says like this and they're like you've got to be kidding me like can we launch it can we launch that now and he's like i can launch it it'll be up in five minutes that's sort of the advantage right of having your content as data and being portable right because in modern organizations there's lots of input there's lots of output and that changes all the time so you need your content to be able to move with you if you were to get a new you know presentation platform of some kind your data would need to flow with you and if you didn't have this sort of decoupled structured content approach and everything was hard coded it makes this sort of you know omni-channel life we're living as you know people in the modern world like so much harder absolutely you hit the nail on the head there um absolutely like sanity doesn't need to be about landing pages we we've made it about landing pages now and we're going to continue um but it doesn't need to be if you've got a product here you go yeah this is this is what you this is what you need to be using um especially for like all your third-party stuff you know i don't even think i mentioned it but like if you're a developer chan and chances are your website has drift on it or some type of a chatbot and uh well drift is a heavy offender of bloatware uh it's a heavy script to load and so what i did and i will credit my boss he told me to do it as he said i don't want it to load i want you to create me a fake drift insanity and then once they show intent i want you to load drift in its place drift doesn't load until i click that button and then once it clicks that button it it loads in its place so we're using sanity to save page weight and page speed which increases lighthouse scores which increases seo scores which increases revenue in the end because you've got to get the best search results right right so and i think it's really cool that you seem to have built in a lot of custom just configuration setups for yourself too within your studio because i've seen that throughout the studio when you've been showing it yeah i i would say um look i think some people watch this and be like oh this is a bare-bones studio you're right it absolutely is because this is exactly what it needs to be for us to move fast i'm letting sanity is incredible i'm letting them do the heavy lifting so that i don't have to and honestly when i do speak to people i always tell them i'm like if you've not used sanity you're missing out on something very special and i truly believe that so um and then if you make well please make sure you couple it with next js because it's a it really is a match made in heaven i mean because we we don't necessarily i was hitting on some of it we everything's server-side rendered everything's out of the box i mean back in the day we had to like customize the entire stack you don't need to do that just install next they've got all the features you need so this is really cool um i think it's super exciting what envision has done with sanity and next um do you have any sort of final thoughts about either the process or what you did or working with sanity that you want to share with us i think yeah i've said a lot of things today i i think just one last note and this actually came from my manager and that's why i've got this up here that's not what he looks like i promise but uh we were talking yesterday about sanity and he just made a comment that i just loved we were looking at our website he's just like you know i don't see a single part of our site where sanity doesn't fit inside that equation everything that we're looking to build now we first say okay how is it going insanity because it's going to make our lives easier and i just that's amazing i mean that's a game-changing product it is um i don't know how i'm going to develop websites websites and products without it so i just want to leave that tidbit in there [Music] hello nextgs conf today i'll be speaking to you about building modern cms driven web applications it's quite a mouthful but i'm hoping to have this as a long-winded talk and more of something to sort of incite some thoughts in your heads my name is daniel madily superior you can find me anywhere online as well gambes i do developer relations at a really cool headless cms called strappy and i put a lot of my techno tracks on mixcloud as i am a disc jockey also known as a dj if you'd love the resources for this talk you can go to bit.ly slash next js sorry next conf dash strappy right um i want to start here let's make the web faster well i see two statements let's make the web and let's make the web faster i want to talk about making the web faster but before i do that i want to draw parallels to the british cycling team there's a really cool story in a very popular book about how the british cycling team became one of the world's greatest cycling teams all because of one coach and his very interesting approach to or towards getting faster rather than trying to improve one thing in a huge way he decided to how do i say it improve everything in the most minute way possible and i want to draw this parallel to us developers um or us people in tech and what we're doing to make the web faster so what does it mean to be faster most people think ready quite fast enough how do we even get better i want to introduce the concept of marginal gains which is exactly what i get out of the story of the british cycling team they decided to improve almost every single thing by at least one percent every single day every single week and that had huge benefits for the team as if you do a quick google search you find out that they are one of the best and most decorated cycling teams in the modern cycling era so marginal gains to be honest isn't a concept that us software professionals are unaware of marginal gains just mean we iterate constantly to improve with releases with software with designs with workflows we're looking at what could be a bottleneck what's slowing us down and improving it in the smallest possible way ever and yeah i bet you'd be asking great marginal gains let's make the web faster how does a cms fit into this well um it's really not a complicated answer to be honest they simply do i mean we are talking about the web right and cms is a content management system you might find yourself asking yeah cms is the web so let's get into what the web is and and this is just my very creaky definition but what is the web rather let me say that again what is the web but a bunch of content identified by urls interlinked by hyperlinks and accessible over the internet really if you think about it what is the web and next js let's go back to marginal gains again is already making marginal gains in all of its releases we look at next 10. we have next image of course support for webpack five um the preview releases for real-time previews of your content more performance improvements and the same thing happens in x10 react 17 support fast refresh with mdx image optimization with a next image internationalized routing um importing css from third party components and and the list goes on from next 11 next 10 next nine next eight next has been for a long time now improving the web right so how do you do the same with the cms it's not a very easy answer but i hope to demonstrate that here building with your front end and optimizing for all the edge cases and optimizing for everything is really cool right and behind all the cool stuff that goes on in the front end with all the front-end frameworks that people are working on the front-end tooling it's very easy to ignore a lot of the progress being made on the cms side of things the back end side of things and the concept of headless is one that's not new but now is gaining a lot of traction because we're starting to see the benefits and i think that's where it starts how do we do the same with the cms how do we make marginal gains how do we try and make the web faster by concentrating on our cms2 i think it starts by realizing that building software is a collaborative effort of multiple teams and once you realize all the players or the systems that come into place or that empower us to ship software we can sort of start to optimize to make those faster because making those teams faster makes the web faster because we get stuff out much quicker so who is involved i like to use this venn diagram we have developers we have designers we have content managers and at the center of all those i like to see headless cmss because developers do their developer thing you build your front end be it for the web be for other platforms mobile wearables we have designers of course who go into the science of how things should look and we have content managers who actually go in and enter and put in the content and manage the content so it's it's an efficient manner and headless cmss are at the center of that so when you ask yourself how do you make marginal gains for cms you have to ask yourself how do we make marginal gains for developers how do we make marginal gains for designers how do we make marginal gains for content managers and all that believe it or not is possible with your cms i'm going to demo that so switching over here to our demo application and what we see here is a corporate starter that we use to sort of demonstrate the value that strappy as cms can bring for building different types of sites and as we go around the different pages the pricing page the contact page we notice it's it's a bit it's flexible so let's go back and let's start the demo and see how we can make marginal gains starting with the developer at the bottom of this we have a nice form you enter me at maogamves.dev and click subscribe this data of course gets fed into strap view so let's go back into our stripy back end we see the email that we just entered with developers one thing that they love to have is an integrated or integrated suite of um of tools and with strappy one way that we can take this further is one by using webhooks we could set up a webhook with an external service that can get that lead formation submission and take that on to a third party email provider but why would i need to do that when i have an email plugin i can design and edit plugins with a drag and drop interface this is one of the community plugins built i'll have a link in the resources and you can sort of have different blocks drag out different content we can go back here and then we can start adding content we can add some html we can add a button and then edit that button text we save the design and then we can actually send this email out and all programmatically from the form submissions that come in from our website so that's one way that we're making marginal gains we're having all our tools or having a suite of tools that our developers can leverage and use to sort of make better experiences and this goes way beyond just emails we can integrate larger experiences like quizzes like crosswords or from data that comes from rcms when you go back to your website you notice a bunch of pages with designers let's talk about how we can make marginal gains for designers when we go to our page here um we have this pricing page and we can sort of build out a we can sort of build out pages so we maybe we want to have a lead form for our pricing page are you interested in buying yes let's say sales at acme dot inc contact us i guess that's a good thing to say and then let's save that and just like that back to our strappy site we should have a new email form on our pricing page are you interested in buying yes sales at acme.inc contact us this is super interesting because we can like i said before integrate a lot of those workflows that i mentioned and have developers do customization where we can extend the data that we're going from a feature or from a design that we practically put in by pressing a few buttons which is just amazing i think we've seen how we can make marginal gains for the developers for designers what about content managers with headless cms is one thing a lot of people talk about is not being able to preview data and here i'm going to mix the marginal gains that nexus have made with their preview mode and the marginal gains that cms like strappy is making and demo what previews look like right so let's go to secret and see what we can do and see how we can make marginal gains for the content managers this is a secret page only viewable in preview mode we have some rich text here that says you can only view this in secret in preview mode and let's say we're making marginal gains for content managers let's just add a little bit of something and save that when we go to the bottom here we see it's in draft which means it should not be published on this side it should not be available if we go to our main site and um go to um secret it should not exist that's perfect we have a four or four so let's go back and then let's use next js's um preview mode and paste our url with our secret don't tell anyone for ours is super secret at the moment um so we load that and now you see our page you can only view this page in preview mode we're making marginal gains for content managers which is perfect exactly what we wanted to see and this is all i could show you in the time i had for how cmss are making marginal gains for developers designers and content managers let's just do a quick recap of what we're learning great so what did we learn marginal gains can be applied outside of just developer tools to make everyone faster and make the web faster and cms's do actually have a role to play in making the web faster and last but not least in all we're doing to make everything faster we should remember that we're optimizing for the end users i hope those are great takeaways you can have uh you can have the resources for this at bit.ly conf dash strappy and if you'd like to find out more about the marginal gains that cm that strappy as the cms will be making very soon without v4 release you can go to stripy.io v4 and if you would like to join us join me as a team or as or join us as a company we're hiring if you go to stratford i slash careers you can find a lot of openings and you can come by our booth and talk about a lot of the things that i demoed we're sponsoring next year's conf so you can come into discord and look for the strappy booth and you can talk to myself and a lot of the other teammates thank you so much i hope you've had a great day [Music] but yo uh welcome justin um you know we're gonna jump right in today we're gonna be talking about render atl uh i wanted to ask you a few questions see what see what you thought about a few things and i know the world is wondering how to put together something like this so i'm sure you know we could touch a little bit on that but um go ahead introduce yourself tell the crowd what you're into and uh we'll hop in what am i into man that's a loaded question um so yeah my name is justin samuels i'm the founder ceo of render atlanta conference um and what am i into um dang a boot i guess like i i food was hitting that render look i find the art of buying and eating food a scam because when you don't have food you are a sad and you have the money to get the food and you're happy you're on the way to get the food and you have the food you're happier you're eating the food here at your happiest and then it's all gone and you are a sad again so i call that an infinite feedback loop and it's a scam so yeah i'd love to say and you know what it's funny i was not expecting so shout out to uh to justin uh i forget his last name who who was uh chef and for us over in in atl yeah that man threw down on the plate like something serious i was loving every second of it and then we hopped right into the uh to the conference where the food just continued to be amazing so i definitely know you got an eye for food i was on a call earlier and a person asked me what can we expect that uh render and i was like look it if you would have came to 2021 you would know we had all you eat ox tails and how much oxials go for but one particular stat that i always throw out is we've gone through 400 beef patties in a half an hour i didn't even like get one and the lines the lines were crazy the lines were insane dude to get to that food like i remember so i'm sitting in line everyone's like yo there's like smaller lines over at this and that i'm like nah like i was in line for the uh for a lot of that i think there was um jerk chicken in this line there was a jerk chicken there was a bunch a bunch of crazy food and i remember somebody was like yeah like hop out of line we can go hop in the vegan line i'm like listen i'm sure vegan is great but i'm looking at this food right in front of me and this cajun shrimp is hitting crazy i need to get that so i mean the selections were absolutely phenomenal that's why i tagged you in that um a twitter post but the dude was over and like the island you gotta chill first of all you're trying to chat hank's me out here i'm not trying to do another one um so let me ask you um you know we all know that it was hard to go through this you know with kova we know you had to push it back a bit um what surprised you uh when you finally ran the the conference what were the things that surprised you uh once it finally started happening and you were you know maybe a day or two in i'll be honest about it i did not know nor think that anybody would actually come yeah uh yeah you had seen the hype you had like i've seen everybody talking about it and i was like man they did this and like didn't really come um it's kind of what drake said on his um a song called too much where he was like um a book that is anybody coming be before i go out there and i was like man we put in all this time all this work i'm really curious to see if more than 10 people come yeah yeah i knew it was gonna be a hit when i seen people pulling up on the bird scooters oh yeah those things are clutch bro i saw people zooming up and i was like wait a minute there was always a collection of like scooters at the front of the at the front of the conference at the front of the car and and it got to the point even where a bird i think it was pulled up and like dropped off more i know that okay no way oh it's lit yeah man like i thought i was wondering why there was like 60 scooters out front of the frickin place yeah man like it got crazy so just the fact that people really uh rock with me hard enough to come yeah like i tell people like it's easy to get well i'm not i'm not gonna say easy but is it sure a lot easier to get people to come to anything that is going to be a free because there's always you could sell a thousand of those or yeah you know and we've been and we've been in and we've been in a really weird place where like all conferences have been free because they've all been online and like people are now people are now used to that kind of like ideology that that they they don't understand and i know we talked a little bit about numbers on the twitter space that we did about how how much this cost people don't understand and i remember back when i was starting to put together a react adelphi and i was asking you like for advice on how do i start to get funding what numbers should i be looking at like it's insane i mean and above and beyond with render because the food the the place like it was all it was all insane like it was it was way bigger than i think i've ever seen a conference try to do and like to think about the cost behind that like i still felt like and i got in probably in the third round of tickets i might have spent like four or five hundred dollars on my ticket um yeah and i'm gonna tell you right now dude every sec every cent was worth it like i was fed the whole time drinks you know as much as i wanted and that was alcoholic and non-alcoholic uh i never felt like i had a uh a dull moment and that was from start to finish like that is what really and that costs money like don't get it twisted a lot of these companies that are throwing marketing events as conferences and that's a different story like this is a community grown event this is a community grown event for the people and the thing that me and you have always kind of vibed on is like we are opening doors it's all about opening doors i can get as far as i want to get but i only get as far as i can get other people like that's how i feel and i know you feel the same so like that's what this event really is about and a lot of these other events don't get it twisted they're cool but they're all marketing funnels at the end of the day so like they may be free but they're getting something from you they're getting your email they're getting your contact information they're they're going to be sending you marketing for the for the products and stuff like that like it's not free it just feels free because you're not putting any money into it yeah and they're still gonna give you the old school dried out chicken a breast [Laughter] it was crazy because the school lunch the school lunch field it was crazy because there was other things going on and people started to add us like man all that food i'm seeing why the hell am i still oh yeah pasta at this conference or pizza which i always served in my meetups no it's easy to get that wrong with that like they're not wrong i had to like do that like like a lot of people don't know but i have a background in um eu events because i used to do huge video game tournaments so i used to be doing that like that's why i started was actually video game communities that's how i even got into any community building truthfully i found that to be a pretty interesting link because anybody else that i know that's in this always started it out with like a gaming yeah that's where community is like it's like so important in gaming like because like yeah because gaming can be hella toxic you know what i mean so it's like it's it's it's almost like impertinent that you get to a point where you have a community around you i'm not going to lie though it that kind of made me a battle tested because i was telling my team like look this might happen fights might happen this and that and it was chill okay i am so used to people coming from super smash brothers tournaments it's true though people don't play about their fighting games yo people don't play shout out to the homie and nick i did he was like his name he's still he's still tournament running that man still going out and about he legit stopped in target i seen on appearances ig and was just watching the new super smash brothers character come out that man is dedicated to the cause for sure dedicated dedicated dedicated um yeah so like you know i i think that's an important detail is like it it it costs money to run events like this and and you know i know a lot of you can look at the ticket price and some of you may not be able to afford it like that's totally understandable uh the scholarships this year you know we can touch on the scholarships they were phenomenal like that that and and that's where it starts to like putting your money where your mouth is when you see these other companies coming in and saying hey you know alongside our sponsorship of the event here's some money to make sure that we can also put the event in the hands of people who may not be able to afford it so i'm gonna make a uh world uh announcement right here like okay i love doing that right so we looked at the scholarships and as you know we had a goal of a you know a first year conference handing out a 35 we actually had did like 70 right yeah yeah shout out to all of our sponsors for helping that like a gas fee came through netflix came through i don't know shopify too they came through huge and got a whole lot like bunch of them but i started to think a couple nights ago like how do we impact more people to come to the great events and i'm not just calling them a great event because i'm the one that's hosting it it's like we have all this top tier talent all these top-tier speakers i don't want to be any community of if you got the money you could come and come on if i got the talent i could come right and the people that got the talent a lot of the times that just need an opportunity to be at the right place at the right time are those coming out of um boot camps or those who are um just now graduating yeah even right even like college students right like they also need that help now exactly so we have not finalized all the details yet but i'm happy to announce that we are going to let any upcoming or recently a graduate of a boot camp or a college wow attend the conference a free of charge wow that includes if you are within a one-year graduation i mean wow i graduated a whole year ago and i need a job and that's awesome free of charge that's a hard that's a hard time as a boot camp graduate myself it you know it takes that first six months to a year to even establish your identity in inside of the community to be able to start getting those interviews right and it kind of came out because talking to angie jones and angie comment like she's a shirt building yeah she's dope as hell uh super dope like what you are building is essentially the golf course for people that come to meet up and get kind of admitted because i know a lot of people so i said if i know a lot of people and i could now lean on these companies to do on the site hiring like they were doing right and so we got so many people hired after the conference why not just open it up for everybody so yeah that goal now is we're going to get with a couple boot camps here and there a couple of schools and then just say hey if you are here you could come free of charge very dope that's so sick and like i i can tell you so like you know for me and we talked about this a little bit when i was at the conference like and even in the twitter space for me you know somebody had asked in the space um how do you make a conference like render right like how do you how do you duplicate the process right and and we and we talked and we talked about this and we talked about the fact that you can't but what i said and this is where we agreed you can now show people what is possible and we talked about culture and and that's like it's it's really the culture that that makes it what it is like i told you like i was in atlanta for three days and i was like ready to move there i was like loving like i was out like after the cop no like and after the conference i was hanging with uh you know as uh one guy deshawn marvin uh hung out with a couple of actually of your organizers uh and we just hung out they showed me around to east atlanta we went you know back and forth like dip a couple of places just because i was telling them i was like look like this is a city that i could see myself inside of there like let me show you more of what you're talking about like this place is dope um people can't obviously cannot duplicate that but what people can see from this is that you can take a lot of the inspiration from the ways that you made decisions to start making decisions backwards to their own events their own communities things of that nature and you know me i'm i'm always in the forefront of trying to find better ways to innovate inside a community because the ways that we've been having to communicate especially over the past year and a half have changed drastically from what we're used to right and and i shout out to you because dog a discord or you a whole day on my chest yo i've been saying that let me be like uh be like i would love to find out if discord has like an affiliate program hook me up you know where to find bro they owe you because we are on discord because of you because you came to me like look man we gotta get you i remember that conversation i could say who i gotta get you off of that and over here and i'm not gonna even a lot of you i was like man this is confusing as hell i remember it damn it but overall man yeah like you are on par like the way that we innovate as a com immunity is extremely key and i'll be honest i've seen conferences starting to become this old boring monolith of a thing where it's like i don't want to really go to that no more you know it was it became too much about the people that were talking and the and like don't be wrong like i still everybody goes to events to hear a talk from their favorite person like for me going to render was to like finally meet the people that i've networked with and like you know i spent all this time knowing these tens of thousands of follower people and i got to finally chop it up with them one-on-one and learn about about them and more about that but like the conference is not just like a conference a event is not just about how good the obviously the talks have to be great right like obviously the talks and the titles and the workshops have to be great but all the other stuff in between is so important and it is left out every time because people don't they don't have the imagination i think it's i think it really does it comes down to imagination because if you think about render even when we talked about it way back when we met in new york right when we were at when we were going to like etsy and stuff like i remember talking to you about just like the and this is before i think this is before you were even advertising for render this is back when like streaming in color and things like that i remember we were talking about events then and you were like i just don't want to do it the way that everyone else is doing i want it to be something that people remember and i think that you i think that you did that yeah like the end goal is that you come back and you're like okay i thought that they couldn't do any better but they've done it again right i'm not gonna lie to you i'm already like jesus christ this is gonna be hard to be i mean imagination you see how big my head is i have a lot of room for imagination but even a person on the way out like here's how i knew and a shout out to my boy ryan wilson he's the owner of the gathering squad he he's got us that that place is sick dude the gathering spot just as a whole is a really cool place no he gave me some advice which is good but scary too back in 2020 he was like you need to focus on making this conference a classic can we always talk about albums he's like okay the um um a very first one needs to be that one that's always on a repeat all the time at drake level it's got to be a drake level concert conference and it had a trender for two days after okay this is a classic mountain about it you know even as of now i told her what a fifth right now right but the one comment that a person made to me that got me a shook on the way out was yo this was actually like dope time how will y'all make the uh lanyards better for 2022 oh that's right damn not the food not the real cuban links baby yeah i'm like dogs that's a good question i'll get back to you on that so i don't know thank you because this will be hard to beat right yeah you know what so like um i'll i'll bring it back to a couple more questions just because i know we're hitting about 20 minutes now um you know what i think was really impressive was how quickly you were able to put together websites mobile sites like you really created an ecosystem in which people could really they knew what was coming they knew what was happening and they felt the the culture in the the websites that you build um so how did you how did you plan and organize i know you went from a smaller team to like 30 people um what did that look like what what tools did you use what types of things kept you ahead of the game man i'm gonna even a lot of you coach i kind of like you know i felt like this was playing uh behind the whole time because i always move i always move with an intensity where you got to be scared at all times so i'm thinking okay i really should have been got that out you know right so it's good to hear that you had a thought like okay i'd be on top of this great yeah perfect but the tools that we use was one we use makeswift there are um a website a cms a local company and atf dope yeah so completely react-based i cms uh and then honestly we use a lot of communication via like a discord yeah we use a kind of integrations or automations i should say through a zapier so they're all zapier that is that right there i'm telling anybody who was listening that right there and there's a few folks that that obviously are in the devrel game that know this zapier zapier zapier i think it is that thing that product right there can change the entire way in which you do community and events i have it to a point where and i'm i'm also speaking at their upcoming conference and i kind of like um i touch on this but i have it to a point where when a customer he emails us it comes in our like a discord yeah that way i'm able to like hop on it hence why everybody's like whoa you get back there quickly i mean yes because that's because it's hitting me right there like a rock in the face right yeah and so overall like just try to find ways to automate your workflow and not be a blocker like right um one of two's is a privacy i know you heard them they use like little digital cards but rather than my team having to come to me like yo we need the card instead i'm like here goes a like a digital card quickly oh to be able to do like uh purchases and such exactly that way without having to give them like the actual business card info right so i've already agile scrum mindset at all times don't be a blocker right that's dope that's dope yeah i mean i think that like and it's something i think about a lot obviously you know we talked about discord like tooling around how you build events in communities like has grown so much over the last i mean even two to three years even before the pandemic it was really starting to grow but now like the tools are there uh it's really just about how you use them and again i i know i'm gonna be a dead horse with this one but your imagination of what you can start to pull together is really what's gonna what's gonna help propel you forward to kind of start building your own things and and you know and i'm gonna tell you right now justin's an open book i'm an open book whenever you have questions about like community building like we're here for it because that's like that is what we focus on the hardest is really just like how do we empower others to feel like they can start doing things like this and just to be honest about this too yes i'm open book i like to help you but at the same time just know my time is extremely extremely unlimited i mean out of the conference but even just a discord right like but even just the discord even if it's not you directly like the people that you've been working with and the community you've cultivated yeah yeah good out of work a lot of people think i only work at the conference like no i mean too so yeah i have a job job and i got this job i got some other stuff i do too so my time is like are precious but um i always help if i can so if it takes a couple times to get in contact with me don't take it personal just keep trying please for sure for sure um and then i guess you know for the the last piece of the conversation here um you know what what are you excited about going forward into into next year and the years beyond i know you already told us in the twitter space you already thinking about 2023 and what that looks like but you know what you know you said it's going to be hard to top last year uh well this year at this point but what are you looking forward to and and what can you share with us about like going forward what what what's going to go on with render i know you've been announcing some things and i'd love to hear about it yeah so i announced the whole scholarship program for 2022. um i could talk about this now too is that we are going to be doing a pop-ups across the country so i've seen that yeah you could catch us in your um a favorite neighborhood again on brand that you were going to expect which is all the food the drinks and the culture that you could just eat at that time but we're going to be doing a pop-ups across the country and ny i see miami kansas a city um and that was because we were begged to we're not very big but we were told we got to come out there um what else uh detroit oakland and back to dlc and then atl so we're gonna be everywhere being out there popping up um what else uh and are you are you bringing that atl vibe to these areas or are you setting up shop and and like how does that look yeah that's a really good question so i don't want to impose hpl culture a for you where we go right this is about the culture of the locals of where it is we partner with brands that are local to the area love that and then when we come in we let them help us a curate how the event needs to like flow right so love that us imposing and hence why atl's aversion was all about the trap because that is our culture that's the culture right yeah yeah cause that's like you know for me like when i think of philly like just atlanta and philly give me such similar vibes like you know like the music scene is is is just so deep and and the people that are in the music scene really care about the city like you know like that's something that i really love and and i like that's like for me when when when a demetrius clark ray conference comes like you're going to be seeing philly rap all day you're going to be hearing music between like i think you've inspired me to kind of put my best foot forward and making sure that when people come to philly for anything that they they feel like they they came and experienced philly who are you going to have you're going to have pat so you're going have a genos so i'm probably not gonna have either i'm gonna go talk to a grandma that's running the food truck in center city because that woman right there is whipping up the best cheesesteaks in the city don't get it twisted like i know everybody talks about pats and gino's being like the go-to and i'm sure like you know for people who are out of state that want to go and enjoy like you know like that's cool that's great but i'm gonna tell you right now working in center city for as long as i did i'd be walking by these like you know little old grandma whipping it up on like three different stoves that woman right there is making the best cheese steak in the city no doubt i love it i love it man um well dude thank you so much we're coming up on the end here um is there anything else that you wanted to to shout out anything you wanted to talk about before we dip i'm sure everybody would love to hear man i used to have a whole shout out listen i'll be like this person so if you ever poured into me helped me contact me about some advice or anything shout out to you y'all keep me up going so that should be everybody on that list now um shout out to you for taking the time to do this interview of course of course i paid to do this so i'm here to just i'm here to talk to you my boy shout out to my team at the conference y'all holding me up so i'll keep on going um a long night so a shout out to y'all and um i shout to god um you know holding me down down here you know it's hard life um and yeah man like just again shout out to everybody yeah shout out to shout out to the next js conference for letting us sit here yeah and talk for the last like 25 minutes to y'all um and and you know shout out to lee for for connecting us and and letting us uh come up here and and and shoot the crap about you know render atl and beyond really appreciate you all for the time follow us on ig twitter is that render atl website is easy as well it's just a renderatl.com you can find like a render ny see oakland all on there too you can follow me at doug debugger t-h-u-g-d-e-b-u-g-e-r [Music] that that name is going down in history and you can you can find me at demetrius clark uh you know come come chill with us come talk to us like i said i'm i'm a little less busy thankfully because i don't run 30 different conferences so do you ever have any questions about community uh you know justin was talking about how i convinced him of discord discord if you heard that you know where to find me for that affiliate uh number two if anybody in here is ever thinking about moving over or wants to start their own community you know where to find me um again thank you next js and and thank you lee and the rest of the team for having us up here [Music] we gonna take it gonna take it [Music] um [Music] e-commerce is driving one of the largest and fastest global economic transformations in human history bigcommerce is a software-as-a-service platform that powers 60 000 of the world's most interesting and beautiful e-commerce stores we provide everything that a business needs to create manage and grow an online store from the design of that store to the infusion of product catalog the checkout and all of the tools that help you market and grow our mission ultimately is to help our customers turn their long-term digital transformation into competitive advantage [Music] you

Channel: Vercel

Views: 7,006

Keywords:

Id: cVIeeFEIKSo

Length: 288min 33sec (17313 seconds)

Published: Tue Oct 26 2021