basic-js

v0.2.0

Published

2 years ago

front end framework build simple to work fast

Downloads

0High
0Medium
0Low

basic framework di backbone angular requirejs dependency injection requirejs isolated modular fast performance basicjs basic-js

basicJS

Front End framework build to be fast and simple.

I wanted the best of RequireJS, Backbone and AngularJS in a simple framework. We can differ in what is the best of requireJS, AngularJS, and Backbone but let me explain what I think about that.

Positive things about BasicJS:

HTML extensions
Plugins system to build your own HTML extensions
True Dependency Injection (not need to put a lot of scripts in yout HTML)
HTML is not polluted
Events are declared in the controllers, not everywhere (you can but I don't encourage you to do that) I want to debug my app easily
You can load ONLY what you use, and you use only what you want
Lightweight
BasicJS is super fast
You can build your html attributes, tags and whatever you want in an real easy way
Not strange pseudo language
The HTML can be converted to JSON and then to HTML easily, so designers can work with HTML and developers with JSON. So both can be happy.
VDOM
Mustache-like template system
CSS engine selector
Shim config and dependencies simple
BasicJS order which script load first for you

One entry point

This is how your HTML looks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your basicJS app</title>
</head>
<body>
    <script type="text/javascript" data-main="/main.js" src="/basic.js"></script>
</body>
</html>

Real dependency injection

Built requireJS way, you don't need to include every script in your html, BasicJS do that for you when the app needed.

This is how your modules looks with basicJS *

var someModule = $b.def([
    '/path/to/script.js',
    '!/path/to/template.html'
], function(script, template) {
    // do something with the script and template
});

Router

Routing can be a real pain, is because of that I made this so simple, all the capabilities a developer want in a simple and concise way. With really simple regex filters.

This is how you can declare your routes in the app, with built-in filters *

var AppLoader = $b.def([
   '/modules/default/default.js',
   '/modules/user/user.js'
], function(_default, _user) {
   $b.Router.addRoutes({
      '/user/id/some/thing': {
         controller: _user,
         params: {
            id: '\\d{1,3}',
            thing: '[a-z]{1,6}'
         }
      },
      'default': {
         controller: _default
      }
   });

   $b.Router.run();
});

Controller

Simple and compact, $b.controller execute the initialize first, then the render if you have one and binds the events you want. Easy to debug, all your events in the controller. No more look everywhere for a listener.

var UserCtrl = $b.def([
   '!/modules/user/userTemplate.html',
   '/values/for/the/template.json',
   '/click/function.js'
], function(userTmp, values, functionClick, params) {
    // params are the params you put in the url, already filtered
   $b.Controller({
      el: $b.select('body')[0],
      initialize: function() {
         this.vdom = $b.vdom.process($b.vdom.html2json(userTmp), values);
         this.html = $b.vdom.json2html(this.vdom);
         return this;
      },
      render: function() {
         this.el.innerHTML = this.html;
      },
      events: {
         'click #function': functionClick,
         'mouseover .user': function() {
            console.log('hover on .user');
         }
      }
   });
});

Template

I already made a bc-repeat, but you can build your own attributes with the behaviour you want in an easy way.

<div class="some">
    <h1 id="function">{{title}}</h1>
    <ul bc-repeat="k in value">
        <li class="user">
            <a>Your name is: {{k.name}}</a>
            <span> Fullname: {{k.name}} {{k.lastname}}</span>
        </li>
        <h2>{{other}}</h2>
    </ul>
</div>

HTML extensions

You can extend HTML, tags, attrs, everything can be added and I plan to have a lot of extensions you can download and use. bc-repeat is an example.

This is how you extends HTML attributes

$b.vdom.attrExtensions.push({
    bc_repeat: function(json, params) {
        // code
    }
})

Here I load bc-repeat extension, now I can use it in the app.

$b.req([
   '/app.js',
   '/extensions/bc_repeat.js'
], function(App) {
   App();
});

Easy shim config

Is clear enough i guess.

$b.setConfig({
   jquery: {
      url: '/jquery-1.11.3.min.js'
   },
   underscore: {
      url: '/underscore-min.js',
      deps: ['jquery']
   }
});

To be continued...

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme