Hybrid Apps – Android System WebView Updates

From Android Lollipop 5.0, Google started pushed an app called “Android System Web View”, which they periodically update the device web view. Since Apache Cordova / Adobe PhoneGap is well adopted for building cross platform Mobile apps, it will definitely have impact with this. It can be positive or negative.

So, if you are a Hybrid app developer and supporting Android 5.0 Lollipop & above versions, it’s worth to keep an eye on these updates regularly and test the app.

It’s highly recommended to subscribe Chrome Canary beta channel on Desktop as well as Android System WebView beta to get the updates early and act accordingly.

You can also join Google+ WebView beta community – https://plus.google.com/communities/105434725573080290360

If any of your existing app is breaking in the production, you can quickly ask them to uninstall the Android System WebView update.

Affected Android Versions – Android Lollipop 5.0 & Above.

How to uninstall the Web View update

  • Tap on the Settings icon.

  • Scroll down and tap on Apps or Application Manager.

  • Look for Android System WebView under Downloaded page.

  • Tap to open the info page.

  • Now click on UNINSTALL UPDATES button. This will reset the web view.

The above steps will help in solving the web view update issues on Android Lollipop 5.0.

NOTE: It’s a temporary solution till you work out a fix for it.

Hope it helps!

Get started with WEB

WEB is very powerful. It’s almost replaced the desktop environment (at least for me). For those who wish to learn WEB programming, here are the few resources to get started.

Codecademy – One of the best resource to learn HTML, CSS and JavaScript programming especially for absolute beginners. By the way, it’s FREE. It allows you to learn programming in interactive way. It has few more which you can explore.

CodeSchool – It’s interactive tutorials make your learning experience more fun. Not all courses are free. But there are few courses which you can get started with Web like JavaScript, jQuery, Angular JS etc.,

Apart from the above dedicates online courses there are many websites like Mozilla Developer Network (MDN), Bento & Microsoft Virtual Academy.

Why don’t you test your skills?

Sit the Test –  Quick and easy way to test your web skills which include, HTML, CSS and JavaScript. You can get the score right there.

Smarterer – Excellent website to test your skills on many programming languages. You can share your score on LinkedIn.

I will be updating this blog post with more information, if i found it useful. Also, i will writing series of blog posts on IDE for web app development and developer tools.

Happy Web learning!!!

Bower – A Package Manager

Recently i blogged on Modern Web App development, in which i mentioned few tools which will ease the web development. Let’s see one of the tools which is also my fav – Bower, the package manager for web.

As you aware that modern web application development requires one to many libraries or frameworks, and maintaining all of them is really hard, especially while upgrading! What if, if we have a tool to do this job. Cool, right! Let’s dig into that tool –

Bower is a great tool which helps us to maintain the project or app dependencies in more elegant way!

How it works?

Bower uses bower.json manifest (similar to package.json) file to hold all the package information. You can easily edit this manifest file. Works like a configuration file for your packages. Using Bower commands you can install all those packages at once which out chaos!

Installing Bower

You can install Bower using npm (Node Package Manager). If you don’t know what is npm, you can learn here – https://docs.npmjs.com/

So, if you don’t have npm installed on your machine. Install the Node.js, which will install Node as well as npm.

Bower requires Git. So install Git before you proceed with Bower installation.

So, before installing Bower, install the following dependencies –

Node.js 

Git

You may have to open Terminal(on MAC OS) or PowerShell / Command Prompt (on Windows). [I recommend PowerShell on Windows than Command Prompt.]

Type the following command –


$ npm install -g bower

NOTE: You may get permission issues, so you run the above command using sudo in MAC. On Windows, run the PowerShell or Command Prompt with Administrator Privileges.

Once you are done installing Bower globally, now we are ready to play with it!

Now, we need to create bower.json manifest file. You can create this manifest file manually or through bower.

Manually creating bower.json – Create a file and rename it to bower.json. That’s it! Data included in this manifest file should adhere to the spec –  https://github.com/bower/bower.json-spec

A Sample bower.json for Angular app –


{
 "name": "demo-app",
 "version": "1.0.0",
 "dependencies": {
 "angular": "^1.3.0",
 "json3": "^3.3.0",
 "es5-shim": "^4.0.0",
 "bootstrap": "^3.2.0",
 "angular-animate": "^1.3.0",
 "angular-cookies": "^1.3.0",
 "angular-resource": "^1.3.0",
 "angular-route": "^1.3.0",
 "angular-sanitize": "^1.3.0",
 "angular-touch": "^1.3.0"
 },
 "devDependencies": {
 "angular-mocks": "~1.3.0",
 "angular-scenario": "~1.3.0"
 },
 "appPath": "app"
}

Interactively create bower.json – You can create the bower.json interactively using  –


bower init

Answer the questions popped by Bower and it will create the file for you.

How to add new packages?

Try the following command –


//install the package and add it to bower.json dependencies
bower install <package-name> --save

//Ex: bower install jquery --save

You can search for available packages  – http://bower.io/search/

Update the bower package  –


bower update <package-name> [<package-name>] [options]

//[Options]

//-F: Force latest version on conflict

//Ex: bower update jquery -F

Uninstall the bower package  –


bower uninstall <package-name> [<package-name>] [options]

//[Options]


//-S: Remove uninstalled packages from the project’s bower.json dependencies

//Ex: bower uninstall jquery -S


More Bower API’s – http://bower.io/docs/api/

Can i register my own package or library?

Yep, you can do that using bower register – 


bower register <your-package-name> <git-endpoint>

//Ex: bower register mylibrary git://github.com/user/example.git

You can even unregister – http://bower.io/docs/creating-packages/#unregister

Bower comes with lot of tools, which allows you to integrate the Bower with other IDE’s and tools. More info – http://bower.io/docs/tools/

Hope it gave you an idea to kick start with Bower. I will be back with another tool in my next post.

Happy Web Programming!!!

Quick look of Keyboard events on Mobile browsers

As part of the project, we were working on the forcing the user to enter correct information while keying in. We tried leveraging the “keyCode” or “charCode” or “which” property on event object.

We did a quick trial by creating a Hybrid App and tested the same on the Android and iOS devices! The results were surprising.

Google Chrome to be the future rich browser which is FAILING and Apple’s Mobile Safari is WINNING. Google Chrome browser is failing to return the correct key codes from Android OS KitKat 4.4 and above.

So, it’s better to have the validation check while submitting the form instead of keying in!

I have created a demo page to test the same – KeyEvents

Below are the quick analysis on different Android and iOS devices –

Device & OS Status
Samsung Galaxy NOTE 8000 (4.1.2)      √
Samsung Galaxy S3 (4.3)      √
Samsung Galaxy S4 (4.4.2)      ×
Nexus 7 (4.4.4)      ×
Nexus 7 (5.1)      ×
Nexus 9 (5.1)      ×
Nexus 4 (5.1)      ×
Nexus 5 (5.1)      ×
Nexus 6 (5.0)      ×
Apple iPhone 6 Plus (8.0.2)      √
Apple iPhone 6 (8.1)      √
Apple iPhone 5S (8.0.2)      √
Apple iPhone 5 (7.1.2)      √
Apple iPhone 4S (8.0.2)      √
Apple iPad mini (8.0.2)      √
Apple iPad (6.1.3)      √
Apple iPad Air (7.1.1)      √

Happy Mobile programming!

Overview of Modern Web App Development

I started developing websites from the days, where JavaScript is considered as BAD and should be as minimal as possible – preferably for input validations. But things got changed over the time and JavaScript became the key for Web Apps!

I wish to share my encounter! Let’s start.

It was those days where Web App development is ruled by Server Side technologies like Classic ASP, ASP.NET, PHP etc., and JavaScript is used to do input validations. No AJAX. I have witnessed waiting for the site / app to load by looking at the blue progress bar in Internet Explorer (IE was dominant browser at that time).

Later AJAX introduced by Google through GMail app (though Microsoft IE has already have it through XmlHttpRequest ), which is revolutionary and it changes the way we develop apps. Developers considered AJAX as a powerful tool which can do miracles and it worked!

JavaScript started playing the key role in high performance web apps, where it triggered for Single Page ApplicationsSimultaneously developers started facing cross browser issues and it was really hard to achieve cross browser compatability! Hope you all agree with me.

Big thanks to John Resig for introducing jQuery library targeting cross browser issues which helped a lot! I know YUI(not actively maintained now) library already exists, but jQuery is instant hit and developers started using it and it’s open source!

With introduction of iPhone & Android, Mobile browsers started dominating desktop browser and they are powerful. This triggered injecting responsiveness to web apps through CSS3 Media Queries!

JavaScript started ruling the client side development and it’s time to take the JavaScript to Server Side. Ryan Dahl did it and called it as Node.jsIt again changed how we write server side code. May be if you wish to check first presentation on Node.js by Ryan himself!

Now developers started created packages of their libraries and pushing to npm (node package manager). Simultaneously CSS got better with frameworks like LESS and SASS.

Twitter created Bootstrap, a CSS framework which allowed to develop web app that are responsive targeting Mobile, Tablet and Desktop browsers! Also, they created bower, another package manager which is alternative to npm. Pros and cons of npm and bower is out of scope of this post!

SPA‘s got lot of attention and everyone started considering it instead of regular Multi page applications. It triggered to create MV* frameworks like Backbone JS, Angular JS etc.,

We have task runners – Grunt JS, Gulp JS to automate the tasks which we do repeatedly while building the app!

Frameworks changed the way we develop apps! Few of them :-

DOM Manipulation libraries:

jQuery, Lo-Dash, Underscore JS

HTML Templates:

Mustache JS, Handlebars JS

JavaScript MV* Frameworks:

Backbone JS, Knockout JS, Angular JS, Ember JS, React JS

Package Manager:

npm bower

Build Tools – TaskRunner:

GruntJSGulpJS

Scaffolding Tool:

Yeoman

Unit Test Framework:

QUnit, Jasmine, Karma

At Last, there are few developers, authors who guide & inspire us. Here are the few of them  –

Douglas Crockford, Paul Irish, Addy Osmani, Christian Heilmann, Remy Sharp, John Papa, Jake Archibald, Nicolas C Zakas, Yahuda Katz.

I strongly feel Web Apps will override Desktop apps. I will try my best to accomplish it!

Happy Web App programming!

EcmaScript 6 References

I’m in process of collecting useful resources on the web for EcmaScript 6. I thought it will be useful for you too!

http://people.mozilla.org/~jorendorff/es6-draft.html

https://leanpub.com/understandinges6/read

https://speakerdeck.com/rauschma/ecmascript-6-whats-next-for-javascript-august-2014

http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/

http://www.slideshare.net/Solution4Future/javascript-17363650

https://babeljs.io/docs/learn-es6/

I will keep adding as soon as i come across useful links!

Happy JavaScripting!!!

Useful Chrome Apps & Extensions for Web Developers

I have made by work easy by using the extensions / plugins whatsoever we call them. It can be on Chrome or Firefox. In this post, i would like show you few apps & extensions for Google Chrome(my favorite browser).

I strongly believe that Tools are great assets for web developers to debug the resolve the issues in no time. Tooling is gradually gaining momentum and it’s reaching peaks!

Backbone Debugger : Developer Tools extension for debugging Backbone.js applications. It allows to debug the Backbone.js web application by inspecting the Views, Models, Collections, Routers objects.

It’s a great debugging tool to find the daemon views which is left in the DOM and it tracks the events triggered.

You can install it from Chrome Web Store – Backbone Debugger

Ember Inspector : Tool for debugging Ember applications. It allows you to –

  • View all the routes defined in your app.
  • Information about templates, controllers and models that are currently rendered.
  • Inspect the Objects – Models, Collections etc.,
  • Make your application’s objects available in the console as $E variable.

You can install it from Chrome Web Store – Ember Inspector

Grunt DevTools : It’s an awesome tool to run your grunt tasks right inside your chrome browser. Also, it’s capable of running grunt tasks from multiple projects.

You can install it from Chrome Web Store – Grunt DevTools

JSON Editor : One of my favorite JSON editor tools which allows to edit JSON in the browser. It formats the JSON and you can live preview the results.

I know there are multiple apps / extensions for JSON, but i feel this is pretty useful to me atleast. You can install it from Chrome Web Store – JSON Editor

Tincr: Allows editing and fast reloading of local files from Chrome developer tools. With this tool, you don’t need to traverse between your source code and web browser. You can edit the source code inside the browser and changes will be automatically saved to the source. Cool Isn’t it!

In addition, Tincr does auto reloading of JavaScript and CSS changes made in other editors.

You can install it from Chrome Web Store – Tincr

Clear Cache : It allows to clear the cache / history of the browser from the beginning with a click. It’s an extension written by me and yet to publish to Chrome Web Store. It available in GIT and you can pull from it and install manually!

Download from my Git – Clear Cache

I will post more tools as i found useful to web developers like us :)

Happy Web App programming!