JS Nation

JSNation 2023

Today's workshop focused on creating a website using SvelteKit and Storyblock CMS. It covered topics such as installing SvelteKit and integrating Storyblock, configuring SSL for localhost, connecting Storyblock SDK with a space, retrieving data and setting up preprocess, creating components and styling with Tailwind, compiling components and troubleshooting, creating dynamic pages and adding fields to the schema, working with the image service, and deploying and internationalization. The workshop also touched on advanced topics like multilingual support and emphasized the importance of being familiar with a good CMS and framework for job opportunities.

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

RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.

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

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

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 US

React Summit US 2024

Let's start by setting up an application in the Squid console. Squid AI is a developer platform that offers ease of use and AI capabilities. Learn how to build full stack applications faster using Squid. Explore the features and documentation to add functionality, view and manage data, update and delete items in the database, and secure your application. Implement triggers, schedulers, and web hooks for automation and asynchronous communication. Discover how to add AI functionality with Squid's AI agents. Set up a new application, add an AI agent, and provide context for queries. Build and query tasks in the database using AI agents. Access controls and pricing options are available in the Squid console. Join the Discord community for support and to share your projects.

We’re all here because we love React, and we love it because it’s a simple and intuitive system for creating beautiful, interactive websites. What if building full-stack apps could be just as simple and intuitive? Managing data and resources in your web applications doesn't have to be complex and time-consuming! Learn how to connect databases, APIs, and other services to your apps in minutes to make real-time interactive experiences for your users. In this session, you'll start with a blank page and end with a portfolio-worthy app and the skills you need to build your next app.

From Frontend to Full-Stack: Adding Features Without Adding Time

Jen Person

React Advanced

React Advanced 2024

Today's workshop focuses on the journey from React frontend development to full-stack development with Next.js. Participants will follow the Next.js Learn tutorial, covering topics like styling, optimization, routing, data fetching, search, pagination, and authentication. Troubleshooting installation and running the Next.js application is discussed, along with handling fonts, optimizing images, and resolving hydration errors. The workshop also explores server-side components, database setup, and fetching data in Next.js. The usage of APIs, static and dynamic rendering, and closing remarks are covered as well.

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps. - Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer

The Journey From React Frontend Development to Fullstack Development With Next.js

Eric Burel

Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.

Next.js is the default choice for most teams, although there are many other solutions on the market. One of such solutions is Astro, which in certain areas, due to its eccentric approach, seems to outclass the Vercel king. During this lecture, I will present the key features of Astro, as well as the differences between it and the aforementioned Next.js. You will learn what interactive islands are, why MPA (multi-page application) is still a very good choice for content-driven websites, and much more. Who knows - maybe you will use Astro in your next project?

Astro – Island Technology in the Name of Optimization

Szymon Chmal

Hello, everybody. I'm Elion, the Lead Developer Relations at React Bricks. Astro is a web framework for content-driven development, similar to Next or Nuxt. It supports TypeScript and JavaScript and compiles down to HTML and CSS, resulting in excellent indexability and SEO. HTML and JavaScript can be used together with Astro through client directives, allowing for interactive websites while optimizing performance. Astro's server islands architecture delays rendering until all content is available, and client-side interactivity is achieved through battery API and server authentication. Astro provides native data loading and supports open-source loaders for different content types. Collections and Astro Actions make content reuse and API usage easier. Zalt Schema, AstraDB, and ORM are available for form data handling. AstroDB and Starlight enable the use of different databases and on-demand rendering. Astro 5.0 introduces better localization, simplified rendering modes, and a content layer API. There is an upgrade guide for Astro 5.0 and it integrates well with React. Astro is recommended for content-driven websites but may not be ideal for building dashboards or authentication services. Astro has influenced other frameworks and aims to push the web towards better standards.

In this talk, we'll explore building full-stack web applications powered by Astro and Astro DB.We'll start by discovering the basics of Astro, why and where it's useful, and how to build a simple web application with it. We'll discover how to use Astro's hybrid rendering mode to add API routes and dynamic server-side rendering to the application.Then we'll dive into Astro DB, a simple, yet powerful ORM used to communicate between a LibSQL database and your Astro application. Also, Astro 5.0-beta has been released, we’ll round up the talk by looking at the new features, some demos and discovering how to upgrade.

Diving Into Server Islands

Elian Van Cutsem

Node Congress

Node Congress 2024

The future of web frameworks will be a DSL, simplifying development and allowing for clear instructions for AI collaboration. DSLs like SQL and JSX have value in building better web apps. Wasp is a powerful full-stack web app framework that eliminates the need for writing backend code. It offers features like cron jobs, type safety, and email sending. Wasp also has projects like OpenSaaS and Mage that provide production-ready templates and AI-generated prototypes.

With all the web framework options available in popular programming languages today, why would anyone want to create a new Domain-Specific Language (DSL) for building full-stack web apps? In this talk, we will cover our rationale for deciding to do so, why DSLs are a compelling option, their pros and cons, and what it has enabled us to build for full-stack JavaScript devs so far. Additionally, we will cover some of the ups and downs of open source devtool development from our nearly three-year journey since Y Combinator (YC)

The Full-stack Framework of the Future is a DSL

Vince Canger

React Summit

React Summit 2023

Today's Talk covers designing frontend CI/CD systems, integrating CDNs, and the impact of business type on frontend teams. The speaker shares their experience with CDN integration and its impact on their CI/CD strategy. They discuss canary releases and the challenges of pushing canary deploys to production. Additionally, they highlight the importance of integration testing for shift left and detecting issues before merging to the develop branch.

* 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

Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.

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 and Prisma enable front-end developers to become full-stack developers by working across different parts of the stack without diving into complexities. They provide a great framework for writing code and interacting with databases, making it easier to be a full-stack developer. Prisma's ORM allows mapping database models to JavaScript or JSON models. Developing a full stack app with Remix requires structuring components and loaders differently, but simplifies development by focusing on one place.

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

This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.

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 2022

This Talk focuses on reducing bugs in a React codebase by understanding antipaths. It discusses the types of bugs identified and the guardrails implemented to prevent them. The importance of being cautious with hooks like useState and useRef is emphasized, along with the use of context for state storage. The refactoring example demonstrates how reducing useState and callbacks can improve code quality and efficiency in the framework.

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

This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.

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

Today's workshop focused on AWS Amplify, a tool that simplifies the lives of frontend and mobile developers. Participants learned how to create a React app, set up a data model, generate seed data, and use the UI library feature. They also explored pulling components into a Figma project, previewing and binding data to components, and setting up dependencies. The workshop covered rendering components, adding functionality, handling authentication and authorization, and deploying the app. Overall, participants found Amplify to be a quick and efficient way to build and deploy apps with constant improvements in the UI feature.

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

Today's workshop is about building a full stack application using Deno and Deno deploy. We will create a blog with personalized blog entry pages and explore Deno's features such as TypeScript support and integrated tool chain. Deno deploy allows for easy deployment of Deno applications, and Fresh is a full stack web framework optimized for fast and scalable applications. The workshop covers topics such as setting up Deno, creating projects with Fresh, handling static pages and blog posts, testing, client interactivity, and deployment using Deno Deploy and GitHub Actions.

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

This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.

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

This Talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven workflows and the use of Redwood Cells to handle state and simplify complex tasks. The Talk also highlights the seamless integration between the front end and back end using mock data and the optimization of workflow for performant teams. It concludes with a mention of Redwood's authentication features and the importance of community and collaboration.

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

The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.

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

Node Congress 2022

Today's Talk focused on the future of full-stack web development with Blitz.js. Blitz is a React framework built on top of Next.js, offering direct database access and authentication with authorization. The core features of Blitz include the zero-API layer and the ability to run server code directly from the frontend. The future of Blitz includes expanding to other frameworks and runtime environments. The new Blitz toolkit will be decoupled from any specific framework, allowing developers to choose their preferred foundation. It will retain the core value of Blitz while adding additional features like JWT authentication and advanced data-aware authorization. The migration to the new toolkit will be seamless for existing Blitz projects. The Blitz toolkit will have a plugin system for customization and support multiple resolvers. The Blitz project is currently going through a pivot and will focus on the Blitz toolkit. The goal is to release the toolkit by the end of March. The most exciting part of the toolkit is the plugin system design that allows users to customize their experience.

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

Building a scalable GraphQL server can be challenging. There are multiple reasons to build a GraphQL server, such as optimizing client requests and wrapping microservices. The SDL first GraphQL server allows you to write your schema separately from your resolvers, giving you full control. You can create a GraphQL API automatically from a schema, simplifying the process and eliminating the need for manual deployments. The schema can link data sources and third-party APIs, allowing for easy integration and customization.

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, participants learned how to build a React app with GraphQL and TypeScript using NHost as a serverless backend. They set up the app, explored NHost features, created a Postgres database with a GraphQL API, implemented authentication, and protected the dashboard. Real-time data synchronization was also demonstrated, and participants learned how to enable third-party sign-in methods. Overall, the Workshop covered a range of topics and provided a comprehensive overview of building a full-stack application.

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

The Workshop covered various topics related to building a full stack news article application using Neo4j AuraDB, GraphQL, and Next.js. It discussed graph data models, traversing graphs, and building GraphQL APIs backed by Neo4j. The Neo4j GraphQL library was highlighted for its ability to generate resolver functions and optimize database queries. The Workshop also covered Next.js and deploying the application to Vercel. Custom logic was added to the GraphQL API using the Cypher-GraphQL-Schema directive.

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 2021

Blitz.js is a full stack React framework that eliminates the need for REST or GraphQL. It provides a zero API data layer and allows developers to focus on building applications. Blitz offers features like React Suspense for asynchronous data loading, Prisma Studio for immediate updates, and a routes manifest for type-safe links. It also supports writing to the database through mutations and provides default caching with React Query.

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

This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.

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

This workshop explores back to front type safety in building front-end applications using TypeScript and Next.js. It covers setting up a cloud project with Hazura, creating login and signup actions, handling API endpoints with a Next.js application, and querying and displaying user data using Apollo Client. The workshop also includes setting up state management with easy peasy and debugging authentication and state management issues. Overall, it provides insights into building future-proof, stable, and secure apps using these tools and technologies.

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

GraphQL is a powerful tool for building APIs, offering flexibility in data retrieval and real-time functionality. It simplifies API documentation and enhances development with type checking and code generation. Hasura is a popular GraphQL engine that supports subscriptions, permissions, and database integrations. The Workshop covers topics such as setting up GraphQL APIs, handling permissions and security, integrating authentication, and using GraphQL with Vue.js. It also discusses various libraries and tools for working with GraphQL APIs and state management.

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

GraphQL is being discussed as an alternative to REST APIs, offering benefits such as simplified feature updates, interconnected data management, and powerful developer tools. It provides solutions for performance issues and scalability through query compilation and caching. Hasura acts as a wrapper for non-GraphQL systems, allowing easy integration and versioning. The workshop covers setting up Hasura Cloud, migration, authentication with Auth0, and troubleshooting. Attendees are encouraged to explore additional resources and join the active Discord community.

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

This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.

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 framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.

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

React has evolved over the years, introducing breakthroughs like the declarative component model and React hooks. Create React App and Next.js abstracted away webpack config and routing, improving developer productivity. GraphQL backend as a service platforms made it easy to set up a backend without extensive knowledge. Blitz.js and Redwood.js are game-changing batteries included frameworks for full stack React development. They aim to make backend development easier for front end developers and optimize full stack productivity.

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