Remix

• Remix is a full stack web framework built on top of react that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.
• It is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds.
• It's Built on the Web Fetch API (instead of Node) it can run anywhere
• Uses Nested routes, to eliminate nearly every loading state
• Most web apps fetch inside of components, creating request waterfalls, slower loads, and jank. Remix loads data in parallel on the server and sends a fully formed HTML document
• Remix can prefetch everything in parallel before the user clicks a link
• Zero loading states. Zero skeleton UI
• Remix runs actions like forms submissions server side, revalidates data client side, and even handles race conditions from resubmissions

A quick start

mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot react react-dom

# install dev dependencies
npm i -D @remix-run/dev

mkdir app
touch app/root.jsx

Commands

• npx remix build - Created a build/ folder (the server version of your app) and public/build folder (the browser version)
• npx remix-serve build/index.js - Runs the app using the remix-serve tool

Links

• Remix Bossa Nova Stack built with Remix, Clerk, Supabase, Chakra, Typescript, Jest and Cypress and Vercel
• Remix Blog Site
• Remix Tutorial

Redwood Js

• Redwood is a React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
• It's an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup
• Mission is to help more startups explore more territory, more quickly.

At the highest level, a Redwood app is a React frontend that talks to a custom GraphQL API. The API uses Prisma to operate on a database. Out of the box you get tightly integrated testing with Jest, logging with Pino, and a UI component catalog with Storybook. Setting up authentication (like Auth0) or CSS frameworks (like Tailwind CSS) are a single command line invocation away. And to top it off, Redwood's architecture allows you to deploy to either serverless providers (e.g. Netlify, Vercel) or traditional server and container providers (e.g. AWS, Render) with nearly no code changes between the two!

• Redwood uses Prisma, a next-gen Node.js and TypeScript ORM, to talk to the database.
• Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend
• Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and service
• Redwood has a built-in, database-backed authentication system (dbAuth)

Stack

• React, GraphQL, Prisma, TypeScript, Jest, Storybook

A quick start

yarn create redwood-app my-redwood-project --typescript

cd my-redwood-project
yarn install
yarn rw dev

Commands

• yarn redwood generate page my-page - Generate a page
• yarn rw prisma migrate dev - Create a DB Migration
• yarn redwood generate scaffold post - Scaffold all the pages, components, and services necessary to perform all CRUD actions on posts table
• yarn rw storybook - Design frontend components
• yarn rw generate cell examplePosts - generating a Cell, Redwood's data-fetching abstraction:
• yarn rw setup ui --help - style using a styling library
• yarn rw test - Test frontend snd backend
• yarn rw setup deploy --help - Shipping to serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWs
• yarn rw setup auth --help - Help in setting up Authentication

Links

Svelte

• cybernetically enhanced web apps

• SvelteKit is the official application framework

• SvelteKit handles calling the Svelte compiler to convert .svelte files into .js files that create the DOM and .css files that style it.

• It also provides all the other pieces you need to build a web application such as a development server, routing, deployment, and SSR support.

• SvelteKit uses Vite to build the code.

• Has Less boilerplate code to write, so developers can focus on creating solutions.

• Reactive variables can be easily created by simply adding $: at the beginning of the declaration.

• No more virtual DOM, so apps perform faster and more reliably.

• Svelte is better suited for smaller applications demanding high performance

• Svelte has a much smaller build bundle size than React, making it faster to load.

• Additionally, Svelte does not use a virtual DOM like React does, so it can so apps perform faster, more reliably and update changes more quickly. This makes it ideal for creating small applications and building dynamic interfaces.

• Allows you to build your app declaratively out of components that combine markup, styles and behaviours

• In short, Svelte is a way of writing user interface components — like a navigation bar, comment section, or contact form — that users see and interact with in their browsers.

• The Svelte compiler converts your components to JavaScript that can be run to render the HTML for the page and to CSS that styles the page

• SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.

• Similar to React's Next or Vue's Nuxt.

• It offers everything from basic functionalities — like a router that updates your UI when a link is clicked.

• Its extensive list of features includes build optimizations to load only the minimal required code; offline support; preloading pages before user navigation; configurable rendering to handle different parts of your app on the server via SSR, in the browser through client-side rendering, or at build-time with prerendering;

• Each page of your app is a Svelte component

• You create pages by adding files to the src/routes directory of your project. These will be server-rendered so that a user's first visit to your app is as fast as possible, then a client-side app takes over

• Runs on localhost:5173

A quick start

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

Commands

• npm run dev -- --open - to run project

Links

• Examples
• global network of Svelte fans that strive to promote Svelte and its ecosystem