Is One the ultimate React and React Native Framework?

Summary

In this video, the creator reviews the 'One' framework, designed for building full-stack React web and React Native applications seamlessly. The setup is straightforward, leveraging a full-stack starter template that includes essential tools like Tamag UI and Drizzle. Key features include a file-based routing system, versatile components for cross-platform design, and efficient data loading mechanisms. While the framework shows promise with its unified codebase approach, early-stage stability issues and library compatibility concerns remain. The review highlights both pros and cons, emphasizing its potential for rapid development in startups and proof-of-concept projects.

Takeaways

• 😀 The One framework allows developers to build full-stack React web and React Native applications from a single codebase.
• 🛠️ Setting up an app with One is straightforward; developers can choose between a barebones setup or a full-stack example with essential components.
• 📸 The Tamag UI toolkit is crucial for creating cross-platform UIs that work seamlessly on both web and mobile.
• 💾 The framework supports various data storage options, allowing developers to use file-based systems or integrate with PostgreSQL via Docker.
• 🌐 One uses file-based routing, where the organization of files and folders defines the app's route structure.
• 🔄 It supports multiple types of routes, including static routes, server-side rendered (SSR) routes, single-page applications (SPAs), and API routes.
• 📱 Tamag UI components facilitate responsive layouts, offering XStack and YStack for flexible design across platforms.
• 📦 Developers can manage platform-specific code through separate files for web and native versions, ensuring tailored functionality.
• ⚠️ One is still in early beta, meaning developers may face stability issues and compatibility challenges with certain libraries.
• 🚀 The framework is praised for its efficiency and potential for rapid prototyping, making it suitable for startups and proof-of-concept projects.

Q & A

What is the One framework designed for?

The One framework is designed to build full-stack web applications using React and React Native, allowing developers to create both web and mobile apps from a single codebase.

How does the setup process for the One framework work?

Setting up an app with the One framework is straightforward. You can use the command 'mpx1' to initiate a setup, choosing between a barebone configuration or a full-stack example, which includes necessary tools like TamagUI, Drizzle, and Postgres.

What are some key components included in the full-stack starter template?

The full-stack starter template includes TamagUI for cross-platform UI components, Drizzle for managing data, Postgres as the database, and biome for linting and tooling.

What unique feature does the Zero database API provide?

The Zero database API offers real-time capabilities and is currently in private beta. Users interested in exploring it can inquire for early access.

What routing mechanism does the One framework utilize?

The One framework uses a file-based routing mechanism, where the organization of files and folders in the app directory defines the structure of the routes.

What types of routes can be implemented with the One framework?

The One framework supports several types of routes, including static routes (SSG), server-side rendered routes (SSR), single-page application routes (SPA), and API routes.

How does data loading work in the One framework?

Data loading in the One framework is handled through loader functions, which are executed at build time for SSG routes and on each request for SSR routes. This allows dynamic data fetching based on the current context.

What is the advantage of using TamagUI for components?

TamagUI is beneficial because it provides a comprehensive set of cross-platform components that are themeable and can be used seamlessly across both web and mobile applications.

What are the pros and cons of using the One framework?

Pros include its capability to create a unified codebase for web and mobile apps, fluid development experience, and flexibility in architectural choices. Cons include its early beta status leading to stability issues and compatibility challenges with certain libraries.

What is the significance of the Infinite Red consultancy mentioned in the video?

Infinite Red is a well-established React Native consultancy that provides expertise and support in the React Native community, offering resources and services for developers, including help with issues and frameworks.

Outlines

00:00

🛠️ Overview of the One Framework

This part introduces the One framework, highlighting its capability to build both full-stack React web applications and React Native applications seamlessly. The speaker shares their experience of spending a week testing the framework, focusing on a straightforward setup process using MPX1. They recommend starting with a full-stack example for better insights into necessary features, including Tamagoi, Drizzle, PostgreSQL, and biome for tooling. The discussion includes a simplified approach to building a photo application, emphasizing the importance of cross-platform UI and how to effectively manage routing, file organization, and data loading within the app.

05:01

🚀 Routing and Features in One Framework

In this section, the speaker delves into the routing capabilities of the One framework, clarifying that it employs a file-based routing system similar to Next.js. Different types of routes are defined, including static routes (SSG), server-side rendered routes (SSR), single-page applications (SPA), and API routes. They explain the organization of routes through file structure and discuss how each route type functions within the application. The speaker also outlines how data loading works, using loader functions to fetch and render data effectively while emphasizing the framework's flexible architecture that supports both web and mobile environments.

10:03

📱 Components and Responsive Layout

This part emphasizes the importance of using the Tamagoi component library within the One framework for building responsive layouts. The speaker details various components that facilitate cross-platform development and provides examples of how to structure code for web and native versions. They discuss the advantages of using layout components, the handling of platform-specific styles, and the ability to set custom breakpoints for responsive design. The section concludes with a focus on the elegant solution for managing native-only code, showcasing the flexibility and convenience of the framework.

15:04

⚖️ Pros and Cons of the One Framework

In the final part, the speaker evaluates the pros and cons of the One framework, noting that while it presents an innovative solution for shared codebases between web and mobile, its stability remains a concern due to being in early beta. They point out the need for library compatibility and the potential for issues requiring patching. On the positive side, the framework's ability to deliver a fluid development experience and avoid architectural constraints is highlighted, making it suitable for rapid development of full web and mobile applications. The speaker concludes by expressing confidence in recommending the framework for startups and proof-of-concept projects.

Keywords

💡One Framework

The One Framework is a development tool designed for creating full-stack applications that run on both React web and React Native platforms. It simplifies the development process by allowing developers to use a single codebase for both web and mobile applications. This is highlighted in the script when the presenter discusses the framework's capabilities in delivering a fluid development experience, reducing the complexity of managing separate codebases.

💡Tamagoi

Tamagoi is a cross-platform UI toolkit that is integral to the One Framework. It provides a set of components that ensure a consistent user interface across both web and mobile applications. The presenter emphasizes Tamagoi's role in building user interfaces and mentions that it comes pre-installed with the framework, making it easier for developers to create visually appealing applications that function seamlessly on multiple platforms.

💡Full Stack

Full stack refers to the complete range of technologies and tools used to build an entire application, encompassing both the front-end (user interface) and back-end (server-side logic and database interactions). In the context of the One Framework, it means that developers can manage everything from user interface design to database management within a single project structure. The script illustrates this by mentioning the use of PostgreSQL and Drizzle for database work within the full-stack setup.

💡File-based Routing

File-based routing is a method of organizing application routes based on the structure of the file system, where the folder and file names determine the routes in the application. This approach simplifies route management and makes it easier to visualize the application structure. The presenter compares this to routing methods in other frameworks like Next.js, explaining how the organization of files defines the application's navigation paths.

💡SSR (Server-Side Rendering)

Server-Side Rendering (SSR) is a technique where the HTML of a web page is generated on the server for each request, rather than being generated on the client side. This can improve performance and SEO. The video script mentions SSR routes in the One Framework, explaining how they allow dynamic content rendering based on user requests, which is crucial for applications that require real-time data updates.

💡SSG (Static Site Generation)

Static Site Generation (SSG) involves pre-generating the HTML pages at build time, so they can be served directly to the user without the need for server processing. In the video, the presenter notes that the default render mode for the One Framework is set to SSG, ensuring that routes are compiled and cached, which enhances loading speed and reduces server load during user interactions.

💡API Routes

API routes are endpoints within an application that handle requests for data, allowing for interaction with server-side logic. The script explains how the One Framework supports defining API routes, where developers can export functions that correspond to HTTP methods (e.g., POST, GET). This modular approach facilitates data handling within the application, making it easier to manage user actions like uploading files.

💡Responsive Layout

Responsive layout refers to design techniques that ensure an application’s user interface adapts to various screen sizes and orientations, providing an optimal viewing experience across devices. The presenter highlights how the One Framework employs Tamagoi's components to create responsive layouts using flexbox principles, ensuring that web and mobile versions of an application look consistent and functional regardless of device.

💡Cross-platform

Cross-platform development allows applications to run on multiple operating systems or environments without requiring extensive code modifications. The One Framework is designed with cross-platform capabilities, allowing developers to write code once and deploy it across both web and mobile platforms. The script points out that this feature is essential for modern app development, streamlining workflows and improving productivity.

💡Community Support

Community support refers to the assistance and resources available from the developer community surrounding a technology or framework. In the video, the presenter notes the responsive nature of the One Framework's development team, which addresses compatibility issues and library patches promptly. This highlights the importance of community engagement in ensuring the framework's reliability and success, especially during its beta phase.

Highlights

The One Framework allows for building both full-stack React web and React Native applications in a single setup.

The setup process is straightforward, using mpx to initiate an app, with options for barebone or full-stack examples.

The full-stack example includes Tamagui, Drizzle, PostgreSQL, and biome for development tooling.

Tamagui is highlighted as a top-tier cross-platform UI toolkit essential for React web and native applications.

The demo app, a simple photo application, uses file-based storage instead of PostgreSQL for simplicity.

Development involves using Yarn commands to launch the app and access features via a web view or Expo QR code.

The photos app allows users to upload photos, view details, and features a static about page.

Routing is based on a file structure, making it easy to define routes through the organization of files and folders.

Different route types include static, server-side rendered (SSR), single-page application (SPA), and API routes.

Loader functions are used for data fetching during page render, supporting both static and SSR routes.

Components and layouts can be built responsively, leveraging Tamagui's cross-platform capabilities.

Tamagui supports platform-specific styles and responsive design using attributes like `$platform`.

One framework allows for easy switching between web and native components without significant restructuring.

Despite its potential, the framework is in early beta and may present stability issues with certain libraries.

The framework's development team is responsive and proactive in addressing compatibility issues with libraries.

One Framework provides a single codebase for both web and mobile applications, reducing complexity in development.

This framework is recommended for startups needing a quick, full web and native experience.

Transcripts

is one the one framework that you need

to build a full stack react web

application and a react native

application all in one go let's find

[Music]

out so I spent the better part of a week

trying out one building apps testing out

features and unlike the coding

walkthroughs I usually do instead I'm

going to give you the kind of review I

might do if I was say a principal at a

big company looking to try a new

framework and then recommend it to my

peers and showing off the features and

doing then some pros and cons at the end

so let's start off with setup it's

really easy you use mpx1 to set up an

app and your choices are between a

barebone setup with or without tomag GOI

and a full stack example if you want to

try it out I'd go with a full stack

example because it's got most of what

you're going to need it's got tamagi

which is a crossplatform UI toolkit

which is also from the same folks behind

the one framework itself as well as

drizzle and postgress for database work

and biome for tooling like linting and

all that the tamagi component library is

clearly one of the critical pieces here

because whatever you choose for the UI

you're going to need to have it be

crossplatform so it works across both

react for web and react native and tomoi

is a top tier component system for doing

that now for my simple photos

application I started with that full

stack starter and I I stripped it back

so that instead of using postris and

drizzle i instead used a file based

storage system I did that basically to

simplify it for you if you wanted to try

out my code to use the postc stuff you

follow the instructions in the readme

for that full stack app and it goes

through how to use Docker compose to

bring up a postgress instance if you got

doer install it it's pretty easy to do

that but I just wanted to go with that

file system anyway the one full stack

template installs postgress because the

postgress database is behind this

real-time database API called Z Z

they're I think soft partnering with now

the documentation on the one site says

the zero stuff is really cool but it's

also in private beta so if you're

interested in that let me know in the

comments and I'll reach out and see if

they can give me an early look and we'll

have a look at it so when it comes to

developing on this to install it you're

just going to use yarn install and then

use yarn Dev that's going to bring up

this interactive mode where you use oow

in there just type O to BR bring up the

web View and then QR to bring up the

Expo Q q r code if you're going to look

at it in Native now you can just point

your phone at that QR code or if you

want to do it locally I use the

simulator and I bring up Expo in that

simulator I type in the URL of the app

but instead of using HTTP I use exp

instead as the protocol and then I just

give it

1271 colon 881 all right let's have a

quick look at this photos app that I

built of course all of the code for that

is available to you for free in the link

in the description right down below the

homepage for both web and mobile shows

all the uploaded photos that you upload

and then you can click on a photo and go

to a detail page on it you can also

upload a photo using a file picker on

the web or a camera on mobile and

there's this static about page so I'm

just trying to try out all the different

types of routes and uis so let's have a

look at the project over in cursor and

you can see that all the routes are

defined over in the app folder there's

also some additional non- routing code

shared code located in the code folder

you can change that to source if you

want to I don't particularly like the

word code in this case I wouldn't do

Source but code is what you'll get if

you do the full stack starter so there's

the config folder and it just holds the

tamagi config we'll take a look at that

more in detail in a bit there's also a

public folder which has the public

Assets in my app there's also an uploads

folder inside of that where the uploaded

pictures go and there's also a photos

Json file with my files based database

as opposed to that postris stuff there's

a few more things on the top level

there's an app. Jon that has the Expo

configuration for the native app there's

a biome dojon that defines like linting

and formatting specifications and then

there's a react native config which has

the setup for vxn now VX RN is a

critical piece of the infrastructure

here so one is built on top of vit and

vxr N is the bridge from vit to react

native land and gives you a platform for

both web and react native from the same

code codebase so if you're looking for

that shared codebase idea but you don't

think that one has quite the right

structure for you then maybe you could

use vxr as a starting point and build

whatever you want to on top of that then

they got a TS config for typescript it's

the usual stuff although they do add a

path for TIY which gets you to the top

of the project so you can use that in

your Imports and then for the V config

we bring in both one and the tagui

configurations now notable here is the

default render mode which is set to SSG

or static site generation which means

that by default all of the routes in

your app will be compiled and cached at

build time but we'll get into that when

you talk about routing in the meantime I

hope you're enjoying this new faster

format if you are let me know in the

comments and speaking of fast if you

want to get into react native super fast

you should check out this week's partner

infinite red infinite red is the OG

react native consultancy they are react

native experts and they've been an

integral part of the react native

Community from the very start and they

work with some of the biggest brands out

there Domino's merari Zoom Zoom Care and

many more these companies trust their

expertise with react native and I do too

whenever I get a question about react

native I hit up my friends over to

infinite red and they've always helped

me work through my issues and they can

do the same for you infinite Red's also

Super Active in the community each year

they run a chain react conference right

here in Portland Oregon I had the honor

of speaking there last year about how to

use react native with AI and not only

did they help me get that app running

they also have an open source AI for

react native project that they sponsor

as well as the OSS ignite framework that

makes it super easy to scaffold out your

react native app so if you're looking

for react native consultancy look no

further than my friends over at infinite

red thank you guys so much for

supporting this Channel all right let's

talk about routing now before I get into

the specific mechanics it's important to

know that this is not a web app running

in a web view on Native one handles web

routing and building Pages for web and

on mobile it's doing the native routing

and the native rendering using react

native that's why you need something

like tagui as well because you want that

one set of component Primitives that

work across web and Native all right so

one is a file-based router which means

that the organization of the files and

the folders in that app directory

defines the structure of the routes for

example the about. TSX file at the top

level here is slab on web if you click

on a photo you go to The Details page

for it so that's

sloid and that's in this photos route

group and then within that photo as a

folder and then within that the brackets

ID that indicates a parameterized route

now there's also plus SSR which we'll

get to in a second second so the

structure of the files and the folders

in that directory is the structure of

the routes and this isn't really

anything unusual nextjs remix tan stack

router they all support file-based

routing but of course they use different

syntaxes for it this one's actually very

similar to nextjs so now we know how

stuff is laid out let's talk about the

different types of routes that one

supports there is the default which is a

static route and that gets built at

build time and it's f fix in my app the

photos app the only page that's static

is the about page then there's a server

side rendered route or SSR route that's

a route that's rendered dynamically on

each request and you specify that using

plus SSR as part of the file name on the

route the homepage for example which is

inside that photo's route group is SSR

so it has that plus SSR every time you

request home it goes and gets the photos

and it renders out a new page now the

route group thing with the parentheses

is a little weird the first time I saw

this was with the nextjs app router

basically a route group is an

organizational way to hold a bunch of

related routes together but the route

group name itself in this case photos in

this case doesn't appear in the URL so

you might think with this structure you

get sloto sloto but it's just sloto so

moving on there's spa or spa or single

page application pages in this case our

upload page is a spa page now these

pages aren't server side rendered

they're only client side rendered so for

an upload form it just makes sense for

it to be a spa page and then finally

there's API routes in this case the

upload Handler that's called from the

upload page when you upload a new image

is an API route for an API route you

export functions that match the HTTP

method names like in this case an all

uppercase post will get you a post

Handler and then you get a request as

input and you

do whatever process you want to do in

this case I'm storing the uploaded file

and at the end you return whatever Json

you want to send back this is actually a

pretty popular way of doing API routes

now and I I I like it for react routes

so SSR SSG and Spa routes the module for

that page needs to return a default

export and that's going to be the

rendering component like my about route

here that just returns a component that

has the about page in it there's also

special name component like this

underscore layout that wraps the routes

you can see that the top level layout

that includes the metadata when you're

in web mode so this is web flag your

code is a way to include or exclude code

specifically for web or native that's

just one way to do it that layout also

has providers and in this case tomag GOI

and theme providers so layouts can also

be nested so in this case in that photos

group for either the homepage or the

photo details route then the layout

that's in there will be nested inside of

the parent layout at the top level all

right so that's routing with one let's

talk about how to do data loading

because when you render a page we're

going to want some data probably to

render so let's have a look over at the

about page it's an SSG route because

that's the default and we haven't

specified a type and it has a loader

function in it now that loader function

in this case is run at build time and it

sends back this little bit of data back

to the component that uses the use

loader hook to get access to that data

now let's check out the SSR rep for the

homepage here we're loading all of the

photos in this case we our file but you

could do it from a database if you want

and then passing them on to the page

through that used loader and then on the

photo Details page we get the ID

parameter which is specified in the file

name in the loader function and then we

use that to load the data for the

specific photo and then we send that

along to the page for rendering again

through use loader so this loader

architecture is pretty standard for

these full stack Frameworks it's in

tanack remix the nextjs pages router but

it's unlike the nextjs app router that

uses react server components or rsc's to

load and render the data I actually

think that's going to be a big

differentiating feature between these

Frameworks coming up some that are doing

the loader stuff and others that are

doing the RSC stuff all right now let's

talk about components and responsive

layout my recommendation in this case is

if you're going to use one then use

tomag GOI for the components it's

clearly the component library from the

framer Creator and it comes

pre-installed if you request that and

it's also crossplatform between react

native and react web and honestly it's a

good component set it's got pretty much

everything you're going to need it's got

buttons inputs labels dialogues toasts

all that stuff plus it's themeable so if

you don't like the look you can change

it so for crossplatform layout tagui

supports three different components

there's xstack y stack and zstack xstack

and Y stack are basically the ones that

you'll be using most often so on the web

xstack is a flexbox in row mode and Y

stack is a flexbox in colum mode and

that's emulated over native to give you

the exact same layout you can also use

Tailwind style shorthand like mt for

margin top or PX for padding on the left

and right side in this case we're using

attributes instead of class names you

can also have platform specific styles

by using the dollar platform attribute

so here we're using dollar platform

native and saying that on Native we want

100 pixels of padding on the top you can

also use IOS and Android in there if you

want to be really specific about what

platform you want the default in this

case would be web one more thing you can

also add custom breakpoints so I added

small medium and large to my tamagi

configuration and then over on the

homepage P you can see where I set the

cards to 50% width at the medium break

point and that actually works on both

web and Native so you get that nice

wrapping effect finally sometimes you're

going to want native only code and code

that is just for iOS or Android and one

has a really elegant solution for that

let's look over my camera component here

I've got two files so we got index. TSX

that's the web version and the default

and then also index. native. TSX and

that's for native of course you could

also use IOS and Android if you wanted

to be very specific about it the

important part is that the exported

components need to have the same

signature so I put these two files side

by side you can see that the default

exported component in this case camera

button has the same signature across

both the web and the native versions

then over on the import side I just

import it as I usually would and One

automatically handles switching between

which is built for which bundle now this

matches the standard for react native

but the one folks have actually ported

this over to this V setup all right so

now that we know more about one let's

talk about some pros and cons and I'll

first start off with the cons and I

think the biggest one is at this point

stability it's it's a pretty early beta

for this so I got to say it's it's still

pretty shaky so if you buy in you got to

be ready for some pretty choppy going at

least at first the other con for me is

that not all libraries are compatible

with this and you can see what I mean

when you run yarn Dev it's actually

right at the top there patching a bunch

of libraries to get them to play nice

with one and that includes big libraries

like react and react Dom and V and

rollup and what that means is that it's

actually going in and tweaking the code

in those libraries to get them to work

with one and you can imagine that if

that doesn't happen then one doesn't

work so that's a problem now for what

it's worth I was working with the one

framework folks as I developed this

video and Expo cam which is what I

needed in my app is in there

specifically because I used that library

and I was running into issues with it

and so they fixed it so as you're trying

out new libraries you might run into

issues like that and need that kind of

patching now the good news is that the

team is really super responsive and

they'll get those fixes done now on the

proos side there is a lot to like about

one it's it's genuinely delivering on

the promise of react when we first got

act native one code base to build for

both web and mobile was the ideal and

here it is and it's not just shared

State Management or API layers I mean

it's the full app and I got to tell you

it feels more fluid to develop than what

I would have thought I was really

worried that it would feel clunky but it

it genuinely doesn't also importantly

one doesn't paint you into any

architectural Corners tomag GOI the

underlying component library is

compatible with next and and with stock

react native applications so you could

take that code that you write in one and

if it doesn't work for you you could

refactor that into a monor repo with

shared libraries and use that code in a

next app with tagui and then a react

native app and that would all work fine

so I was building a startup and I had

just myself or a very small team and I

wanted to quickly put together a full

web and Native experience I'd be looking

really seriously at one it's got

everything you need I also think it

would make a great proof of concept

framework when you're working at larger

companies and you just want to show an

idea but also have it working everywhere

all right I hope you enjoyed looking at

this awesome new one framework let me

know in the comments right down below if

you're going to give this a try of

course a huge thank you again to this

week's sponsor infinite red and if you

don't know already we have our own

podcast now frontend fire there's a link

in the description right down below

every week me and my co-host TJ van told

and Page neering House breakdown the

week's top frontend stories we've got a

weekly game and we talk about the cool

stuff making us happy every week it's

super fun come over and check it out

also if you're into full stack

development check out my new course on

nextjs proex js. Deb I go into depths

with the app writer that you will see in

no other course in the meantime if you

like this video be sure to hit that like

button if you really like the video hit

the Subscribe button and click on that

Bell and be notified the next time a new

blue collar coder comes out