Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

Abstract.js

Abstract.js is a web framework for fast development

Subscribe to updates I use Abstract.js


Statistics on Abstract.js

Number of watchers on Github 49
Number of open issues 1
Main language JavaScript
Open pull requests 0+
Closed pull requests 0+
Last commit almost 4 years ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 9.13 MB
Homepage http://alloyteam....
Organization / Authoralloyteam
Contributors2
Page Updated
Do you use Abstract.js? Leave a review!
View Abstract.js activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Abstract.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Abstract.js

Abstract.js is a new and amazing framework for fast web development. It's the world's first Logic Oriented Program Framework(As I know). Using Abstract.js you can construct a readable, tidy project.

  • Abstract Models & Core Concept:Here the Models don't refer to the M of MVC, but drawn from the model concept in Mathematic. Abstract.js rethought construction of the web page and found the common and abstract actions in web development.
    We extract two base models which can describe all the web development. So it's rendering model and relationship model in Abstract.js.
    The relationship model is based on a simple state machine and using for describing the relationship between the rendering models. While the rendring model is using for rendering modules of the web page.
    But it's not enough just with the two base models, Abstract.js also offers the connction methods between the models to make it more convenient building the web world.
  • Virtual DOM and Event Propagation:Models refer to the Real Dom. Models construct Virtual DOM Tree with parent&child relationship and event propagation.
  • Logical Abstracted:Abstract Models are like ribs of the page. Many logical programmings are encapsulated, So you build your page fast.

Doc

Doc

examples

simple render model

var nav = new RenderModel({
    el: '.nav',
    data: {
        navList: [
            {name: '', cn: '_intro'},
            {name: '', cn: '_applacation'},
            {name: '', cn: '_doc'}
        ]
    },
    tmpl: "<li soda-repeat='item in navList' onclick='switchNav(\"{{item.cn}}\")' class='{{item.cn}}'>{{item.name}}</li>",
    events: function(){
        window.switchNav = function(name){
            Model.trigger("." + name);
        };
    }
});

nav.rock();

page model

var intro = new RenderModel({
    el: '.intro',
    tmpl: 'Model.js'
});

var nav = new RenderModel({
    el: '.nav',
    data: {
        navList: [
            {name: '', cn: '_intro'},
            {name: '', cn: '_applacation'},
            {name: '', cn: '_doc'}
        ]
    },
    tmpl: "<li soda-repeat='item in navList' onclick='switchNav(\"{{item.cn}}\")' class='{{item.cn}}'>{{item.name}}</li>",
    events: function(){
        window.switchNav = function(name){
            Model.trigger("." + name);
        };
    }
});

var page = new PageModel();
page.add(intro);
page.add(nav);
page.rock();

observe events

var intro = new RenderModel({
    el: '.intro',
    tmpl: 'Model.js'
});

intro.addEventListener("completed", function(e){
     // do something
});

Learn Abstract.js(comming soon)

Abstract.js list of languages used
Other projects in JavaScript