TempLang

The Concept

TempLang was born from the idea that the most time-consuming part of front-end developemnt is element binding, data-population, and event routing. TempLang seeks to define a simple syntax where listeners are positioned to take care of the common stuff.

This experimental approach leads to automatic binding... but... it moves the complexity of development up into the definition of the event relationships.

Objectives

The objectives of the framework are as follows:

• Populate HTML elements from data

  Attributes such as children, or children-data indicate what data to use when populating the interface. Any attribute or element body which contains a variable is pulled from the elements data, such as ${name}.

• Route events between elements

  Prefix with an underscore _ for children, or carret ^ for parents so that events can be quickly routed and handled. Elements will recieve a seperate target or destination property for each event giving them access to what the user-interface needs.

• Store variables on elements used for behaviour

  Any element that has a state which is always tied to it's existance can send that data along when an event is triggered from it.

• Alias variable names

  Outside of an element the data is often used under a different name, such as myFancySetting=key, for a value of myFancySetting represented by an elements key.

• Expedite high-level user behaviour

  Such as drag-and-drop, drop-down, navigation or selection behaviour.

The Big Idea

Create a Domain Specific Langauge for selectors which wires up most of a front-ends behaviour and element population.

Similar to how shorthand was an abbreviated langauge for note-taking during speaches, this DSL is an abreviated version of the common tasks in front end development.

Here are the characters used in the selectors and what they represent.

• _ underscore queries a child
• ^ carret queries a parent
• # represents an element, instead of a handler
• @ data instead of element vars
• ; colon, seperates multiple statements
• ( ) parenthesis indicate calling a handler
• , comma, seperates multiple arguments
• / comma, seperates multiple properties
• = renames a property
• : semi-colon is used when a peroperty leads to a value

Under The Hood

There are four main workhorses:

• Destination Keys/Specifications

  Change a simple key definition into an understandable set of directives.

• Template Parsing

  Make a set of objects used for populated nested or iterative elements.

• Element Population/Querying

  Elements are populated based on the data provided, and can be queried by tagname or their present var data.

• Event Routing

  Events are dispatched through a series of listeners that are automatically created based on the template variables/event handler definitions.