❤
npm
Sign UpSign In

polymer-native

0.2.24 • Public • Published

Polymer Native

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.

Result iOS

Polymer Native app sample

Result Chrome

Polymer Native app sample

How to

Installing via NPM

    npm install polymer-native -g

Initializing new project

    polymer-native init MyTestProject

Running project on iOS

    polymer-native run

License

MIT: http://mit-license.org/

Copyright 2016 Denis Radin aka PixelsCommander

Dependencies (6)

Dev Dependencies (18)

Package Sidebar

Install

npm i polymer-native

Weekly Downloads

0

Version

0.2.24

License

ISC

Last publish

Collaborators

  • pixelscommander
Try on RunKit
Report malware