Simple Todo App using Google Polymer

Polymer – Everything an Element.

Polymer is a framework used to build Modern Mobile First Web Apps. If you are familiar with AngularJS, where we use Directives to create re-usable Components, similar way in Polymer we can extend the HTML and create custom Tag with a specific feature.

HTML5 has already introduced many Semantic Tags to make the html code more meaningful. Polymer takes a step further and makes it even structured and organised making HTML more simpler and maintainable.

WEB Components:

Polymer has basically two types of components:

• Core Components
• Material Components (Paper Components)

All core components include from design elements to the utility. Paper components include all the Material aspects like Buttons, Floating buttons, Header, Menus etc.

Example to make a simple AJAX call in Polymer:

We need to use a Core AJAX element to make a HTTP request:

<core-ajax id="ajax"
                   auto
                   url="http://URL_to_resource"
                   on-core-response="{{reponseHandler}}"
                   handleAs="json">
</core-ajax>

Creating a custom Element:

Using <polymer-element> we can create a custom Element. Also we can import any other elements using <link rel=”import”>.

And every Element contains basically two parts:

• <Template> : provide the html to your Element to be replaced. (can additionally have a <style> to the template)
• <Script> : Add functionality or interaction to the Element.

Here an Example:

<!-- Imports -->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-icon-button/core-icon-button.html">

<!-- Polymer Element -->
<polymer-element name="element-name" attributes="any-inputs">

    <template>
        <link rel="stylesheet" href="any-style.css">

        <!-- Content of the Element -->
        <content select="core-label"></content>
    </template>

    <script>
        (function() {
            Polymer({
                // Polymer is ready:

            });
        })();
    </script>
</polymer-element>

Polymer + Material Design:

Polymer comes with Many Material components pre included. Check out the link for some basic components: https://www.polymer-project.org/docs/elements/

Polymer Todo:

Lets build a Simple Todo app using Polymer. Whole purpose is to build a fully responsive App to make it work on Mobile as well on WEB (A single Code Base :)). These are the features covered:

1. Listing Todos
2. Add a new Todo
3. Mark as completed
4. Remove completed
5. Clear All

• Find the final Demo link: WEB: http://techiedreams.com/demos/polymertodo/
• ANDROID APK: http://techiedreams.com/demos/TDPolymerTodo.apk

Screenshots:

Basic setup:

Using a Yeoman Generator: https://github.com/yeoman/generator-polymer

YOLOmer! Polymer and Yeoman for lighting fast dev, by Rob Dodson:

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

A self explained source code is here at GIT: https://github.com/chanusukarno/Polymer-Todo

I always dreamt of a single code base to make it work on Multiple Platforms. Many work well with WEB but faced many performance issues when it comes to Mobile. Even Polymer is not the best performer as of now(polymer is still a beta and a dev preview).

So after exploring many UI frameworks to build a high performance Hybrid App, I am now stuck with IONIC the great front end Mobile framework(It also has a unique support for Larger screens like iPads and Tablets, by which we can use it even as a web App). I will soon post some interesting tutorials on IONIC.

Stay Tuned! Like and Share! – show some love

The post Simple Todo App using Google Polymer appeared first on TechieDreams.