lively.next is a web-based live IDE that builds upon ideas of Smalltalk and others. Such live systems allow for rapid prototyping by a) eliminating the gap between running an application and developing an application and b) relying heavily on the direct-manipulation of graphical UI elements. As this workflow is similar to that of state-of-the-art design tools like Figma, we demonstrate how lively.next implements a workflow that allows designers and programmers to rapidly develop highly customized web-applications together, while working on the same artifacts, eliminating the need to painstakingly recreate component designs in HTML and CSS.
Today, development of web applications often involves the creation of quite sophisticated design mockups.
Using tools like Figma, these do not only define the exact look of the application, but also allow to prototype many aspects of the behavior the final application should have.
Translating these design prototypes into an actual frontend however requires a lot of work do be done effectively twice: Once by designers and a second time by programmers who in turn re-implement the UI alongside with its behavior.
Based on the original LivelyKernel, developed by Dan Ingnalls and others, we present a workflow utilizing the lively.next environment that aims to mitigate this problem, by enabling designers and programmers to work on the same artifacts inside of the open-source, self-contained, fully live Web-IDE lively.next.
lively.next draws on the ideas of other live systems such as Smalltalk, that allow for a highly customizable and flexible programming experience, while putting the programmer “inside” of an application, and not in front of it. With lively.next, we focus on bridging the gap between such a system and the familiar and popuplar JS eco-system and programmer tooling (git, GitHub,…).
The talk consists of three parts: First, we give an introduction to the lively.next IDE and touch on parts of its inner workings. Afterwards, we explore what we think are the advantages of live, direct-manipulation based IDEs over the design and development tools that make up the current mainstream. Lastly, we demonstrate the implementation of our ideas inside of lively.next.