What is DOM99 ?
Why use DOM99 ?
How to use DOM99 ?
In your HTML :
DOM99 will browse the DOM and react if an element has one of the following attributes
- data-99-vr : vr for variable : data binding between DOM element and js variable
- data-99-el : el for element : pre-selecting an element for later usage
- data-99-fx : fx for function adds an event listener to that element
<input data-99-vr="b" type="text"> <nav data-99-el="myNav">Navigation Links</nav> <button data-99-fx="click-deleteFoto">Delete Foto</button>
The general syntax is
<tag data-99-Keyword="details" > bla bla </tag>
If you are not using browserify you need to include this script tag in your html before other scripts that access dom99.
//Store your functions in the dom99.fx object dom99.fx.functionName = aFunction;
aFunction is called when you click this button
<button data-99-fx="click-functionName">Action</button> //Note we wrote functionName not aFunction
to start using dom99 use this statement as late as possible
To changes the text of
<p data-99-vr="talkings"></p> and all other element that share the variable talkings
dom99.vr.talkings = "Hi";
Use the same data-99-vr="talkings" on
<input> elements for two way data bindings
To use a preselected element
dom99.el.bigTitle //An element reference, we can do what we want with it dom99.el.bigTitle.remove(); //for instance remove the bigTitle node
<h1 data-99-el="bigTitle">You can remove me to make space</h1>
To inject template clones in your Document
<body> <template data-99-el="templateName"> <div data-99-el="SemanticName"> <p data-99-vr="text" ></p> Any HTML ... </div> </template> ... <div data-99-el="target"></div> </body> // JS // 1 create clone and execute directives let clone = dom99.templateRender( "templateName", "scopeName" ); // 2 populate the clone with any data and more dom99.vr["scopeName"]["text"] = "Anything I want"; // 3 insert the clone in the DOM dom99.el["target"].appendChild(clone);
Detailed explanations soon, see example in the Demo for now
You are ready to use DOM99 !
coming soon !
(Tested with Firefox 47+) Open demo
All previously known issues are fixed now. Clear.
You can handle new HTML with
DOM99.linkJsAndDom(startNode); . Already processed nodes won’t be affected at all because the ☀ is added to the attribute value after that.
Transpile to ES5
If you target older browsers, I recommend you to transpile dom99 to es5 compatible code. Here are the steps
- Download node.js at https://nodejs.org/en/
- Open the node.js command prompt and go in the directory with the dom99.js file
- Download Babel, find out how at http://babeljs.io/docs/usage/cli/ .
- Use this command
babel dom99.js -o dom99.es5.js
- Now use dom99.es5.js in your production.
Alternatives comparisons with Contra, Pro , some similarities
- More features
- Easily Testable
- More browser compatibility
- Learning curve: wall
- Forced to organize code base in the Angular MVC way
- Logic in Markup
- Heavy components for simple UIs
- Declarative Markup
- Shared variables are normal js objects
- Easier to understand what is happening in large code bases
- React native (still a thing ?)
- More browser compatibility
- Can be hard to understand how and why to use react
- Forced V-V model
- Elegantly populate templates with data
- Focus on the view
- Simple by design
- Imperative instructions are easy to understand
- Beginner friendly
- Best old browser compatibility
- Also a non-UI library
- One of the best things that happened in the Web Platform
- Not obvious how organize large code in a clean way
- Can do almost everything as easily with browser APIs nowadays
There are many other projects that will help you write client side applications. All have their advantages/problems. It will take you weeks/month maybe even years to browse them all and compare them. You have to make a choice at some point.
In march 2016 I decided to share DOM99 after heavy code changes on Github and NPM in its own repository instead of some sub-folder in some other project.
Abstract directions for the future:
- Simplicity in system and usage
- Encourage declarative UI programming models