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.
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.
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
This 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,
I am still spending ~.4 of a second to do same steps again. This is where web sockets fit in.
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.
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.
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.
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.
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.)