Wondering what’s next for npm?Check out our public roadmap! »

    dom99

    23.0.4 • Public • Published

    dom99

    npm bundle size minified + gzip npm Chat on Miaou


    What is dom99 ?

    dom99 is a JavaScript framework focused to make web development faster. Select HTML elements, add event listeners, synchronize state with the view, clone HTML templates with your data and insert them directly in the document.

    Changelog

    Installation

    npm install dom99

    Basic Use

    Data-binding

    <!-- The input and the paragraph as well as the js variable always have the same value -->
    
    <input data-variable="text">
    <p data-variable="text"></p>
    
    <script>
        d.feed({text : "Hello dom99"});
        d.start();
        console.log(d.variables.text);
    </script>

    Design philosophy

    Optimized for page-load

    By default dom99 is optimized for first page load, that means the size is small.

    HTML for mark-up, JS for logic

    Get up an running fast. dom99 does not attempt to invent for the nth time how to write if statements and for loops inside HTML. Put logic in JS, and mark-up that you already know in HTML. HTML being used when sufficient we respect the minimal responsibility principle.

    Separation of concerns

    Designers and Developers can work on the same files. Elements in the mark-up linked to the DOM use data-* instead of the overused class and id. The benefits to this approach is that the developers can safely add data-attributes to stylized components without breaking the styles, and the designers can safely add classes and ids without breaking anything.

    Easy to learn

    Get up an running fast. Documentation Use a premade starter pack create-dom99-app.

    Work with the Web platform

    dom99 is a web framework and is an extension to web standards HTML, CSS and JS, and does not intent to be a replacement.

    Zero-second compile time

    dom99 can be used in a zero-second compile time development set-up with ES-modules.

    No Virtual DOM

    No virtual dom is used for maximum possible performance.

    Read chrismorgan about DOM and VDOM on HN.

    Unopinionated

    dom99 is unopinionated. Bigger frameworks can be built on top of it. That means you can chose your own architecture, state management system, CSS system etc

    Complete Documentation

    Locally found in documentation/documentation-original.html

    Examples

    Local examples documentation/examples

    JSON, YAML, TOML, INI Converter

    Graphs

    HTML Composition

    <!--
    Define the template for an user
    every user has a picture, a short biography, and a contact button
    -->
    <template data-template="user-element">
        <img data-variable="picture">
        <p data-variable="bio">SHORT BIO</p>
        <button>Contact</button>
    </template>
    
    <!--
    The list variable name is "users" and the template used is "user-element"
    native html elements can also be used to display a list
    -->
    <div data-list="users" data-use="user-element"></div>
    <script type="module">
        import * as d from "./node_modules/dom99/built/dom99.es.js";
    
        d.feed({users :
            [
                {
                    picture: "usera.jpg",
                    bio: "Loves biking and skating"
                },
                {
                    picture: "userb.jpg",
                    bio: "Drinks tons of café."
                }
            ]
        });
        d.start();
    </script>
    HTML Result
    
    <div data-list="*users-user-element">
        <img data-variable="*picture" alt="user-picture" src="usera.jpg">
        <p data-variable="*bio">Loves biking and skating</p>
        <button>Contact</button>
    
        <img data-variable="*picture" alt="user-picture" src="userb.jpg">
        <p data-variable="*bio">Drinks tons of café.</p>
        <button>Contact</button>
    </div>
    

    Discussion

    Chat on Miaou

    Issues reports

    Contributing

    Contributing and things to do

    Dev

    npm run build-all to run all scripts in package.json in one go

    open tests/specification/SpecRunner.html to run unit tests

    License

    Boost License

    Install

    npm i dom99

    DownloadsWeekly Downloads

    230

    Version

    23.0.4

    License

    BSL-1.0

    Unpacked Size

    223 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar