JSON Forms 2.0 reaches Orbit

Today, we are happy to announce the the 2.0 release of JSON Forms. This release is a major milestone for us as it is the result of several months of work during which we did a lot of exploration, prototyping and finally implementation.

In case you don’t know JSON Forms: It is a framework for efficiently developing form-based UIs for the web. It therefore provides a simple declarative language to describe UIs independently of any UI technology. As a most important change in version 2.0.0, we removed the dependencies of the render component to the underlying UI framework (e.g. Angular). Therefore, JSON Forms 2 is now UI framework agnostic and adopters can more easily switch to new UI frameworks. If you are not interested in some background info about this release you can get started right away.

Image Credit: NASA

Some background info about this improvement: Last year, when we decided to overhaul JSON Forms 1.x, we were keen on taking an approach which would be most agnostic to any underlying UI framework, such as AngularJS. After some investigation we decided that web components are probably a good fit and went with implementing the 1st prototype. Unfortunatelly we quickly realized that web components could not keep their promise. The fact that one has to utilize DOM API to create a component can get cumbersome and error-prone, which is unfortunate, especially when thinking about custom renderers. The appearance of Stencil proved that we are not alone with that thought. Also, browser support for web components is still not very good, which is also the main reason we decided against using Stencil, although we still hope that Web components will be widely adopted in the future.

So we took a step back and, to cut the story short, we decided to implement JSON Forms 2 based on React and redux: React currently is the most popular library for creating dynamic HTML and fulfills the requirements of JSON Forms very well with its Component based approach, its declarative way of expressing HTML via JSX, its emphasis on pure functional concepts and its vast ecosystem. All these aspects play an important role as they allow for easy adaptation and customization of JSON Forms. We did not lose sight of our original goal though, as the architecture still allows for different libraries to be integrated with JSON Forms, if there a redux binding (we implemented this approach internally with Angular already). Furthermore we do provide a web component wrapper that allows you ti embed JSON Forms  into any environment that supports web components.

The JSON Forms 2 core is only based on redux, but we also already provide renderer sets, both of which are, as previously mentioned, based on React: one, which we call vanilla-renderers and renders plain HTML and one that is based on Material-UI, called material-renderers. Extending or customizing these sets, or creating entirely new ones is a well manageable task with the new architecture. For instance, one could create a renderer set for React Native or Ionic, such that the UI schema can be re-used for mobile applications as well.

To sum up, we are very happy with the new architecture we introduce with version 2.0. It enables us to remove/reduce the dependency to the underlying UI framework. If you look at the volatility of web frameworks, this can be a major advantage for adopters. If you want to switch to a new technology, such as Angular XYZ, instead of re-developing a application from scratch, you can replace the renderer set. As the definition of the UI itself is declarative, it doesn’t has to be redone.

In case you are interested in JSON Forms 2, please have a look at our rebooted website. In addition we have also updated the blog series on JSON Forms, which explains the use cases form JSON Forms step by step:

• Make-It-Happen Blog Series – Pilot: Day 0 and 1
• Introducing the UI Schema: Day 2
• Extending the UI Schema: Day 3
• Visibility Rules: Day 4
• Layouts: Day 5
• Custom Renderers: Day 6

We will blog about new features of the Json Forms 2.0 release in the upcoming weeks! Please follow this blog or follow us on Twitter to get notified about the new posts.

We are looking forward to your feedback!