The rapid web development toolkit

Written by brenn.a.hill | Published 2018/11/11
Tech Story Tags: software-development | javascript | web-development | react | startup

TLDRvia the TL;DR App

If you are in startup mode you need to move fast. Feedback cycles are your lifeblood. The quicker you can get something in front of users, the better.

Here’s what you need to build real software that solves real problems — FAST.

Plus, everything here is FREE.

Stage 1: Marvel App

Marvel app let’s you rapidly prototype application functionality using a real phone - no code. The goal is to try out behavior and user flows and try ideas before you spend the time and money on software. It works great.

Marvel - The design platform for digital products_The collaborative design platform. Wireframe, prototype, design online and create design specs in one place. Or create…_marvelapp.com

Stage 2: Quick UI with Vue, React, Bootstrap, and JSON Server

Once you’ve iterated a few times and have locked down a good first version of your app, it’s time to write some code. The fastest code in the world is the code you don’t have to write. The second fastest code is the code you don’t have to re-write.

Here are some great tools to get stuff built quick with minimal writing and rewriting.

typicode/json-server_Get a full fake REST API with zero coding in less than 30 seconds (seriously) — typicode/json-server_github.com

facebook/create-react-app_Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…_github.com

Bootstrap Vue_Quickly integrate Bootstrap 4 components with Vue.js_bootstrap-vue.js.org

If you need a native app, Matt Mcnamee has created a fantastic react-native starter kit. It uses firebase though, which is a paid offering. See below for an open source and free replacement.

mcnamee/react-native-starter-kit_rocket: A React Native + React (web) & Firebase (optional) boilerplate app to get you up and running very, very quickly…_github.com

Pick one of these UI frameworks and get to work using the fake server to mock data. Now you can start playing with a real app with real functionality and make sure it’s what you want before you do anything more complicated.

Stage 3: Server side starter kits.

Once you are past the point of quick prototyping, it’s time to make it real. You’ve got some visual code and fake server code. You need to make that fake server code into real code that talks to different services.

The simplest option

Sahat Yalkabov has created a great project, the hackathon starter, that gets rid of 90% of the boilerplate in a typical web application. It provides working basic security code, user login/logout and avatars, and sample integration code with every major service you might ever want.

sahat/hackathon-starter_A boilerplate for Node.js web applications. Contribute to sahat/hackathon-starter development by creating an account on…_github.com

If you’ve prototyped your application in react-app and json server, all you have to do is add your custom logic. Sadly, the hackathon starter doesn’t use react by default so there is a little work to do there, but not much. The main advantages here are that it’s 100% free, the code is very easy to understand, and tons of integrations are already there for you.

The Advanced Option: Parse

Parse + Open Source = ❤️_The open source GitHub page for the Parse platform._parseplatform.org

Parse is an open source backend as a service platform that deploys as a node app. It’s more opinionated than the hackathon starter and a little less automatic, which can be good and bad. Take a look and see if the features fit for your skillset and needs.

Either of these options will let you move quickly.

Conclusion

You don’t need a ton of tools to be extremely fast at building software. These 4 alone can take you start to finish for iterating on your idea to something that can be shipped to users in as little time as possible.


Published by HackerNoon on 2018/11/11