Write Faster Svelte Form using FastForm v0.3.2

3 min readAug 4, 2022

Authored by: Steven Yuan, Ilija Bibic, Griffin Barlow, Angel Cortes Gildo

Svelte

It all started with Ractive.js, a framework that was inspired by Knockout, Angular, and some other frameworks that were around during the 2012-2013 era. The idea was to simplify writing rich interactive applications specifically for visual journalism. As technologies developed, Rich Harris, the creator Svelte, viewed Ractive.js to be not well suited to the mobile web era, since it was delivering too much javascript. Then later in 2016, Rich mixed the idea of using compiler mixed with Ractive.js, and the journey of Svelte began.

Svelte is not just another front end frame work, it is a language for creating user interfaces on the web. Rather than thinking of a framework as being something that runs your code, a framework is really a way of thinking about your code. With that in mind, Svelte does most of the work in the build time, instead of run time. For example, comparing to other frameworks such as React, React will execute and compute the difference between what is currently on the page, and what should be on the page. Whereas Svelte, will take that logic and complete as much as it can, using its own compiler before the application even runs in the browser. The compiler takes the declarative code, and turns it into an approximation of what you would have written if you’re writing this in hand optimized vanilla javascript.

Svelte’s code is not only simple and lightweight, it’s also easily readable.

FastForm v0.3.2

FastForm is an open-source form library that revolves around Svelte, and it emphasizes the reasons why people choose Svelte over other front-end frameworks such as React or Vue.

Creating a form has two main concerns. The first one is the mechanics of the form. For example, what fields have errors, what fields are empty, how to handle onChange or onBlur. The Second concern is the business value of the form, what information is required, and what validation is required for those fields. FastForm breaks down the first concern and handles the form state, and any validation requests from the user as the input field is updated. This adds a lot of value, and customization to how users can validate their form. Users can focus more on the front end business side of things, rather than dealing with bugs that comes with the validation or form state management.

Features!!!

Easily implemented to your codebase, refer to our documentation website for examples
Form level and Field level validation
Complete state management system of the entire form
Choosing validation either onBlur, onChange, onSubmit, or all of the above
Typescript compatible
Validation method is not there? Users have the ability to write their own custom validations
No styling to any of the components, users are able to style to their own liking