Painless stretchy web apps using a shorthand notation by Edward De Jong

June 14, 2024

In the presentation Painless stretchy web apps using a shorthand notation by Edward De Jong,he shares his motivation for creating the Beads language, a single language aiming to replace HTML, JavaScript, and CSS for pixel-precise, interactive, robust, brief, and maintainable web development. Beads is a free, indie effort generating JavaScript and supports both client and server-side development. The language’s unique features include a hierarchical tree system, a “dumb compiler”, and an indexing system allowing for efficient cross-linking and automatic refreshing. The speaker also discusses his approach to building web applications using a columnar block system, emphasizing the importance of automatic refreshing and incremental development. Edward shares his personal history with programming, inspired by John Backus’s vision of functional programming and interchangeable software components.

Painless stretchy web apps using a shorthand notation: A comprehensive overview

The motivation behind Beads

Edward De Jong began by expressing his frustration with the complexity of the current web development stack, which requires developers to juggle HTML, JavaScript, and CSS. His goal with Beads was to create a language that offers pixel precision, interactivity, robustness, brevity, and maintainability. Beads, a free indie project, generates JavaScript and can be used for both client and server-side development. Unique in its approach, Beads requires writing code in small chunks with prefixes indicating their intended use, forming a hierarchy that mirrors the structure of the screen.

 

Sensible code structure

One of the highlights of Edward’s talk was the emphasis on maintaining a sensible code structure, particularly in large, interactive projects. By tagging each chunk of code with its purpose, Beads ensures that event handling code is located near the drawing code, simplifying maintenance. Inspired by Excel’s closed arithmetic and the addition of physical units of measure in programming languages, Edward also introduced a more readable approach to regular expressions by breaking them into a vertical structure.

 

Hierarchical tree structures and the drawing system

Edward discussed Beads’ unique indexing system, allowing for hierarchical tree structures with cross-links that can be saved, loaded, and sent across networks. Unlike JavaScript, Beads does not use closures or physical addresses but instead employs a “frozen function” system. Its drawing and layout system is based on explicit whitespace and consistent subdivision from the outside in. This system allows for specifying sizes as proportions of boxes and automatic adjustment to different screen sizes. Beads uses a directed graph as a tree model, where each node can have a value, children, and a timestamp, facilitating efficient refresh and drawing.

 

Automatic refreshing and efficient updates

Automatic refreshing is a crucial feature in Beads, ensuring that the screen is always up-to-date and bug-free. Unlike 3D graphics, web applications need a textual representation of the screen converted into pixels, which can be inefficient. Beads allows users to subscribe to sections of a model, transmitting changes in binary form for instant updates. This method eliminates the need for message passing or encoding/decoding, making it highly efficient. Edward demonstrated this through a mortgage calculator application compatible with both mobile and desktop devices.

 

Building web applications with columnar block systems

Edward explained his method for creating web applications using a columnar block system. By filling a block with color and adding slices for content, developers can efficiently use space and ensure legibility across devices. Beads allows for proportional subdivision of the screen, making it easy to create responsive layouts. The language also provides reverse mapping, helping developers identify which part of the code drew a specific section on the screen, a feature not commonly found in languages like TypeScript.

 

Incremental development and shallow hierarchy

Edward emphasized the benefits of building web applications incrementally, using a schema to initialize data and gradually adding components. This approach ensures a sturdy foundation for the product. Beads’ low punctuation increases readability and simplifies coding, with an average nesting level kept under two. The language’s shallow hierarchy and easy installation make it user-friendly, despite the challenges of serving local JavaScript files on the web.

 

Personal programming history and inspiration

Edward shared his personal history with programming, from working on an IBM 1620 punch card machine to attending a lecture by John Backus, the inventor of Fortran and functional programming language Red. Backus’s vision of creating interchangeable software components like Lego bricks inspired Edward’s work on Beads. By simplifying programming and creating interchangeable parts using a hierarchical tree data structure, Edward aims to realize Backus’s original vision.

 

Conclusion

Edward De Jong’s presentation on Painless Stretchy Web Apps Using a Shorthand Notation showcased the potential of Beads. By unifying the web development stack into a single, manageable language, Beads offers a solution for creating interactive, maintainable, and robust web applications.

 

Additional resources

Check out more from the MeetUp Func Prog Sweden. Func Prog Sweden is the community for anyone interested in functional programming. At the MeetUps the community explore different functional languages like Erlang, Elixir, Haskell, Scala, Clojure, OCaml, F# and more.