InfrontJS

The anti frontend framework for real javascript developers.

For developers who...

• ... like simple and smart solutions
• ... want to have full control of your code and no black boxes
• ... prefer to stay close to the platform and want to use its full power
• ... know vanilla javascript, css3 and html5
• ... want to avoid unnecessary abstractions
• ... do not want to learn additional domain specific languages and concepts (e.g. for templates etc)
• ... prefer a painless and easy-to-configure toolchain

For managers who...

• ... are tired of wasting time on permanent framework version updates
• ... don't want to take the risk that their product is built upon a framework which might become outdated in the future
• ... want their developers spending most of their energy on the product and not about the underlying technology
• ... want to avoid unnecessary third party dependencies
• ... want to stay flexible

Homepage · Guides · ApiDocs · Examples · Twitter

Installation

CDN

<script src="https://unpkg.com/infrontjs/dist/IF.js"></script>

npm

npm install infrontjs

Example

class GreetingState extends IF.State
{
    async enter()
    {
        this.app.view.render( this.app.container, '<h1>Hello InfrontJS World</h1>' );
    }
}

const myApp = new IF.App();
myApp.states.add( GreetingState );
myApp.run();

Build & Test

Feel free to fork and work with the library. After cloning it, make sure to

npm install

in order to install all dependencies.

Build library

Run the following command. The library will be generated and saved in the ./dist folder.

npm run build

Generate api docs

To generate the api docs, run the following command. The generated api docs are in the folder ./apidocs.

npm run generate-docs

Run unit tests

Unit tests can be executed by the following command

npm run test

Resources

• Find general information and interesting news on our website.
• Guides to certain aspects of the framework. guides.
• Like reading api documentation. Have a look at the api docs.
• Do you prefer to learn by example? Check out the official examples.
• Get the latest development updates on twitter.

Credits

This framework is build upon some great other open source projects...

• View class encapsulates EJS
• DOM diffing enabled rendering is powered by diffDOM
• Observables from the Helper class are supported by ObservableSlim
• UrlPattern used by the Router class relies on UrlPattern
• PathObject implementation heavily relies on some Lodash methods
• The background fx of our Shameless plug DefaultScene is based on this shader

Contributing

By contributing or commenting on issues in this repository, whether you've read them or not, you're agreeing to the Contributor Code of Conduct. Much like traffic laws, ignorance doesn't grant you immunity.

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.