By now, you've probably heard about the no-code movement. The great thing about no-code tools is that they greatly increase the number of people who can contribute their ideas (in the form of products and services) to society. The internet, and web technology especially, have made it possible for anyone who knows how to code to set up a small business very quickly and with little or no cost. For those who have no interest in learning how to code, though, this hasn't been true until recently, thanks to the boom in availability of no-code tools. I for one am super excited to see the kinds of products created by people whose first and foremost interest isn't coding.
These benefits are not the focus of this article though. I would instead like to show you why no-code is great for programmers in addition to the code-averse. I want to show you how you can benefit from adding no-code tools to your toolset, especially in using them to level up your productivity.
What is no-code?
Everyone has a different idea of what no-code is. I could use the broadest possible definition, which would be: any system that allows a user to build software without writing code. While this definition isn't wrong, it's a bit too broad for the sake of this article, as it would include tools such as Squarespace, Shopify, and other website builders that rely on templates.
For this article, when I say 'no-code tools', I mean tools that allow the user to build unique and novel software components without coding.
How we use no-code
Here at Visly, we use quite a few no-code tools (and happen to be building one of them😅). I could base this article on the theoretical benefits of no-code tools, but instead, I'll cover the tools we use and how they accelerate our daily development.
Zapier is such a fantastic tool. It enables you to connect SaaS tools together in a matter of minutes (seconds?). We run our early access system entirely on so-called Zaps (Zapier-speak for scripts). When you sign up for early access to Visly we ask you to complete a survey through Typeform (more on that later). That survey completion triggers a zap. The zap takes the answers from the survey and outputs them into a google sheet where we can keep track of who we've invited to Visly and who is still waiting for access. The zap also adds the person's email to Intercom so that they are subscribed to our emails about product updates. Lastly, the zap sends our team a message on slack letting us know that another person has signed up to the waiting list.
This took me less than 5 minutes to set up; without using Zapier, it would have taken me at minimum a full day. Firstly I would have needed to set up a new project, then start reading up on Google's, Slack's, and Typeform's APIs. I would need to request developer tokens from all those providers, and set up a way to securely store those. Finally, I would need to set up a deployment pipeline on Heroku to deploy my service and monitor it for errors. It should be pretty obvious that we saved a ton of time from using no-code here even though we have the knowledge to code it using traditional software development.
Not only did Zapier save us a ton of time, it's also easy for non-developers on the team to extend this zap. For example, removing the slack messaging (it has started to get very noisy), or marking certain requests as high priority if they match some criteria, can be done without needing to code.
I mentioned before that we use Typeform for managing access requests to Visly. This is incredibly powerful as we can easily style it to match the visual design of our brand while re-using the very advanced form components provided by Typeform. If you've ever built a complex form using code before, you know that this is a major source of frustrations and bugs. With Typeform, we can focus solely on the content of the form. The tool also has quite a number of logical components which can be used for complex form interactions, such as saving answers in variables and re-using them in other questions, and its ability to insert goto statements based on question answers.
As mentioned previously, you can also use the output of Typeform as the input to a zap on Zapier. This way you can add a ton of complex business logic to your forms. To use our request access form as an example again, Typeform lets us send people who request access an email acknowledging their request really easily. In the future, we want to extend this to allow us to send a different kind of notification email when people request access for a second time, thanking you for your excitement (we don't do this yet).
Typeform has a ton of more features we haven't explored yet. For example, you can set up a payment flow entirely in Typeform by connecting Stripe - you can even use variables tied to answers for calculating a price which can then be sent to Stripe. For example, we could use this to ask you how many people are on your team and then adjust your plan pricing accordingly. The great thing about this for me is not that I don't need to code, but how quickly this can be implemented and how robust this solution is compared to what I would create myself in the same amount of time.
Making one-off marketing pages, pages for open source projects, and the like is incredibly time-consuming and can be just plain boring. Getting the basics up and running with standard HTML and CSS is pretty quick, but as you want to add dynamic content from a CMS and ensure all pages are responsive so that they work well across devices, it starts to take quite a bit of time. That's not even counting figuring out how to host the site, set up a deployment pipeline, configuring DNS and the like. Webflow makes all this super simple. On top of that, Webflow, unlike Squarespace, isn't inherently based on templates, but instead a visual representation of the DOM. This means even though you choose to start a Webflow site using a template (and there are a ton of great ones), you can always customize any part of the page, including adding new kinds of elements, without trying to edit what is usually very messy HTML code backing the template. This is what truly distinguishes Webflow as a no-code tool compared to template website builder of the past.
Webflow makes building their kinds of sites much simpler without sacrificing any real functionality. The team behind Webflow has been developing it for many years now and it's incredibly feature-rich. Together with Zapier, you can even make some incredibly dynamic web pages. Say for example we want to enhance our request access feature to show you the number of people on the waiting list. We could add a step in our zap on Zapier which on every form submission updates an entry in the Webflow CMS corresponding to the number of users on our waitlist. Creating the landing page, request access forms, and setting up databases without no-code would easily be a week-long task and most likely the result would be worse than building it all in a day or two using no-code.
I am obviously biased when it comes to this last example, but that's also why I left it for last: I wanted to show you first how many other no-code tools we use to improve our everyday work. Visly helps us build UI components much more quickly and with more confidence.
We use Visly to manage all our assets such as colors, icons, fonts and text styles. We also use it to build and maintain quite a number of basic UI components used throughout our product. Things like buttons, navigational elements, tooltips, etc. This has been a major time saver because we no longer need to constantly go back and forth between our code editor and website. There is no need to remember whether we want to use
align-items. We can make the visual change we want to and verify that it looks correct in one action. On top of that, as Visly automatically generates previews of all our components and notifies us on pull requests if something has changed, we can be very confident about our UI layer. This means we can focus our testing efforts on our business logic instead of spending time writing UI tests.
Because we manage our components visually and manage our assets all in one place, it makes design changes trivial to implement as well. A few weeks ago, we updated the font used throughout the app; it was as easy as updating a few text style definitions in Visly and then verifying that all the components still looked good. Even better than the ease, though, was that our designer could do it all without any help from the engineering team.
Now we use Visly to build a lot of new UI components and it significantly improves the speed at which we can iterate on the product. It's saved us a lot of time in initial development, maintenance, and testing and has added to our resources since the design team can fix smaller UI-focused bugs.
No-code is the new code
This is textbook disruption theory: an incumbent deems a new entrant a toy until suddenly it has grown larger than the incumbent itself.
If you have any questions about Visly or comments on the article, please reach out either over email or twitter. If you're looking to level up your frontend development process, make sure to sign up for Visly.