https://github.com/aadilhasan/mini-js

It is a small size frond-end javascript framework, with modern js framework features.
https://github.com/aadilhasan/mini-js

javascript javascript-framework javascript-library js js-framework js-library js-libs

Last synced: 2 months ago
JSON representation

It is a small size frond-end javascript framework, with modern js framework features.

• Host: GitHub
• URL: https://github.com/aadilhasan/mini-js
• Owner: aadilhasan
• Created: 2017-09-05T12:24:51.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-12-03T21:11:39.000Z (about 4 years ago)
• Last Synced: 2024-10-10T15:52:27.864Z (3 months ago)
• Topics: javascript, javascript-framework, javascript-library, js, js-framework, js-library, js-libs
• Language: JavaScript
• Homepage:
• Size: 53.7 KB
• Stars: 4
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# mini-js

It is javascript framework for frontend development heighly inspired by Vue JS. I am developing it just to learn and understand JS and its framework more, it is not meant to be used in production.

[Check out a demo TODO app here](https://jsfiddle.net/aadilhasan07/7a4d56qo/19/)

## features

Mini JS has features of modern JS frameworks, here are some of the features - 

* **Virtual Dom**- A lightning fast virtual dom which with a good diff algorithm for fast partial rerender.

* **Two way data binding**- As soon as data gets change it will reflect in the ui.

* **Native Directives**- such as m-on ([example](https://jsfiddle.net/aadilhasan07/2kfns190/8/)), m-for ([example](https://jsfiddle.net/aadilhasan07/rv205m1n/)), m-if ([example](https://jsfiddle.net/aadilhasan07/d7hfo4mx/)), m-literal:class ([example](https://jsfiddle.net/aadilhasan07/oy0cqedm/2/)) etc.

* **Router**- for navigation between pages(routing)

## installation

To use it you can install using **npm install --save mini-js** or use this CDN **https://cdn.jsdelivr.net/npm/mini-js/build/mini.min.js**

## uses

### html element

Mini needs an element in which it can mount the template or it which it can operate

```



  

  
 {{best_fruit}} is the best fruit in the world 

   change best fruit in the world 




```

### initialize app

```

var app = new Mini({

    

    el: '#test_app',

    data: {

      

      best_fruit: 'mango',

      fruits: ['apple', 'banana', 'berry', 'orange', 'cherry']

      

    },

    methods: {

    

      change_best_fruit: function(){

      

        var index = Math.ceil(Math.random()*5);

        this.best_fruit = this.fruits[index];

      

      }

    

    

    }

    

});

```

## more examples will be added soon.