Web Components – The Future Web

Web Components & Polymers – The Fabric of Future

This blog post is about Web Components. What they are, why do we need them and how to go about creating a few of our own. We will also look at the browser support, make sure our Web Components work everywhere with the help of polyfills like Polymer. And finally, we will be using Yeoman to scaffold a Polymer project and using Yeoman sub-generators to scaffold new Web Components.

So, let’s get rolling.

Contents

The Examples in this tutorial can be found at GitHub. Continue reading

Angularjs – A Hands On tutorial

Angularjs – A Hands On tutorial

This is a hands on tutorial on Angularjs.  We will walk through most of the key features of Angular, and by the end we will build an Angular application named Movie Stub.

You can see the live demo of the app here.

Preview:

Screen Shot 2014-03-14 at 9.01.49 PM Screen Shot 2014-03-14 at 9.02.11 PM Screen Shot 2014-03-14 at 9.02.28 PM Screen Shot 2014-03-14 at 9.02.36 PMSo, lets get started.

Contents

Code for each topic is available here. And the complete application code can be found here.

Continue reading

Ionic Framework, Angularjs & PhoneGap Build- The Awesome Threesome!

Ionic Framework, Angularjs & PhoneGap

This is a getting started post on Ionic Framework & deploying the starter template to PhoneGap Build.

A more advance post on this topic can be found here.

When I read this article, I was pretty convinced that jQuery mobile is really killing PhoneGap & its abilities. jQuery mobile is actually awesome with its cross browser support & loading pages via Ajax, yada yada yada. But yes this is an overkill for a mobile app. We know what we are dealing with when we develop a hybrid app for a mobile. So why not use a user interface framework that will have only patches wrt mobile browsers!?

Yes, thats where Ionic fits in! Ionic is a

beautiful, open source front-end framework for developing hybrid mobile apps with HTML5.

The only reason I continued exploring Ionic was

1. Its Performance obsessed
2. Its has a built in support for AngularJS (- The mother of all SPA frameworks)
3. Most importantly its Native focused

I was sold!! And then I started diving in. And this post as mentioned earlier is a quick hands on.

Contents

Continue reading

Websockets & Sockets.io

Websockets & Sockets.io

Today’s web is more on the lines of demand and supply. A user request a page & the server dispatches it. After that the server is not aware who the client is (unless we maintain a session). For every other request from the same client to the same server, a new connection needs to be opened, every single time.

Below is screenshot of page loading time of my blog’s home page using this tool

Screen Shot 2014-03-10 at 9This is a call stack for the first request that was fired from one of the pingdom servers/browsers to my blog. It actually took ~.9 of a second to resolve the host, connect to my server & receive the first byte of data. This looks cute when we load the page for the first time, But if I keep executing the same test for 3-4 times,

Screen Shot 2014-03-10 at 9.53.56 AMI am still spending ~.4 of a second to do same steps again. This is where web sockets fit in.

Contents

Continue reading

Getting Started with Expressjs

Getting Started with Expressjs

This post is targeted at Express 3.x and *nix system, however the concepts are same across all OS for Express 3.x.

Windows users, please refer to the comment by acveer.

Once you are done with post, you can refer this post to see what has changed in Express 4.x

You can use Slush Express Generator to scaffold an Express 4 app, to be consistent across OS.

Express js

Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.

Expressjs is a server side framework, that takes care of handling requests and responses. It can use templating engines like Hogan (derived from HandleBars), Jade, ejs or CSS preprocessors like LESS, Stylus.

If you have worked with any web based Node projects earlier you must have seen a lot of them would be using Express. Because that is what Expres does to your Node app.

Contents

Continue reading

PhoneGap 3 – Contacts API Tutorial

PhoneGap 3 – Contacts API Tutorial

This is a quick start tutorial using PhoneGap 3’s contact API. I have written another post here explaining what PhoneGap 3 is, how is to set it up & what are the key differences between PhoneGap 2.x & PhoneGap 3.x. I recommend checking that out before continuing.

Approach

  • Step 1: Create a new GitHub repo (How to? – Here).
  • Step 2: Clone the repo to local
  • Step 3: Create new PhoneGap 3 project (assuming you have completed the setup from here)
  • Step 4: Update the newly created app & test in local.
  • Step 5: Commit Changes to GitHub repo
  • Step 6: Run PhoneGap Build, Install the app & validate(How to? – Here)
  • Step 7: Make changes to our project – add jQuery Mobile Framework (Must read) & Contacts API plugin.
  • Step 8: Commit changes back to the repo
  • Step 9: Issue a PhoneGap Build & BOOOOMMM!!! Install the app & validate

So lets get started!

PS:We are going to follow Mac/Windows – Android ADT based development.

Continue reading

PhoneGap 3 CLI Setup on Mac & Windows

PhoneGap 3 CLI Setup on Mac & Windows

In this post, I will help you set up PhoneGap Command Line Interface on Mac as well as Windows. I will try my very best to cover all the aspects. If you are facing any issues while setting up, do drop a comment & I can take a look at the issue.

Contents

PhoneGap + Cordova

PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. (Browser geeks, please allow me the affordance of this analogy and I’ll buy you a beer later.)

Continue reading