X-Tag & Custom HTML markup elements

Recently I got interested in X-Tag project.

X-Tag project is from Mozilla.

It provide a cool way to create your own html tags

like

<uni-button></uni-button>

<uni-progress-bar></uni-progress-bar>

The way of interacting with these HTML element is same as Native html element,

Like you can do use jQuery 

As shown in this example - http://jsfiddle.net/nsisodiya/266tt/

in this example, I have used x-flipbox element from brick library.

Defining custom element provide modular design.

There is huge list of custom html element can be found on 

http://customelements.io/

Example like - https://github.com/luiztiago/facebook-image-element

create very simple way to add facebook image of any user using following html markup

<facebook-image object="luiztiago"></facebook-image>

<facebook-image object="narendra.sisodiya"></facebook-image>

etc

will add facebook image on your site.

We have a chrome plugin which detect that If a website is using Web Components (Custom elements) or not 

There are 2 main ways to write custom elements

1) using XTag

2) using Polymer

I am first exploring X-tags

You can learn how to create a custom element here http://x-tags.org/docs

I will create some custom elements and will blog on whole process.

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)

What is DOM-Less JavaScript Application

As a UI Architect, I am passionate about the design architecture of web application.

Normally a web application start with a time-line and deliverable UI pages.
In most of the cases, people design bad applications (non-salable) because they do not focus on UI architecture.

We can split whole application (The front-end) into 2 part. One DOM-less client and second is UI-Layer. UI-Layer take services from DOM-Less client.

What is the DOM-Less Client.

Its simple, Its a blank page, just pure blank page where you are nothing to show. For example, One day you open facebook.com and you get a pure blank page.

I call this a DOM-Less client because user do not have direct method to interact with application but he can interact with application using console or firebug.
In summery : Dom-Less client is just a JavaScript API, Similar to REST API.

REST API deals with URL, GET,POST method and request response methods.

DOM-Less client is a collection of services and classes which can be used by a 'super technical user' to interact with web application.

For example, Twidge is a terminal application for 'super technical user' who want to use Twitter on their terminal.
http://www.techdrivein.com/2010/05/twidge-twitter-client-is-for-those-who.html

DOM-less client methodology deals with creating full fledged software for 'super technical user who want to use application without GUI and with the help of JavaScript console.

Now, If you focus for creating such DOM-less application immediately then your focus and way of writing a web application will change. You need not to create a web application on thinking how a UI will behave, instead you are going to create a web application focusing on core logic and core behavior. you do not need to focus on how click events etc. Just focus on a fully functional console based web application for 'super technical user'.

you can consider writing it using node.js and there you will not be able to find browser.

This DOM-less client will provide services to your DOM-Layer (UI Layer or View layer). UI layer will be having all soft of click event , animation, view binding , templating etc. UI Layer will utilise  services from DOM-Less client and create a great application.

If we create this kind of separation while creating application then we will be having a solid architecture, at the same time we can separate UI team into two part using this. You can put domain experts and JS experts to create first layer (DOM-less client) and CSS-HTML-JS developer to work on second layer. (View Layer)

I hope this will help in designing better web application.

I will try to develop some demo application for this pattern.

#JavaScript

Part 2 - http://blog.narendrasisodiya.com/2014/06/how-to-separate-javascript-application.html

--

Narendra Sisodiya
UI Architect @ Unicommerce

Delhi - Bharat (India)