blog.jakoblind.no

The rise of "no code" tools for coders

I read an interesting article today called The rise of “no code” by Ryan Hover (founder of Product hunt). “no code”-tools are tools that let you create apps and sites without knowing how to code. And it’s becoming increasingly more popular. This is great because it lowers the threshold to become a maker. It can also make makers much more productive. Setting up a webshop, CMS and a landing page is just a few clicks away.

When using a “no code” tool or service, you don’t have to write code in any part of the process of developing an app.

You don’t have to write any code at all and still ship software

When I read that article I realized that we coders also benefits from using “no code” tools.

There are tools that automatically set up new projects, deploys to production, etc. For new devs coming into the frontend ecosystem, these tools are awesome. You don’t have to learn webpack, docker and NodeJS, but instead, you can focus on learning only React and JavaScript and still ship to production. This lowers the threshold to become a coder!

As a dev, you can skip configuring webpack, docker, and Travis and still ship to prod by using “no code” tools

But “no code” tools is not only for newbies. These tools can make experienced devs much more productive. You don’t have to spend a day to set up a new webpack project. Or setup docker, AWS infrastructure, and a deployment pipeline. Instead, devs can run a command and then start writing React or Vue components instantly.

Now let’s look at some of these “no code” tools for devs.

Tools that create a new project in no time

Because writing webpack configs, or hacking together your own MAKE file sometimes takes too much time. All of the tools in this list lets you type in a command or two in the command line, and you are good to go.


1. NextJS

Highlights
  • Server-side rendering and code splitting
  • Possibility to generate static pages
Things to be aware of
  • React only
  • Dictates how you should to write your code to some degree

Get started


2. Gatsby

Highlights
  • Static site generator
  • This tool gives you the fastest sites out-of-the-box that I know of. It has a strong focus on performance.
Things to be aware of
  • Dictates how you should write your data fetching code. All data goes into a GraphQL system that all your frontend use to access the data.

Get started


3. Parcel

Highlights
  • Static site generator
  • A complete bundler supporting most tech you'll ever need. React, Vue, Typescript, Elm, web assembly and lots of more stuff
  • Automatic code splitting
  • The most flexible and extensible solution on this list

Get started


4. Create React App

Highlights
  • Official tool from Facebook for creating React applications.
  • Good fit when learning React
Things to be aware of
  • React only

Get started


5. Code sandbox

codesandbox.io is another awesome way to get started without writing a single line of code. This is a web based tool, so you don’t even have to type a command in your terminal. Just head over to https://codesandbox.io/ and hack away.


Tools for smooth deploying and hosting

When you are ready to show the world what you have created, you want to deploy it. These are some “no code” deployment pipelines.


1. netlify

This tool is truly awesome. I use it on createapp.dev . Just connect your GitHub account and tell what command it should run for creating a production build. It automagically fetches the code from the GitHub account whenever you push new code and then it automatically deploys.

Setting up domains and https is just a click of a button. I was shocked at how easy it was to setup when I first tried it out. Highly recommended.

As a bonus it also automatically builds pull requests and deploys to secret URLs. So if you want to test a PR, or share a new feature with some friends before launching. You don’t have to do anything. It’s just there.


2. now

I haven’t used this tool personally but I think it’s worth mentioning anyway because it looks like it has some potential.

The author of NextJS is behind this project so it works well if you are using NextJS. Feels like this is very much made for devs. It has a minimalistic and smooth UI.


What did I miss?

I think I have just scratched the surface here, and there will probably just come more and more. Do you have examples of more “no code” tools, or are there any “no code” tools that you wished existed? let me know in the comments below.


tags: