Niche Portobello Mushroom

    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

    Install

    npm i polymer-native

    DownloadsWeekly Downloads

    34

    Version

    0.2.24

    License

    ISC

    Last publish

    Collaborators

    • pixelscommander