NOML (no markup language)
Let's admit it, HTML and Javascript really suck for making applications. They have separate purposes (UI and logic) with no real glue to bind them. Enter jQuery, Backbone, Ember, Angular, React, the list goes on and on. All of these improve the glue, but still rely on some complicated mapping model between the HTML and Javascript.
With NOML there is no HTML (or JSX, or Xml-ish-ness). NOML renders javascript objects into html. This technique allows for dynamic content to be rendered on the fly, modified, and bound with logic, without ever touching HTML. The entire application is written in literal, readable, unconverted Javascript. The glue is solved (chemistry pun intended).
see working examples at https://github.com/adamduffy/noml-examples
Simple examples
results when noml.render() is called on the object.
ui;
hello world!
child elements
ui
span 1span 2
properties
NOML Element classes have a prop
method.
ui
welcome to noml
variables
since this is javascript to begin with, variables work naturally
var data = name: 'adam';ui
my name is adam
class handling
ui
a classy span
the NOML Element class handles de-duping of class names.
ui ;
a very classy span
Class names can be added, removed, or conditional, even after the initial render.
All props can be re-synced with the dom using .ref()
at creation, and .syncProps()
to update.
class
adds a classunclass
removes a classclassIf
adds the class if condition is true, removes if false.toggle
swaps the class based on condition.- all classname methods perform de-duping.
const span = ui ; // .ref() tells noml to keep a reference.// render the span;// at this point, className='myClass1 myClass2 conditionalClass trueClass'span ; // this will re-sync with the dom.// now, className='myClass1 falseClass'
a re-classed span
events
NOML will wire to DOM events during render. the Element class wraps a few common events
ui;
or you can use any other event name
uievent
components
Noml will render modular ui elements as components that allow for special interaction such as independent re-rendering and promise resolution. to do this, expose a getBody() method.
TODO: make example
you can give the component your own id or noml will auto-assign one so it can reference it for re-rendering, etc.
if your code maintains a reference to this object, the ui can be refreshed later by calling c.render() or c.syncProps(). this technique is best for low-level components where you want immediate response. For most cases, just re-rendering the whole page is much easier to manage. (and should still be very snappy)
Asynchronous component loading
to make loading, ready, and failure states, simply return a promise from getBody and expose a getLoadingBody() method. noml will re-render the ui when the promise is resolved or fails.
... { return Promise; } { return ; }...
'loading' will render until the promise is resolved.
this is a resolved promise
Reading input data
To keep the abstraction away from html, the best way to read user input is by mapping it back to your javascript data objects. You can do this with the change or other similar element events. Noml will wire up native dom element events if you begin a property with $. Another option is to give the element a unique id and find it later.
TODO: make example
Styles
Noml also uses javascript to define CSS (optional). The general format is as follows:
id: class: property: value state: property: value ... ... ... ...
Noml uses c.id and c.getStyle() to maintain the composite css object. Class names can be prepended with $ in place of . when desired (other selectors work in place of class name). Included examples show techniques to define and override default styles.
{ return $clickable: cursor: 'pointer' ':hover': 'text-decoration': 'underline' ; }
Putting it all together
That is the extent of the Noml library itself. This leaves a lot of room for project architecture around it. Here is a basic example of how to begin:
start with a simple html file:
Noml example
and a simple js file:
; windowonload = ; { ;}
The included example shows a technique of structuring an application with ui, data, logic, and state all managed.