DEV Community

Matti Vesa
Matti Vesa

Posted on

Twelve months of UI hacks

#java #vaadin #javascript #design

Being a part of the Tools team at Vaadin I often get interesting ideas that I want to try out outside the usual stream of product development. Here are some that I've done between July 2019 and July 2020.

Sketch mode integration into Vaadin Designer

Sketch Mode is a tool for free-form drawing of UIs. In this hack I integrated it into Vaadin Designer. The video shows how a layout can be sketched rather quickly.

Designer Components

Designer Components is an idea based on Sketch Mode where there are UI components and also "action" components that produce code. Each component has a custom editor for it, which allows great flexibility beyond the usual tree-and-attributes approach. The example shows how a trivial REST application can be created using Designer Components.

Unide in Electron

Sketch Mode was eventually integrated into Unide, a side project GUI builder application I've made. I also made it run using Electron, as is demonstrated in the following video.

Flex box with Brute force

While considering the various configurations of flex box layouts, it dawned on me that one could draw some boxes in some configuration and then use plain old brute force to see what flex box settings would produce the closest result. The algorithm is trivial and slow, but fast enough and the results are reasonable.

Brute and Sketch Mode

By using Brute to perform the layout duties in Sketch Mode it became possible to produce decent flex box layouts just by drawing them.

Exporting Vaadin projects from Figma designs

The free form drawing capabilities of Sketch Mode can be used to implement exporters for other free form things. With the
addition of rectangles for layout and defining tags for each component, one could get working Vaadin applications out of Figma designs.

Drawing UIs on napkins

Another application of Sketch Mode is synthesis of layouts from hand drawn pictures of UIs. Together with rectangle detection and some additional heuristics, it becomes possible to take a picture of the drawing using a phone and create a preview of the UI on that same phone.

Unide in VSCode

After making Unide run in Electron, it was not too complicated to do the same with VSCode.

Standalone Vaadin Designer

With the data model from Unide it became possible to make a version of Vaadin Designer that runs on the web independently. This resulted in an excellent vehicle for further experimentation.

Simple element size editing

A short hack where the image used to show the size, border, padding and marging of an element could be used to edit those values by dragging with the mouse.

Graphics programming and visual editing

A bit more esoteric stuff: a Lisp-like language that is compiled into JavaScript. Using some ideas from Sketch Mode it is possible to write Lisp using B-expressions (B for Box) in a more visual manner. Also, just like the Designer Components above, each B-expression can contain more complicated editors such as the height map painter shown in the video below.

Lastly, there's a generalization of visual design by connecting pixels in the generated image to code via a trace buffer that records the position of the component instance that produced each pixel. Const expressions can be used to define editable points in the code which is a generalization of the concept of element properties.

Exporting Java from Vaadin Designer

One of the first things to come out of the previous standalone Vaadin Designer was the ability to generate Java from Designs using code from Unide.

And back

An advanced version of the above allows modifying the Java code and importing it back into the design in real time.

In place editing of a live Vaadin application

The coolest hack to date with the standalone Vaadin Designer: a version of Vaadin Designer running in Electron that can be used to modify a live Vaadin application. Any component in view can be switched into edit mode
and modified. Switching back into normal mode shows the modified design in the application as usual. This could eventually allow creating a navigable prototype of an application by running it, starting the designer application
and then adding views to it as the application is navigated.

Full support for visual design of LitElement components?

While I previously made some statements about the difficulty of writing a visual design application for LitElement vs P3 and other template based systems, a method came to mind that makes writing such editors only slightly more complex.

A GUI builder in dev tools

One potential future place where a GUI builder could be found is the Chrome dev tools. I wrote an initial prototype of the concept, and it seems promising.

Upcoming things

In the future I will be working more on Unide. Future features will include CRUD generation from Java beans.

And Sketch Mode improvements, like a better preview while sketching

And others

These are only some of the things I've hacked together during the last year. Check my twitter at @mjvesa and youtube for all the things not mentioned here with more to come!

Top comments (0)

Read next

mukhilpadmanabhan profile image

Inside JavaScript Engines: How Browsers Bring Your Code to Life

Mukhil Padmanabhan -

arindam_1729 profile image

9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

Arindam Majumder -

shehanxdev profile image

Understanding Double Dispatch: A Simple Guide

Shehan Chanuka -

prince_beec5ccde00b7c6c73 profile image

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Prince -