Intro to Remake, Part 3: What Makes Remake Better

David Miranda -

You know how sometimes you have an idea for a web app and you think it will take 3 days to complete and then you're sitting there 3 years later about to release it?

Remake prevents that from happening.

It lets you release your full web app idea within your original timeline: 3 days.

Without Remake

Let's say your big idea is for a daily journal web app. How long would it take you to transform an HTML & CSS design of it into a fully-functional web app using a modern stack like React/Express/PostgreSQL?

Let's start with the first component: the title of a journal entry, which will be displayed at the top of every journal page.

  1. Split its HTML into a separate, named component
  2. Add some internal state to that component
  3. Pass some demo state down from the root component (or a data store)
  4. Set up some methods on the component that can change its state and make it interactive
  5. Write some code to connect your component's visual state to its internal state
  6. Style your component in all its possible states (including an editable state)
  7. Write some code to connect user events to the methods that can change the component's internal state
  8. Use a mock endpoint to load data into the component (or data store)

And that's only half the battle: the front-end. You still have the backend.

Here's what the backend would require:

  1. Create an endpoint to save and validate the component's data
  2. Hook up the save method to the save endpoint and pass up the data
  3. Create an endpoint to get the component's data
  4. Load the data from the get endpoint into the component
  5. Create an endpoint to delete/clear the data for the component
  6. Hook up the delete method to the delete endpoint
  7. If you haven't already: build out user accounts for the 100th time and make extra sure they're secure
  8. Add permissions rules to the endpoints to make sure the data's not editable by users who don't own it

Ok, so that was at least 4 hours of work... but now you're done!

Except... that's only for a single component.

Now you have to go back and do all sixteen steps again for just about every other component in your app...

Even for a simple app, just the process of hooking things up — not making things look nice or behave as expected or fixing inevitable bugs — can take weeks, if not months!

Modern web development is a time sink

And — don't forget — since you're working with a modern stack and building a web app from scratch, you're bound to run into even more issues:

  • Passing state up and down the component tree can get complicated. You'll probably want to add a data store at some point.
  • Rendering data alongside other code and plugins can lead to weird interactions and race conditions.
  • You need to install an asset bundler, configure it correctly, and make sure you're using all the best practices.
  • There might be some visual or usability issues caused by rendering on the front-end that require a deeper dive to understand.
  • You'll probably go down a few rabbit holes researching problems you've never seen before.
  • Integrating 3rd party libraries, even for simple things like routing, can require reading pages of documentation sprinkled across the internet.
  • Keeping all the modern 3rd party libraries up to date and your bundle size low can be a huge hassle.

These things seem small individually, but over time they pile up and sap your time and motivation. Before you know it, that small bug that was supposed to take an hour is still sitting in your backlog a week later.

That's a lot of time and energy down the drain for a project that seemed so simple at first.

What if there was a better way?

What if, when someone saw your HTML & CSS design, they could imagine exactly how it would work — and there was a framework that saw it the same way?

Meet Remake

With Remake's straightforward syntax designed specifically for building web apps, things are simple.

Sometimes "simple" is just as good as "perfect"

In order to build an entire web app — not just a single component — with Remake, this is all you need to do:

  1. Add a few custom attributes to all the elements in your app that have data inside them, so Remake knows how to save your app's data
  2. Add an extra attribute to any element that's editable
  3. Create the application's initial state for new users by defining it in a JSON file (optional)
  4. (Skip this step) You don't worry about styling editable states (unless you want to) because Remake comes with built-in components for editing data
  5. If you want your app to have multiple pages or you want to use a component across multiple pages, just move that page/component HTML into separate template

And that's it! It's really that simple to build a full web app! 🚀

Build real web apps faster

What you don't need to think about when using Remake:

  • Data saving, deleting, editing — because Remake auto-saves when data changes and has built-in editing capabilities.
  • User accounts and serving static assets — already taken care of for you.
  • Creating separate components — do it only when you want to.
  • Lifecycle methods — Remake is server-rendered, so the HTML that's rendered is final and you can do whatever you want with it.
  • Coding JavaScript 🤯 — your web app's functionality can be implemented with Remake's custom attributes.
  • Bugs caused by re-implementing native browser features — Remake web apps are server-rendered with a little magic layered on top (they're not SPAs), so: 1) your pages will render even when JavaScript is disabled, 2) they'll be SEO-friendly, 3) they'll take advantage of native browser features like remembering scroll position and the back button.

And, to top it off, you'll be less likely to create bugs of your own because Remake has created a simpler model for what a web app is — making it much easier to think about.

To truly understand what makes Remake so awesome, you'll have to try it out for yourself. You can learn it in a few hours and deploy a web app today!

Finishing your app is more important than perfection

Next time you're glued to the computer at 4am working on some random bug with your build process, take a step back and think about who you're doing this for.

Will your future users really care if your build process works? Or if your database has the right schema?

Or do they just want to try out your idea?

Remake is the perfect tool for getting imperfect ideas out of your head and into the world, so you can see if they're any good. Save your engineering expertise for after you've found some users for your product.