vape

v1.0.6

Published

2 years ago

## ToDo's

Downloads

0High
0Medium
0Low

janbiasi

Vape JavaScript Framework

ToDo's

[ ] Add a better method to register component names, because uglifiers will rename all classes e.G. class Button will be converted to function z() in ES5.
[ ] Use EventEmitter3 instead of the custom implementation.
[ ] Implement unit-tests with Chai and Mocha.
[ ] Adding a continous integration service like Travis and Code quality tool like codeclimate.
[ ] Do something against memory leaking and for better performance with e.g. disposables.
[ ] Adding static modules without event bindings in register method e.g. for Accordeons.

About it

Vape offers all frontend developer the access to write modern and class based ES6 code for the browser by splitting the Website into tiny modules. Each module will be represented as an ES6 class, which can inherit from other base Classes. There are a lot more features like the Utility class, automatic bootstrapping and autobinding module context to each class.

Installation

You can install this package via Bower (coming soon) or via NPM (recommended)

npm install --save vape
bower install --save vape

Information: It is highly recommended to use vape with a transpiler such as babel to adapt the written code to the current browsers.

Getting started

There are only a few simple steps to follow.

1. Create your Module classes

You have to inherit from the base vape Component class and export it back.

// components/atoms/Foo/js/Foo.js
import Component from vape;

class Foo extends Component {
    constructor() {
        super();
    }
}

export { Foo };

2. Register your Module and create Application

Next up you'll need an instance of vape's Application class, where you can register your custom modules afterwards.

import Application from vape;
import Foo from 'atoms/Foo/js/Foo';

const MyApp = new Application();

MyApp.registerComponent(Foo);

export { MyApp as App };

3. Annotate your HTML Markup

Next up you have to annotate the Markup with some attributes to enable autoloading your whole application.

<html>
<body data-v-application="MyTestApp">
    <div class="a-foo a-foo--modifier" data-v-component="Foo">
        <strong>Hellow there!</strong>
    </div>
</body>
</html>

4. Have some fun, but ...

Finally you need to transpile your application file, which imports all your modules, to ES5!

Advanced

Inheritance

Vape Components can inherit from each other, for example you have a normal Button, a ButtonLink and ButtonTargetLink. Take a look at the three classes below and their usage in the final HTML to learn how the inheritance in vape works.

Note: We use jQuery in this example

Button.js

import $ from jquery;
import Component from vape;

class Button extends Component {
    constructor() {
        super();

        $(this._ctx).on('click', function() {
            self.onClickAction();
        });
    }

    onClickAction() {
        // Do nothing here ...
    }
}

export { Button };

ButtonLink.js

import $ from jquery;
import Button from 'Button';

class ButtonLink extends Button {
    constructor() {
        super();
    }

    onClickAction() {
        window.location.href = $(this._ctx).text();
    }
}

export { ButtonLink };

ButtonLink.js

import ButtonLink from 'ButtonLink';

class ButtonLinkAction extends ButtonLink {
    constructor() {
        super();
    }

    onClickAction() {
        alert('Some action happening!');
    }
}

export { ButtonLinkAction };

Register the modules

import Application from vape;

import Button from 'Button';
import ButtonLink from 'ButtonLink';
import ButtonLinkAction from 'ButtonLinkAction';

const ButtonApp = new Application({
    context: document
});

ButtonApp.registerComponents([
    Button,
    ButtonLink,
    ButtonLinkAction
]);

export { ButtonApp as App };

Custom annotation names

You can also use your own annotations inside the HTML if you don't like the default data-v-component or data-v-id attributes. For example: You're working on a project which name is Healthy Shop System you could use the shortened name hss.

Setting your custom prefix is pretty simple and you can do it even if your project is already up and running:

import Application from vape;
import { Calculator, Button } from 'components/bundle';

const HSSApp = new Application({
    domAttrPrefix: 'data-hss'
});

HSSApp.registerComponents([
    Calculator,
    Button
]);

export { HSSApp as App };

So, now you can change your HTML annotations the the following example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Healthy Shop System - Home</title>
</head>
<body data-hss-application="ECommerce">
    <div class="a-calculator" data-hss-component="Calculator">
        <h2>Calculate something!</h2>
        <input type="number" name="calcin" placeholder="e.g. 12345">
    </div>
</body>
</html>