Fusion

A simple JS library for Single Page Application (SPA) development for personal practice projects. It is under development.

What you can do with it?

• Develop single page applications.
• Add routing to pages.
• Make API calls with fetch request.
• And more, as soon as it becomes more matured.

Enough talk. How can I do all these stuffs?

1. First of all, download Fusion.

2. Add the following JS library in your page. <script src="/your_directory/fusion/fusion.js"></script> And then initialize Fusion by calling Fusion.initialize() in your page like below.

   <script>
       (function () {
           Fusion.initialize()
           setTimeout(function () {
               // TODO ...
           }, 30)
       }())
   </script>
   

   Here, calling the setTimeout() is important because, Fusion has runtime js loading, and completing this may take some time.

   Example

   • Include a JS page where you want to write your business logic. <script src="/your_directory/dashboard/dashboard.js"></script>
   • Code sample in your imported JS file dashboard = (function () { var template = `` return { content: template, initialize: function (container) { container.innerHTML = template } } }())
   • Now below the Fusion initializaiton, inside timeout funciton call, initialize the dashboard. (function () { Fusion.initialize() setTimeout(function () { dashboard.initialize(document.getElementById('root')) }, 30) }()) Now, once you refresh your page, you will see it rendering the templates.

Why should I do all these when there are great freamworks like React, Angular & Vue.js?

The 3 key things you are getting in here are -

• You are using virtual DOM.
• You are writing pure JS code, which does not need any transpiler to be used. The code can be directly understood by your browser.
• You can any time refuse to use the library, or modify it or write your own convension on top of this.

Validator Plugin

Initialization:

var validator = new Fusion.Validator()
validator.initialize(document.querySelector("form.add-to-cart-form"))

Classes:

1. required - Any mandatory input should have this class.
2. ${inputElement.name}-invalid-message - This class will have to be added in the span that will show any invalid message. ###Attributes:
3. length - This attribute will have to be added with any input field that requires a length range. Example: length='2..10'
4. type - This is a mandatory attribute for applying length constraint of numeric input types.

Built With

• javascript