Do It For Me, But Only If You Do A Good Job
Say hello to formaBull, a developer tool for React that lets you build forms and export code in under a minute.
All forms should be formable, and shouldn’t be a bear to get through. If you’re comfortable with the latest UX best practices and you regularly write front-end code, forms are just a small piece of the project — a chore, even. If you’re somewhat new to developing in React, or you’re not sure how best to set up a form, this might slow you down when all you want is to bulldoze right past data collection for some other feature.
Sometimes I want to make a quick mockup of an app, and will rely on boilerplate code like Emmet for HTML or Create React App for the front-end base. I also make generous use of libraries when necessary, but in production mode I want to cut down on required packages. I was writing a lot of code for forms, so I started looking for a way to speed up or abstract that process.
After a bit of digging, I failed to find something that actually helped in a meaningful way. I asked some colleagues about this issue, and while most said, “Yeah, I guess that’s a problem,” a few agreed with me that it was a problem that should already have a solution.
Like Minds Think Alike
When enough people start taking something seriously, ideas can grow into reality. The engineers I spoke with who were most interested (and available) agreed to dive into this head first, and after a week of ideating on concepts, we had a clear idea of what to create.
We discussed what we would like as a developer tool, threw out the silly “what ifs” in favor of what would actually help speed up app creation, then looked around for such a tool. During the research and testing of new packages and libraries, someone said they wished they could just drop a code’s form directly into their VS Code files. A silence hung in the air, “You mean, like a GUI for forms where I can drag over a whole chunk of code to my own IDE?” I asked. “Sure, why not?” they casually replied.
I used to take pride in writing every single line of code, and sometimes I still do, but I also recognize the value of a tool. That’s why I prefer using React to vanilla DOM manipulation. Building in React means dealing with react components and managing state with Hooks, Context, or any variation of Redux. That’s all fine, but now my forms need to be written with React Hooks for me to pass the data where it’s needed. Writing forms is not the hard part of building an application, but it’s still very much a burden on the programmer.
When abstracting code development, we want to increase a programmer’s rate of completion. The harder it is to parse through a language, the longer it takes to write, debug, refactor, etc. However, if the tool to help takes more time to set up and use than the time it saves, what’s the point? It was becoming clear to us why we weren’t able to find “the perfect tool.” First, there is no perfect tool, maybe ever. Perfection is like Infinity in that we can talk about it as if it’s a destination, but really, it’s a direction. So, how about just a good/great tool? Therein lies the second problem: if creating a tool is more work than simply living without the tool, what’s the point?
Now Entering the Arena — formaBull!
My colleagues and I partnered with Open Source Labs earlier this year to put together a lightweight app in Electron to generate forms faster, and more easily. You can create the shape of your forms by dragging formable elements to the main canvas, adjust their style in-app via the Style tab, and export directly to clipboard for pasting elsewhere. You can save your forms locally, of course, or you can save to our database. You can view our default forms on the database, as well as any users’ forms for which you have permission.
formaBull uses familiar drag-and-drop features to build a working form with React Hooks as fast as you can move your mouse. When you drag any formable, input item from the left sidebar and drop it onto the main canvas, your form appears as it would on a plain, white HTML page. Simultaneously, the right sidebar will display the code from the current form with syntax highlighting, and a second tab will show the code for the CSS styling. Click the clipboard icon to copy everything, append the final product onto an isolated div, and voilà, your form will look and behave exactly as you want!
Another great use for formaBull is as a prototyping tool. We found it fun to create and style forms with a physical nature. Dragging form inputs around and styling with sliders feels natural, and you can immediately see how your style choices will affect this form. Typing new input fields and moving them in the editor is slow, and I have to look to another window or screen to see the changes. Even with Hot Module Reloading and autosave I still have to wait a moment to see changes on a browser. formaBull shows you NOW, and that means you can prototype faster. The best part, though, is that the prototype is also the end product.
Check It Out
Find out for yourself on GitHub! Use the app for your own interests, or contribute to the project. We’re happy to review any pull requests.
You can also see more on our website, www.formabull.com.
