Neft-dev NPM | npm.io

Neft

JavaScript. Everywhere.

Native, Browser, Server

Manifest

One Routing for all.
Virtual HTML document for native.
Abstract styles with platform-specified elements.

Why?

We ❤ ️JavaScript. It's simple to learn and widely supported language. Native apps need to be trully native - very fast and with platform-specified elements. If you have a native app, why not to reduce it and use like a mobile website? Have a mobile version of your website? Change few styles and prepare a normal website. Needs to be visible in Google? Run Node and serve HTML documents used in the client app for a better logic separation.

Now you know, why Neft was created - Don't repeat boring stuff. Focus on a client.

Supported platforms

Node >= 0.11.14,
Browsers (HTML5 or WebGL) IE >= 9,
Android >= 2.2.0 (API 8),
iOS >= 8.0.

What next?

Do you know JavaScript, CoffeeScript, C, Java or Swift? Help us and become a contributor. 🚀😃😎

Did you find a bug, have an idea for a new features or just you're pissed off at the documentation? Create an issue, write it on our Gitter or simply tweet us. 🤕🗣🚑💉

Installation

npm install -g neft

Running

neft create MyApp
cd MyApp
neft run node
neft run browser
neft run android
neft run ios

License

Apache 2.0

Example

Routing

routes/index.js

var Dict = require('dict');
module.exports = function(app){
    return {
        'get /': {
            getData: function(){
                return new Dict({
                    clicks: 0
                });
            },
            increaseClick: function(){
                this.data.set('clicks', this.data.get('clicks')+1);
            }
        }
    }
};

View

views/index.html

<body>
    <p class="large" clicks="${data.clicks}">Clicks ${data.clicks}</p>
    <button style:pointer:onClick="${route.increaseClick()}">+</button>
</body>

Styles

styles/view.js

Scrollable {
    contentItem: Flow {
        document.query: 'body'
    }
}

styles/index.js

Text {
    document.query: 'p'
    property $.clicks: 0
    background.color: 'yellow'

    if (this.$.clicks > 5){
        background.color: 'red'
    }
}

for ('p.large'){
    font.pixelSize: 23
}

for ('button'){
    border.color: 'gray'
    border.width: 2
}