The perfect storm

Looking back we found ourselves in the perfect storm over the last year developing Servoy v8. As our focus for Servoy v8 was primarily on user experience, we learned that great UX in modern web applications relies on responsive design.

Responsive design means the user interface adapts to the device dimensions. Such a UI will work across mobile and desktop. When approached correctly, this means a developer can build an application UI only once, to be usable for a range of devices and screen sizes.

But to combine responsive design with Rapid Application Development, is no small endeavor. There are quite some html page tools which facilitates responsive design. And while most of these tools deliver a page which is responsive, a page is not the same as an application having distinct, controllable parts.

One of the upcoming web frameworks, AngularJS turned out a perfect match with responsive design. It allows for pages to being modularized into parts called Web Components. And within a rapid application environment, components become easy to manipulate; these are extremely similar to the elements that we’ve already had for years.

Another feature AngularJS brings is two-way binding of JavaScript objects to page elements, which means for example, the content of a field is copied into a object of choice and back.

At the same time, a library called Bootstrap released its third version with makes responsive design really easy to setup. It divides every UI into a layout grid called 12-grid. Grid cells can be filled with any content. It makes a lot of sense to combine this responsive design with Web Components. The result is that everything, except for the grid definition and static HTML, is a Web Component.

Finally, to have optimal communication between browser and server, we leveraged another piece of html5 technology, Web Sockets.
Not only does this allow for better communication from browser to server, but also allows the server to actually talk to a webcomponent. We extended the two-way binding from AngularJS into three-way binding. This enables communication between WebComponents running in the browser and records/foundsets at the server.

As a result this brings extreme flexibility in several ways:

• Any UX which can be expressed in HTML can now be used. (by making it a WebComponent)
• Any helper/grid layout system like bootstrap can be utilized in order to get the best responsive design
• Such a layout grid can be filled with WebComponents using WYSIWYG design.
  In short, an enterprise solution can now have the UX, which the modern user has come to expect, delivered in a rapid application environment.

For the first time in Servoy’s history, we succeeded to make Servoy’s codebase smaller, since all standard form elements are now delivered as WebComponents.
In fact, any WebComponents are now considered external to Servoy, which means you can actually replace or adapt the default elements shipping with Servoy like a field or button.

All our ideas for improving the UX capabilities of Servoy came together with the possibility to use maturing web technologies – a perfect storm.

The new flexibility and a ton of possibilities does put a huge smile on our faces, we are pretty sure it will work the same for you.

Jan Blok
CTO
Servoy