JS Nation

JSNation 2023

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.

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Alba Silvente Fuentes

Roberto Butti

Remix Conf Europe

Remix Conf Europe 2022

Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example). In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.

Full Stack Components

Kent C. Dodds

React Summit Remote Edition

React Summit Remote Edition 2021

Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Tom Preston-Werner

React Summit

React Summit 2023

* intro to DB application architecture (gateway + backend, multi-module react app + component library, etc) * Deep dive into CI/CD pipeline to do component library build + publish, app deploys pre canary (branch, dev, staging, prod), Lambda@Edge role * Side  note - multi module applications, enabling the right level of modularity, and B2B SaaS vs B2C * First canary problem - run full FE regression against stable (release candidate) backend early and often - before FE release candidates are cut * Second canary problem - run pointed FE regression even earlier - before MRs are even merged * Third canary question - what does this look like in production? Once again, B2B SaaS vs B2C * End result - Canaries in the CloudFront!

Canaries in the CloudFront

Vijay Ramesh

Remix entered the stage with a unique and refreshing take on how to develop on the web. But how do you integrate it into your existing ecosystem of applications? Do you want to test-drive Remix on a small project, or do you want to go full-in, but it is tricky to do a big-bang migration from your existing React app? In this talk, we're going to explore how a monorepo-based code organization can help integrate Remix with your existing React and TypeScript infrastructure, facilitating high code reuse and a migration path to Remix.

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

Remix gives developers the power to write their frontend and backend code in one unified location and language, which drops the fullstack barrier significantly for frontend devs and newer developers. The remaining piece, however, is the database. Throw Prisma into the mix and you've got a powerful fullstack experience with a very low learning curve. In this talk, we'll take a look at the amazing developer experience you get when you combine the two.

How Remix and Prisma Make Frontend Devs Fullstack

Sabin Adams

Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

Remix Architecture Patterns

Andre Landgraf

React Advanced

React Advanced Conference 2022

In this talk, we will take a novel and original look into some of the unexpected behaviors in a React codebase and the anti-patterns that cause them. We discovered them while building a new full-stack web development framework on top of React.

Killing Bugs With Kindness

Darshita Chaturvedi

Scaling and maintaining applications can be a pain, especially when thinking of how to build to get the user experience to a level that you are proud of. With all these shifting parts to consider, it is important to abstract parts of your applications to global reliable services. In this talk, we will discuss some of the services that Cloudflare provides, and the role they play in improving the overall developer and user experience.

Building full-stack applications on the Edge

Obinna Ekwuno

Learn how to build web apps from design in Figma to deploying to AWS while moving very fast.

Build a Fullstack App Fast with Modern Tools

Christian Nwamba

JSNation 2022

Learn how to build full stack apps with Deno and Deno Deploy. We'll build a simple app using the fresh (<a href="https://fresh.deno.dev/">fresh.deno.dev</a>) framework, and host it on Deno Deploy.

Getting Started with Deno and Deno Deploy

Luca Casonato

React Summit 2022

There is a lot of hype and interest around diving into the Web3 space, and it can be hard to manage the information overload and the emphasis on learning new languages to work on smart contracts. Many developers in the frontend space ask, “How much of this new information do I need to transition into web3?” The truth is as a React developer, the skills I know are essential in web3. Let’s add some context around how to leverage those existing skills to succeed in this new space. In this talk, we’re going to explore how to build the correct context and the technologies to understand to help you dive into web3 as a front-end developer. We’ll go over popular packages like Ethers, which can be used in React applications to interact with wallets and existing smart contracts. We will also explore how you can leverage your Javascript skills to build full-stack dApps using managed services like Moralis and Thirdweb. Let’s demystify some of the concepts in web3 and leverage our existing skills to start building.

A Frontend Developer’s Guide to Web3

Rahat Chowdhury

First there was LAMP, then there was MEAN and JAM. But now it’s 2022 and times have changed… What does the modern full stack look like? It’s built entirely from free and open source technologies, it’s scalable beyond imagination, it can run on premise or in the cloud, it should get out of the way and not lead to vendor lock-in, and most importantly it should “just work.” There are so many tools to choose from. Choosing the right stack from day one can be the difference from project success to smoldering pile of software ashes. Using fastify, mercurius, urql, and react we can build high performance full-stack applications using all javascript technologies.

Full-stack JS today: Fastify, GraphQL and React

Cody Zuschlag

I’m going to show you something you haven’t seen before — a simple, integrated workflow made possible by React, RedwoodJS, and Storybook. We’ll start from scratch, generate code for components, design and mock state, then finish with a secure API and CRUD UI. Sounds hard? It was. But not anymore! 🤯 You’ll learn how to bridge existing development gaps between stateful designs, data fetching, and your API using Redwood Cell components — a one-stop-React-shop for fetch, state, mocks, and design. Teams can move faster. Solo devs can iterate more quickly. And there are secondary benefits from documentation to security to accessibility, which add up to improving long-term maintainability at scale. Get ready to be inspired by what you’ll be able to build!

Design-Driven Full-stack: an End-to-End Dev Workflow that Scales

David S. Price

Node Congress

Node Congress 2022

Blitz was created as a fullstack React framework, inspired Ru on Rails, and with a goal to make you as productive as possible! It features a ""Zero-API"" data layer abstraction, has authn &amp; authz out of the box and a few more exciting features. However, we recently decided to pivot Blitz to a framework agnostic toolkit, which means a huge and thrilling change for the Blitz community. During this talk, I will introduce the core concepts, talk about the why &amp; how of the pivot, and give you a glimpse of Blitz's future. You can check the slides for Aleksandra's talk <a href="https://slides.com/aleksandrasikora/blitzjs">here</a>. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

A Glimpse Into the Future of Fullstack Development with Blitz.js

Aleksandra Sikora

GraphQL Galaxy

GraphQL Galaxy 2021

Every (frontend) developer is asking for a GraphQL API but often lacks the backend knowledge to create a performant server. There are many different flavors in creating the perfect GraphQL server, ranging from schema-first to code-first or even auto generated solutions. Let me show you the pros and cons of each solution so, after this talk, you'll know which solution would best fit your team. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

When (Not) To Create A GraphQL Server

Roy Derks

In this workshop, we'll build a React app from zero to one using a GraphQL API from Nhost. Table of contents: - Sign up to Nhost and create a Nhost app - Create database table - Set up React app - Install Nhost and GraphQL dependencies - Display data in React app - Let users sign in - Add GraphQL API permissions <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build a GraphQL App with React

Johan Eliasson

In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura. Table of contents: - Next.js overview and getting started with Next.js - API Routes with Next.js &amp; building a GraphQL API - Using the Neo4j GraphQL Library - Working with Apollo Client and GraphQL data fetching in Next.js - Deploying with Vercel and Neo4j Aura <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

William Lyon

React Advanced Conference 2021

Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs! Simon will introduce all the important parts &amp; guide you through getting started with Blitz, so you'll know if you might want to use it or not. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Fullstack Apps in Record Time with Blitz.js

Simon Knott

Vue.js Live Conference

Vue.js London Live 2021

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Fullstack Open Source Ecommerce

Jakub Andrzejewski

In this workshop, we’ll learn how to build a type-safe chain from API to the client with generated TypeScript tooling. Creating a type-safe environment for development reduces the number of bugs that get shipped to production, but also creates faster feature development once the ground-work is in place. This will be a fast-paced workshop covering an opinionated stack of features, but in the end, you’ll have a functioning framework for eloquent and type-safe development. Table of contents - We’ll begin creating a GraphQL API on Hasura Cloud and define some basic access controls and actions. - Then we’ll scaffold a TypeScript-ready framework with NextJs. - With the framework and API in place, we’ll generate an SDK using GraphQL Zeus. - Lastly, we’ll generate some type-safe state management wrappers with easy-peasy for implementing a basic login and authentication flow. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fullstack Type-Safety with GraphQL and Hasura

Jesse Martin

The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development. Table of contents - Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes. - Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out. - Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown. Workshop level NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building full-stack GraphQL applications with Hasura and Vue 3

Gavin Ray

React Summit 2020

Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover: - A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Zero to Production with Fullstack GraphQL and React with Hasura team

Allison Kunz

JSNation Live

JSNation Live 2020

In this talk I’ll show how we can use a combination of GraphQL SDL along with a new DSL (GraphQL Transform) created the Amplify team to build out a full stack cloud application directly from your GraphQL schema. Using this GraphQL DSL, we’ll walk through how to model a Database, authorization rules, relationships, and custom access patterns. We’ll look at how to rapidly prototype an example application, and view some demos including a voting app capable of handling over 100,000 operations per second. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Transforming GraphQL – Infrastructure as Code for Front End Developers

Nader Dabit

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz.

Blitz.js - The Fullstack React Framework

Brandon Bayer

New fullstack frameworks like Blitz.js and RedwoodJS are ushering us into a new era for fullstack development. They are mixing old concepts and ideas with cutting edge technologies to make fullstack developers more productive than ever. Watch this talk to go on a journey through time and get excited about what lies ahead. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#fullstack