Creating a Widget Based layout and design engine.

I want to have a unified experience developing website front-ends. The layout, style (design), and the UI code (Javascript). Normally this would have 3 different languages which all work together to create the final result. I want a single language designed specifically to handle all three responsibilities.

For a little while now, I have been working on my new website development and hosting platform (yet to be named). The current incarnation is powered by Node.js & MongoDB, using all of the latest fun stuff of course. The system is broken into a couple of different services, which I am not sure qualify as "Micoservices" but are similar enough for me. The backend is completely seperated from the front end, in fact the backend only exposes a RESTful API which the front end must consume and is able to push and pull data via a custom language (DSL) that I have written "QLisp". Which I should probably explain in another post. The front end website actually needs to have it's own backend actually, at the moment this is PHP/CodeIgniter, which acts as the request router and data broker to the data service (To some extent this is how files are managed also). This architecture allows for separating the workload more easily, and allowing website to reside on completely different networks if needed, or even have multiple frontends connect to the same data from different websites or possibly just for localizing a website and having regional servers.


Having this platform in a semi-stable alpha, I am finding I can create simple websites extremely fast with little effort in the data processing (accept when I discover missing or broken platform features). This leads me to work mainly on the frontend of websites, and building layouts more than the backend data processing stuff, of which I am more used to developing. The landscape for Website Design in my opinion is terrible. I know and use SASS, LESS, CSS, CoffeeScript, JavaScript and HTML in various projects, but it doesn't mean I like them. Plain CSS, HTML, & JavaScript (ECMA Script) is great for simple UI's and websites, even large sites; the cracks however, start to show on large projects. This is why the other language have been created (LESS, SASS & CoffeeScript, even HAML & Jade), to hide some of the verbosity and redundancy that is required in the base 3 languages. I find myself creating some crazy project structures and tooling configurations to try and prototype new design and layout ideas. Using tools such as Node.js & Grunt with multiple plugins to enable watching directories and automatically compiling (transpiling as I like to call it) my SASS, CoffeeScript & Jade into the base 3 that the browsers understand. As you might have guessed, this is a lot of work to start a prototype, and as soon as I finish creating the project structure and tooling configurations that I like, the tools change and when I update either the setup no longer works, or there are new tools everyone is raving about.

The idea to solve this problem for myself

After thinking about this problem for some time now, and building a few sites using my platform and libraries such as Angular.js with all of these different languages, I think I want to start over. Not to say that I am going to scrap all of my work and start from scratch. I just think I need to reboot what "frontend" development and design mean to me, and more importantly how I actually do this work. This leads me to the conclusion, I want to make my own new Top-Level language like SASS, CoffeeScript, & HTML. But I am hoping to take a much different approach, one that I haven't really seen yet.

WIDGETS Everywhere!!!

That is correct people, I am planning on creating a language that understands Widgets as a base datatype and language feature. This language should be familiar and simple, however it will need to be able to control the Design, Structure, & Execution of the resulting design/layout. I want One Language to Rule Them All, or at least for the frontend. The backend doesn't need much help, I enjoy PHP (sort of), Python, C#, Go, & C++ for any server side code, and they are all fun to work with in their own special use cases, my opinion. Now I have not yet decided on any of the actual implementation or language details or specs.

Design Ideas & Language Features?

So far I know that I want a "Widget" to contain Structure, Style (Looks), & Logic; all in a single logical block (Potentially a single file?). Borrowing from other languages, I want to make this language heavily Prototype based but not exactly the way Lua, JavaScript or Self are. This Prototype feature should resemble a mix between Class Inheritance and a Clone like structure. Some of this will require a JavaScript Runtime (unfortunately) which will need to be included into the resulting "transpiled" scripts. This however is more common than you might realize. Many languages that compile to JavaScript hide little runtime functions in your resulting code, mainly to simplify some of their language features' implementations.

  • Class or Object Oriented Widget Declarations/Definitions
  • Prototype Pattern like Cloning and Inheritance
  • Simple Programming, Maybe in a BASIC like syntax (Who knows?, it might be fun)
    • Not designed to replace JavaScript, however interop with JavaScript will be allowed (Via 'extern' modifier?)
  • Single/Multiple File Widget Declarations/Definitions
  • Import like module system (Similar to D? or Go?)
  • Style is defined either in Global Space (Used via Import?) and in Local Space (Local Space should be nearly 100% of the styling, using the Prototype Pattern to override inside specific projects and layouts)

That's all good, but what does it look like?

As I have stated earlier, I am not sure what the language will look like, however I have some ideas that I would like to write down. So do not take this as a standard, but just some Ideas I have been thinking about for a couple months here and there.

# Declare and Define a new widget
# File: LoginForm.wgt
Module TazdijWidgets

Import Std.FormValidation

Widget LoginForm
  Slot `Title [Widget, String]
  Slot `Username [Widget, Field, String]
  Slot `Password [Widget, Field, String]
  Slot `Reset [Widget, Button]
  Slot `Submit [Widget, Button]

    Width: 400px
    VerticleAlign: Middle
    HorizontalAlign: Center
  End Design

      `Title {}
      `Username {}
      `Password {}
      :FluidContainer { HorizontalAlign: Right }
      End :FluidContainer
    End :Form
  End Layout

    # Configurations and Code executed at Compile and Runtime, depending
    # on the code placed in the constructor
  End Constructor

    # Code executed at Runtime, if the widget is removed or the page is left
    # simulating a cleanup cycle on the webpage
  End Destructor

  Function `Submit.OnClick()
    # Do some processing and validation in here
    # This code will be translated into JavaScript

  End Function

End Widget