Remix: Embracing Web Standards to Redefine Modern Web Development

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more

Discover the power of Remix, a groundbreaking full-stack framework that embraces web standards to redefine modern web development.

As developers grapple with complex tools and frameworks, creating performant and maintainable applications becomes increasingly challenging.

What if there's a solution that leverages core web principles to streamline development? Enter Remix

In this talk, learn how Remix harnesses web standards, such as URLs, Fetch API, HTML, and HTTP caching, to elevate developer and user experiences, ultimately empowering you to become a better developer!

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Remix is a modern framework that blends server-rendered architecture with React capabilities, aiming to optimize web applications by adhering closely to web standards. It uses a server-client model to enhance app speed and scalability, handling complex applications efficiently while reducing the need for JavaScript on the page.

Remix addresses several key challenges in modern web development, including scalability, performance, browser compatibility, UI/UX, developer experience, and security. By sticking to web standards and best practices, Remix ensures applications are robust and maintain a great user experience.

In Remix, the fetch API is crucial for data handling, managing both request and response objects. Remix integrates fetch into loaders, providing a global context for data retrieval across the application which enhances efficiency and simplifies the development process.

Remix maximizes the use of HTML by leveraging its full potential in rendering web content. It also utilizes HTTP caching effectively, using browser's built-in caching mechanisms to improve performance by reducing server load and speeding up content delivery.

Server-side rendering in Remix offers enhanced scalability and performance, enabling applications to handle more complex tasks efficiently. It also improves SEO, ensures better compatibility across different browsers, and enhances overall user experience by speeding up page loads.

Remix provides a developer-friendly environment with powerful tools that are intuitive and enjoyable to use. By focusing on web standards, Remix makes learning the framework more about understanding the web itself, which in turn enriches the developer's skill set and improves application security.

In Remix, URLs are integral to web architecture, serving not just as addresses but as a backbone for routing and data loading. Remix enhances client-side navigation by optimizing which parts of the layout need refreshing as users navigate, thereby improving performance and user experience.

Remix simplifies data rights and mutations through the use of basic web technologies like HTML forms and HTTP. It enhances form handling by automatically refreshing data without full page reloads and provides smooth user interactions, such as displaying loading indicators during data submissions.

Alexandra Spalato
Alexandra Spalato
26 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.

1. Introduction to Remix and Modern Web Development

Short description:

Hello, I'm Alexandra Spallato, a Developer Relations Engineer at Storyblock. Today, I'll discuss how Remix is embracing web standards to redefine modern web development. Web development involves transforming data into HTML and delivering it to the browser. In the past, server-side rendering was dominant, with JavaScript used sparingly. However, JavaScript frameworks like React, Vue, Svelte, Angular, and meta frameworks like Next, Nuxt, and Gatsby introduced the concept of universal JavaScript. Modern web development faces challenges such as scalability, keeping up with new frameworks, performance, browser compatibility, and ensuring a great user experience.

Hello, I'm Alexandra Spallato. I'm a Developer Relations Engineer at Storyblock. I'm super happy to be here.

My topic today is how Remix is embracing web standards to redefine modern web development. So first, let's dive into the evolution of web development. Web development is all about transforming data into HTML and delivering it to the browser for rendering.

Let's take a trip down memory lane. Remember when web development was all about server side rendering. You make a request to the server, the page would be rendered using the template in language and then sent back to the browser. JavaScript was like the cherry on top. Used sparingly to have a dash of interactivity. But then, like a plot twist in a movie, JavaScript frameworks like React, Vue, Svelte, Angular, and meta frameworks like Next, Nuxt, and Gatsby came into the scene. And with them, the concept of universal JavaScript was born. This is like the superhero version of JavaScript. It can run both on the client and on the server.

All right. So now let's talk about the elephant in the room. The challenges we face in modern web development. Scalability. Your app always needs more users, more data, more complexity without crashing. New frameworks are popping up every week. It's like a fashion trend. So keeping up with the lastest and the greatest can be exhausting and time consuming. Performance. Nobody likes a slow website. Browser compatibility. We need our apps to work seamlessly across all browsers. UI and UX. This is all about our users. Developer experience.

2. Introduction to Remix

Short description:

Remix combines the scalability of a server-rendered framework with the flexibility of React. It can handle complex applications and scale down to not require JavaScript. Built on web standards, it speaks the browser's language and enhances user experience. Learning Remix means learning the language of the web, making you a better web developer. It also prioritizes web standards and best practices for security.

This is about us developers. We want our tools to be powerful, but also to be intuitive and enjoyable to use. Security. We need to protect our users' data.

Okay. Don't worry. I'm not here to talk only about problems. We're here to talk about solutions and this is where Remix comes in. So what's Remix all about? Imagine if a server-rendered framework and React had a baby. This is Remix. It's got the scalability of a chameleon. It can handle complex applications, but it can also scale down to the point where you don't even need JavaScript on the page. And the best part, it's built on web standards so it's like speaking the browser's native language. It has a server client model, so you can only send the necessary data to your user and enhance your app's speed and scalability and this is achieved by featuring data on the server side. It's built on web standards, so it's like a universal adapter working seamlessly across different browsers. JavaScript is here for user experience. It's like the icing on the cake. It enhances the user experience, but the app still works great even without it. It avoids over abstraction. Learning a new framework can sometimes feel like learning a new language to discover it's only spoken on a tiny island. So with Remix, you're learning the language of the web, not just a single framework. So as you get better at Remix, you're actually becoming a better web developer. And also, by sticking to web standards and best practice, it helps to keep things secure.

3. Remix: Streamlining Development with Web Standards

Short description:

Remix streamlines development with web standards, including URLs, fetch API, HTML, and HTTP caching. URLs are the backbone of the web and Remix uses them for routing and data loading. HTML is the language of the web, and Remix utilizes it fully. HTTP caching improves web app performance. Remix treats URLs as a powerful tool, optimizing navigation and streamlining development. The fetch API in Remix is like a personal postman, delivering data to your app. It manages requests, responses, and headers.

So now let's dive into how Remix streamlines our development process with web standards. First off, Remix loves URLs. URLs are the backbone of the web. The address of every little piece of content on the internet. Remix embraces this and uses URLs to manage routing and data loading.

Next up, we have the fetch API. This is our tool for data handling. And now let's talk about HTML. It's a language of the web. It's been around since the dawn of the internet. Remix use HTML to its full potential.

And last but not least, we have HTTP caching. By leveraging the browser's built-in caching mechanisms, Remix can drastically improve the performance of your web application.

So let's talk about URLs. In Remix, they are kind of a big deal. They're not just addresses, they're the backbone of your web architecture. So imagine a URL as a path. And each segment of that path corresponds to a nested layout in your UI. In Remix, you can co-locate your UI and data-handling code in the same file. We're talking about full-stack components. Remix also optimizes your client-side navigation. It knows which layouts will persist between two URLs. So it only fetches the data for the ones that are changing. And on top of it, Remix can prefetch all resources for a page when the user is about to click a link. So next time you look at a URL, remember, in Remix it's not just an address. It's a powerful tool that shapes your web architecture, optimizes your navigation, and streamlines your development process.

So now let's dive into the fetch API in Remix. It's like your personal postman, delivering data from the web to your app. It manages request and responses objects, your outgoing and incoming data message. We also have headers which are similar to the address in an envelope.

4. Data Handling and Cache Control in Remix

Short description:

The fetch method in Remix allows you to make requests and receive responses from anywhere in your app. Loaders fetch data for components, providing the backbone of your app's data flow. Remix also offers helper methods like gson and Redirect to streamline working with the Fetch API. Remix simplifies data handling through HTML forms and HTTP, ensuring a smoother user experience. Httpication in Remix improves performance by reducing server load and speeding up response time. Cache Control headers in Remix allow for efficient data updates.

They carry additional information about the request or response, like the destination or the type of data being sent. The fetch method takes your request, delivers your response, and can be called from anywhere in your app. Loaders in Remix are functions that fetch data from the server for your components. There is a backbone of your app's data flow. And Remix adds requests, response headers, and fetch to your loader's global context. This means you can use them anywhere in your app, just like you would in the browser.

And lastly, we have helper methods like gson and Redirect that streamline working with the Fetch API. So with the Fetch API in Remix, handling data is as easy as sending a letter. So now let's dive into data rights and mutation in Remix. The magic is based on two basic web stuff. HTML forms and HTTP. Again, Remix is taking us back to the basics, but with a modern twist. When we talk about creating, deleting, or updating data on our website, we're really talking about form submissions. And this is not just about your big complex form like the user profile, edit profile page. Even the little like buttons are forms in disguise.

The Remix form components have some special features to the usual HTML form. After a form submission, all the loader on the page automatically refresh, showing users the latest info without needing to refresh the page. Reform your page, doesn't reload after a form submission, providing a smoother user experience. And then we can use hooks like use navigation that give us access to the pending form state, so we can build the user experience as smooth as butter. Think loading indicators, Optimix TQI, and all that good stuff. So in REMIX, action functions look after form submissions, and loader functions take care of getting data.

Httpication is a powerful feature that can really improve the performance of your web application. It's like giving your app memory. Instead of constantly asking the server for data, your app can remember some of it, reducing the load on your server, and speeding up response time for your users. In Remix, Httpication is used to its full potential. But what about updates? Well, Httpication in Remix is smart. It knows when to update the data. And this is where Cache Control comes in. You can define Cache Control headers right in your root modules. For example, you can set maxH300 to tell the browser to keep the cached data for 300 seconds.

5. Httpication, Global Search, and Storyblock

Short description:

With Httpication, your web app becomes faster, your server gets less stress, and your users stay happy. The headers function exports an object with a cache control property, specifying the maximum amount of time the fetched response can be cached. Building a global search with Remix is simple and not tedious. You can access the tutorial and the project repository to rebuild it. The project includes a website with multiple pages, a blog page with posts, and a search feature. The search query is passed in the URL, and the results are filtered by page and post. The project is built with Storyblock, a visual editor for headless CMS.

So, with Httpication, your web app becomes faster, your server gets less stress, and your users stay happy. It's a win-win-win situation.

In this example, the headers function is exporting an object with a cache control property. The value of this property is a string that tells the browser how to cache the response. The maxH directive specifies the maximum amount of time in seconds that the fetched response is allowed to be cached. In this case, it's set to 300 seconds or five minutes. So, this code is essentially telling the browser, hey, you can store this reference and use it up to five minutes without checking back with the server. And also, you can find many of the directives in MDN docs as, again, this is web standard.

So now, it's time to code and to build into a project and to drink some water. So I don't know about you, but building a global search, for me, has always been super tedious. And when I discover a mix and I build that for my blog, I was amazed by how simple it was. So I created a tutorial about it. So you can get here with this QR code. You can grab this tutorial and you will have access to the repo and to everything to rebuild the project that we are going to build.

So let's explore this project. So this is the little website I built for that. So there is two pages, a home and an about page. And a blog page with some posts. Now if I open a post I have a headline, an image and text. And here I have this search button that opens a model window with the search form. And here I type my query. So I type remix. I hit enter. So we have, we see briefly this search word and we can see that our query now is passed in the URL and it displays the results, a filter by page and post. Okay. So this is a report. So you have it in the tutorial, but you can see there. And this is the tutorial. Okay. Let's dive into the code and yes, and this is built with Storyblock, my favorite headless CMS, which has a visual editor.

6. Search Form and UI Overlay

Short description:

In our search form, we have a form component that behaves like a normal form, but with a fetch interaction instead of a new document request. We can simplify the form by using the default GET method and setting the action attribute to the search result route. This will process the form in the URL and attach the query value to it. Additionally, we have an overlay in the index that displays a searching word for a better UI experience during slow network connections.

So we have here's the pages. We can modify it here. And here is the blog. And in my page, I just have a body field. So this is where we are going to search if our query is contained. And in our blog posts, we have a headline. We have a headline, an image and a text field. So we need to search if our query is contained in our headline or in our text field or in our body field for our page.

Okay, so this is the code. We have this search result file and this is the route where we will find our results. We have our search form, which is placed into the index, into a model, which is built with Atlas UI, and then all that is placed into our header here. And yes, the results are displayed in the search results page. So, let's dive in now and explore our search form. We have our form here, the form component and here it says that it behaves like a normal form, except that the interaction with the server is with fetch instead of new document request. And so, this is why our page is not reloading when we submit a search. But, who remembers how a normal form behaves? It seems that I was not remembering because this is what I was doing. I was using the post method and then I was using an action in my root file here. Okay, so this action is here and from there I was getting the form data from the request and redirecting to the search result and passing the query to the URL. But, in fact, what I was doing here the basic form does it naturally. We don't need the POST method because the POST the form has a GET method by default but we need an action and this is action we need to set up the search result root and that's all what we need. So just with that our form is going to process in the URL defined in the action attribute, and then it will attach the value from our form, so our query, to the URL. So I was doing something, I was overcomplicating something that the basic form does naturally.

Okay, so let's continue. Then I have this overlay that is opening to have a better UI when we have a slow network and displays a word searching. So for that in my index, I have defined an open overlay and set open overlay state. And when I have open overlay, I show here my searching word. And here I'm using not in the header, I'm using the user, where is it? Sorry, I'm a bit lost. No, this is on the search form, and okay. I go back to the search form. So I have the use navigation hook that I initiate there with use navigation.

7. Handling Navigation State and Extracting Query

Short description:

If the navigation state is not handled, the overlay is opened, indicating that the form is searching. When the navigation state is loading, the model is also closed. The code has been updated to simplify the form and utilize web standards. The useNavigation hook handles the navigation state, eliminating the need for additional state management. The search result page extracts the query from the URL using the URL constructor and utilizes the Storyblock content delivery API to filter the story.

And then if the navigation state is not handle, I open my overlay. It means that my form is searching. And if not, I close the overlay. And then when the navigation state is loading, I also close my model. Okay, so let's see how it works in the website. So here I have a slow 3G. Okay? And now I go to the console. And I open, so you see navigation state. I type remix. I enter, okay, and I see that it's loading. Okay, so we have an error here, so I think I have made a mistake with my action. Anyway, what I wanted to show you, it's also a bug because I was over complicating things and I was feeling something was not right. And a few weeks ago, I was giving this talk at React Rally in Salt Lake City, and I crossed Ryan Florence, the creator of Remix, and he told me what I was doing wrong. So now, I'm going to show you all the right code, and I wanted to show you that because of our React instinct, we are over complicating things. Okay, so let's go to the right branch. Okay, I have some changes. Okay, so I've made a new form. Okay, so here we have the form done the right way. You know, if oh, yes, I forgot the S at search results. That's why it was bugging. Okay, so action search results, and we have no method or anything, just that, and here I just need my use navigation, and I initiate it here, and then I create a searching variable, so it's a navigation set, and navigation location path name is search result. It means my form is searching. So I create a user effect, and so if yes, if it's searching here, I show my overlay, and then in user effect, if it's not searching, I also close my model window with the search. So what I want to show you is we have to unlearn all the things that we want to put the state everywhere because of this react instinct, and we don't need it, because we are using web standards and this use navigation is already doing everything. Okay, so now we are on the search result page, and we are going to go back to the slides. We need to extract the query from the URL. So let's go back to my slides, okay.

Okay, so to extract the query from the URL, we need to extract the query from the URL, and then to filter the story, for that we will use the Storyblock content delivery API, which is the REST API from Storyblock. So to extract the query, we use the URL constructor to create an object representing the URL defined by the constructors. Then this object includes a search property, which provides utility methods to work with the query string of the URL.

8. Fetching and Displaying Filtered Stories

Short description:

To fetch our stories, we use the getStoryblock API from the React SDK and filter them using the filter query parameter. We search within specific fields using the like operation and retrieve all fields containing our query. By passing the filter parameter in our request, we can display the filtered stories. Using web standards in Remix improves app performance and efficiency, enhancing the user experience. We stick to web standards, ensuring our app is robust and future-proof. Check the Remix documentation and scan the QR code for a chance to win an Egghead subscription.

And now we need to fetch our stories, the stories in Storyblock are all the content items, so the pages, the post, and for that we use the getStoryblock API from the React SDK. So this will return all the stories, but here they are not filtered, so we need to filter them, and for that we use the filter query parameter to filter the story by specific attributes. So we are going to search within the body field for the pages, the headline and text field for the pages, and we use the like operation to check if a custom attribute has a value that is similar to our query. And we use an asterisk before and after, because we want to retrieve all the fields that contain our query. So then by default, everything is connected by the end operator, so we want the or operator for that we use the dash dash or keyword. OK, so this is all the code from our loader, so this is in the search result route, and we pass this filter parameter in our request here to retrieve the filtered stories. So this will return all the filtered stories. And now we just need to display them. So for that, we retrieve them using used other data, which is a remix of the hook that gets the data from our loaders. And then we filter our stories by component to separate the pages and posts. And then we have all the data to display that in our page and voila.

So, wrapping up, we've seen how using web standards in Remix makes building a global search a breeze. But it's not just about making our lives as developers easier, but also about delivering a top-notch user experience. So, with server-side filtering, http and all this good stuff, we are making our app faster and more efficient. JavaScript is here to enhance the user experience. And the best part, we are doing all this while sticking to web standards, ensuring our app is robust and future-proof. So it's a win-win situation for both developers and users.

So, I invite you to check the Redmix documentation which is really good. And also, if you want to win an Egghead subscription, you can scan this QR code, as Storyblock is organizing a raffle, so scan the code and fill out the form by December 31. So, thank you. Here you can scan this QR code and get all the slides. Have a nice day and see you around.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.