Hi! For those of you who don’t know me, I’m Ryland, a fullstack dev/product manager/designer working for a SFbay-area startup. 4 months ago, I led an effort at my company to build a prototype tool that would simplify the process of creating fullstack apps. That idea has since transformed into an amazing product known as “Reshuffle”. Reshuffle eliminates the time-consuming, and headache inducing boilerplate traditionally associated with fullstack development and enable you to focus completely on your core value.

Here is a link to general launch announcement

Disclaimer: I try my best to be a transparent person, especially with my writing. My articles usually don’t have personal motivations but I want to make it clear when they do. I have vested interest as an employee of Reshuffle, but I really do believe it will revolutionize the way software is developed and shared. I’ve done my best to provide an honest (although still excited) outlook on what we’re offering.

Reshuffle TL;DR;

Reshuffle extends Create React App and adds a backend, integrating seamlessly into a traditional webpack/React workflow. Backends are written using “plain old JavaScript”, with React-inspired semantics. There is no need to manage or even create a database for apps, just use the resources you need, when you need them. Reshuffle offers FREE hosting of fullstack apps on the cloud.

Check out the site and remix an existing fullstack project for free!

How Reshuffle solves common fullstack problems

For a lot of us, the best way to start is with code (that’s why we’re all here right?). Here is a minimal fullstack example (including a database) built with the Reshuffle framework:

// src/App.js



import ' @reshuffle/code-transform/macro ' import React , { useState , useEffect } from ' react ' ; // import backend logic like any js function import { addAndGet } from ' ../backend/helloServer.js ' ; export default () => { const [ num , setNum ] = useState ( undefined ); useEffect (() => { addAndGet ( 0 ). then ( setNum ) }, []); return ( < div > < h1 > Hello World from Reshuffle! </ h1 > < span > Number is: { num } </ span > < button onClick = { () => addAndGet ( 1 ). then ( setNum ) } > Increment me </ button > </ div > ); }

// backend/helloServer.js



// backend/helloServer.js import { update } from ' @reshuffle/db ' ; /* @expose */ export async function addAndGet ( num ) { return update ( ' num ' , ( prevNumber ) => { if ( prevNumber ) { return num + prevNumber ; } return num ; }); }

Hopefully that provides some context for the rest of this article!

Starting a new fullstack project can be daunting ♞

There have been tremendous improvements in fullstack development over the last 10-15 years. Frontend frameworks have never been more powerful, and paradigms like Serverless have made cloud infrastructure accessible to everyone. As someone who lives and breathes this world everyday, I couldn’t be happier to see how far we’ve come. Although things have gotten a lot better, there are still some pretty rough edges:

Starting a new fullstack project has serious overhead and requires boilerplate every time

Even with the best framework/packages, you never start from exactly where you want

Even if frontend tool X and backend tool Y are perfect, you still have to integrate them

It seems like the easier the backend platform is, the more you have to entrench yourself with its semantics

Reshuffle solves these problems and more:

Creating a new fullstack project has serious overhead and boilerplate every time

With Reshuffle, you start new projects by remixing (here is a link to a doc explaining that) old ones. Avoid recreating the same boilerplate over and over again and immediately start with the project setup right for you.

Even with the best framework/packages, you never start from exactly where you want

With all of our open-source templates, it’s nearly always possible to start from exactly where you want to. Remix the template that closest matches your needs and avoid implementing features which don’t bring your app value.

Even if frontend tool X and backend tool Y are perfect, you still have to integrate them

Reshuffle takes a more opinionated approach than other offerings and merges backend/frontend into a single unit. By taking advantage of the wildly successful Create React App framework, we can provide a uniform and cohesive environment for fullstack development. Reshuffle handles all the tedious integration work leaving you to do the important stuff 😉

It seems like the easier the backend platform is, the more you have to entrench yourself with its semantics

Reshuffle integrates seamlessly into the existing React developer experience. Our hope is that existing React developers will need to learn as few new concepts as possible to extend their apps to the cloud.

We hope to fundamentally reduce the cost of transforming a great idea into a great application.

Source code isn’t the whole story 📖

Github transformed the development ecosystem and open-source landscape. Although there was open-source in the past, Github brought it to the masses. Services like npm further contributed to this transformation, making it easier to share code than ever before. In more recent times, offerings such as Netlify and Github pages have made hosting and sharing static sites a convenient and enjoyable process. But throughout this transformation, fullstack applications have been neglected. There are a million solutions for sharing code and static sites, but once a backend comes into the picture, sharing becomes tricky…

Reshuffle enables sharing live fullstack apps, not just source code and rendered HTML. By providing every app a zero-config, zero-cost backend and data layer, we hope to transform fullstack app sharing, just as npm and Github did with source code. Wouldn’t it be cool if every npm module came with a live preview, running on a real backend? Reshuffle allows any open-source template to be “remixed” free of cost. Remixing instantly creates a copy of the app (including code, compute, and data) to your account. Imagine a world where you always know if an npm module fits your needs, without having to create a local project to test it out. This is the world we are striving to build.

Here is a video that explains everything concisely:

Developing locally isn’t developing remotely

One of the most frustrating aspects of fullstack, is the need to constantly be aware of minute differences between your local environment and the cloud. Even small differences in behavior can have catastrophic effects on production systems. Containerization and virtualization technologies have definitely improved things, but there is still a ton of room for error when developing in a split environment.

Reshuffle unifies the fullstack development process, permanently blurring the line between running locally and on the cloud. We believe that running your app on the cloud should simply be a choice you make, similar to an on/off switch. You no longer have to worry about maintaining different configs for your local and remote environment, just flip the switch when you’re ready to go live.

Managing cloud resources is a burden

Using the cloud has never been easier. Especially compared to the not-so-distant past, where managing infrastructure meant literally managing physical servers, it’s a completely different world. Serverless and the emergence of Devops has made the cloud infinitely more accessible. Unfortunately, serverless !== hassle-less. Physical/virtual infrastructure management has seemingly been replaced with an endless slew of YML config files. Even with the best Serverless offerings, you’re required to be aware of and responsible for details that aren’t helping you deliver value to your users.

Reshuffle manages the full burden of the cloud, so you don’t have to. Never visit YML-land again, as there are no tedious config files or cloud configuration options. Our system is intelligent and responsive, auto-scaling to fit your needs, without your intervention.

Conclusion

Reshuffle will transform the application landscape, significantly reducing the barrier of entry required for fullstack development. We're starting with React and are hard at work adding support for other frameworks and mobile apps. We’ve reduced the number of moving parts required to create a new cloud application, making it possible to focus on your core value, instead of maintaining servers.

Open source software and the amazing developer community (like the one here on Dev.to) is our foundation, and nothing makes us happier than providing value back to developers. If this article even got you 1/10 as excited as I am, I’ll count that as a success.

Feel free to ask me ask anything in the comments, or join us on our Discord.