UIDL

Code Generators

hi, I'm Alex 👋 

#include <iostream.h>

void main()
{
   int a, b;
   cin >> a;
   cin >> b;
   int c = a + b;
   cout << c;
}

Repetition

Abstraction

New Language Requirements

Built-in support for component-based UI architectures

Easy parsing and transformation

Agnostic of framework implementations and target platform

Capable of representing presentational and behavioral aspects

User Interface Definition Language

User Interface Definition Language

{
  "name": "My Component",
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "children": [
        {
          "type": "element",
          "content": {
            "elementType": "text",
            "children": [
              {
                "type": "static",
                "content": "Hello World!"
              }
            ]
          }
        }
      ]
    }
  }
}

UIDL Capabilities

UIDL Nodes: UI Elements, Static Nodes, Dynamic Bindings, etc.

Has information about component props and state

Declarative conditional rendering based on dynamic values

Repeat structures and event handlers

Attributes and styling information

And more ....

Code Generators

UIDL

CODE

CODE GENERATOR

Component UIDL

Template File

Component File

Styling File

Project UIDL

Project Files

Config Files

Entry Point, Routing

Under the hood

UIDL

Resolver

Assembler

Linker

Code Chunks

...

Plugin 1

Plugin 2

Plugin N

ASTs

HASTs

JSS

Mapping 1

Mapping 2

Mapping N

...

babel/generator

hast-to-html

jss.createClass

Contribute on GitHub!

Q&A

teleporthq oss work

By Alex Moldovan

Loading comments...

More from Alex Moldovan