Umbraco Formulate 2.0, Plain JavaScript Edition
If you haven’t heard yet, the second version of Formulate was just released about a week ago (If you’re new to Formulate, take a look at https://www.formulate.rocks/). It’s the same Formulate you know and love, but with one major new feature:
Plain JavaScript Template
It used to be that if you wanted to display a Formulate form, you’d have to add AngularJS to your site. Sad news, as that adds some additional complexity and page weight (51KB or so after minification and Gzip compression).
The good news is that you no longer need to worry about that. Formulate now includes a second template called the “Plain JavaScript Template”. It does essentially what the AngularJS template did (i.e., renders the form and all the fields on it), but without all that extra complexity and bloat.
How much smaller is it? Well, when Gzipped and minified, it weighs just 7.8KB, or nearly 8x smaller than AngularJS + the AngularJS Formulate template.
I too was blown away by how tiny the plain JavaScript template is. Such amaze.
It’s amazing what you can do with the best JavaScript framework, Vanilla JS.
Can I Still Use AngularJS?
Yes! If you have sites built with the AngularJS template, don’t worry; AngularJS support isn’t going away. You can keep using the AngularJS template.
Should I Use AngularJS?
Unless you are using AngularJS on the rest of your site, I wouldn’t recommend it. The AngularJS template will continue to do what it’s already doing, and I’ll probably even add some features here and there, but my main focus going forward will be the plain JavaScript template.
How Do I Use the Plain JavaScript Template?
When configuring your Formulate form, change the “Template” to “Responsive (Plain JavaScript)”. The “Responsive” template is the AngularJS one.
You will then need to render it a bit differently (don’t worry, it’s easier now that there is no longer an AngularJS dependency): http://www.formulate.rocks/plain-javascript/render-form
Styling the Formulate Grid
The AngularJS template was using some of the CSS classes from Bootstrap, primarily for the grid. I didn’t particularly like arbitrarily tying the grid system to a framework like Bootstrap (even more bloat to add to your site), so the plain JavaScript template uses a custom grid system:
Sample of the new grid system in Formulate.
The link above has information about how to style the grid, but here is the CodePen for quick reference: https://codepen.io/anon/pen/oPOOYZ?editors=1100
If you don’t like Sass (you monster!), you can convert the view to plain CSS.
Keep in mind you will also have to style the fields. Since that varies vastly from site to site, no sample styles are currently included.
Async Superpowers
One magical power that the plain JavaScript template has is that it’s asynchronous out of the box. That means that many operations can be long running and you can use promises to easily manage those operations.
For example, all field validations in Formulate are asynchronous. If you want to make an AJAX call to validate a value against an API, you can do that (in fact, I did do that to implement a special email validation).
The plain JavaScript template performs AJAX postbacks, similar to its AngularJS counterpart. That means you are still in control of how you want to respond to successful form submissions (e.g., by replacing the form with a success message inline without refreshing the page, or redirecting to a thank you page).
Pluggable
Like the AngularJS template, the plain JavaScript template is pluggable. That means that you can add your own extensions to it without the core of Formulate needing to be modified.
You can add your own field types, and you can add own your validation types. Each of those are as simple as setting a bit of JSON configuration that contains a function that implements the field or validation.
Modular
The plain JavaScript template was built using modular JavaScript (i.e., JavaScript split across multiple files and combined using “require” statements). This means you can include it in your frontend build process if you like (grunt, gulp, webpack, whatever suits your fancy).
You can also pick and choose which files you include to make the plain JavaScript template even more lean. If you decide you’re only going to create forms with text fields and buttons, you can create a custom JavaScript file to include just those fields, which will make the JavaScript a fraction of its already tiny size. Or you can just include the prebuilt JavaScript, which will give you support for all of the built-in fields (at the time of this writing, there are 15 or so).
Stable
We’re already using plain JavaScript in production, and we’re building it into new sites that are currently a work in progress. This will be the standard form option I use for all my sites going forward. It works, it’s tiny, it’s fast, and it’s stable.
Documentation
So far, the only documentation is the couple of links above. In the coming weeks, you can expect a bit more documentation (e.g., extending things). For now though, you have enough documentation to get started. And if you want to poke around, you can view the plain JavaScript source code, which is contained in a single folder: https://github.com/rhythmagency/formulate/tree/master/src/formulate.frontend/responsive.plain-javascript
It’s all written in plain JavaScript, and is heavily commented, so it should be straightforward to understand.
Keep in mind that the backend of Formulate hasn’t changed, which means all of the existing backend documentation still applies. You can find that here: http://www.formulate.rocks/
Help Formulate Grow
I’m excited that I’m able to share this major advancement with you all now, but no software is ever complete. If you have ideas for documentation you’d like to see, or features you’d like added, drop me a line (in no particular order):
I would also super appreciate it if you share this article on your social media of choice (LinkedIn, Twitter, Facebook, Google+ if you dare). Heck, even send an email to a colleague or let everybody know on Slack. Call your mom and tell her the great news about this super cool form builder that’s now using plain JavaScript. Just so long as you tell somebody, I’m happy.