Polymer-native NPM

Native UI framework based on Web Components

No new conceptions. Feel free to use HTML/CSS which you know so good to develop completely native applications for mobile platforms.

Motivation

Currently mobile devices are powerful enough to run mobile web applications at 60 FPS however controls behaviour (buttons, sliders, form elements) is different between web and native platforms. Experienced user notice this difference immideately which results in lower user satisfaction for web based apps because they got used to consistant UI behaviour on mobile platform of their choice. Creating native facades for web components results in better user experience without additional effort or knowledge needed.

Example app index.html

<style>
    body {
        margin: 20px;
    }

    #icon {
        display: inline-block;
        margin-bottom: 20px;
    }

    #submit-input {
        width: 100%;
        height: 40px;
        padding: 10px;
        font-size: 16px;
        margin-bottom:10px;
    }

    button {
        color: #ffffff;
        width: 100%;
        height: 40px;
        background-color: black;
        border-radius: 5px;
    }
</style>

<body>
    <img is="native-image" width="256" height="256" id="icon" src="img/lenna.png"></img>
    <input is="native-input" id="submit-input" value="Hello world!"></input>
    <button is="native-button" onclick="alert(document.getElementById('submit-input').value);">Alert input value</button>
</body>

Will result in app looking in the same way in browser and on mobile device or emulator but the difference is that in browser all controls are web and on mobile UI is native which leads to higher user satisfaction without additional job done.