Skip to content

Watch a Designer Who Really Knows What He’s Doing Create a Logo From Scratch

December 16, 2014

Why mobile developers should refocus their market from China to India – The Next Web

March 6, 2014

Music Timeline from Google

January 20, 2014

Music Timeline from Google

Search engine giant Google once more come up with an innovative idea of visualizing Music history with it’s Music Timeline in an interactive style. But I found Classical music is not included in it. So I guess, this might be targeting young generation,as Google Music Timeline included most of the popular music genre – Rock, Pop, Jazz etc.

You can search for a musician or Album you like but song search is not offered.  For instance I tried searching “Black or White” and thought it’ll show MJ or his album Dangerous but it didn’t came up. Another thing disappointed me is, though albums are back linked to Google play Music Store I can’t listen them as Google Play Music store is not accessible from India! :-(

Google, Please do something with that.  Anyway, it’s nice to see the up and downs of Music genre. Kudos to Google Research team and brains behind this idea!

Also my curious mind looked up into source of page and found how nicely they done the coding. :-)

Visit Google Music Timeline

and read here  Google Research teams post about Music Timeline.

Creative Technologist

January 13, 2014

Review of JS Frameworks — Journey Through The JavaScript MVC Jungle | Smashing Coding

January 12, 2014

JavaScript Libraries and Frameworks

December 7, 2013

Few months back, I started Game development on HTML5 Canvas as a hobby. Game development is fun and it keeps me young. Though, I already experimented with most of the Frameworks and Libraries released for JavaScript, sometimes I got bit confused which one I have to select for my particular requirement. So I can imagine how hard for a JavaScript beginner to make a selection.

So thought of compiling what I learned.  Hope it may help someone interested in JavaScript.  I think nobody will disagree with me that learning JavaScript in detail won’t be a waste of time.

JavaScript Applications

Present and Future is JavaScript. So master JavaScript in detail. Master concepts like Objects, Closures, Prototypes and Design Patterns.  Application of JavaScript can be broadly classified into three (my perspective only) major areas.

  1. Client side (Browser) JavaScript
  2. Server side JavaScript
  3. HTML5 Canvas specific JavaScript Libraries and Frameworks

Client side (Browser) development with MVC JS

  1. Your knowledge in Native JavaScript coding can come in handy while scripting for BOM (Browser Object Model) development.
  2. For DOM (Document Object Model) development, there are lot of JS Libraries and Frameworks available. Examples for popular ones are YUI,  JQuery, Prototype, MooTools, ExtJS, Dojo and the list goes on and it’s almost countless!
  3. If you are developing dynamic web applications, you can create HTML templates using JavaScript libraries like Angular.jsKnockout.js,  Backbone.jsMustache.Js , Underscore.Js, Handlebars.Js, and recent release Can.JS  Which one to choose? It depends.But general idea is backbone.js is better for heavy DOM manipulation.
    Angular.Js is best suited for data driven apps.I suggest to visit the following URL and scroll down to the end for latest test results.

    For single page applications (like Gmail) I noted recently launched meteor as a promising library.

Server side JS development

  1. I’m sure many of you already heard about Node.JS It’s not a full fledge web server like Apache or IIS. Node.JS is just a javascript library in which a module is build for creating a basic server. Functionalities of Node.JS can be extended by adding more modules into which are available on gitHub.  You can use Node.JS to deliver a web page for client browser while another one for search engine crawlers. This can be particularly useful for single page websites to overcome SEO issues. But Node.JS should be configured in your Server. Unfortunately most shared hosting servers not providing this facility.  But real application of Node.JS will be in the development of Web applications where you’ll have full access to Web servers and predictable client platforms.
  2. Also note MustacheJS can compile templates in server side itself and deliver as HTML. This will be useful while considering Progressive enhancement. (in case of JavaScript disabled client)

JavaScript Libraries and Frameworks for HTML5 Canvas

  1. If you like to master HTML5 canvas, in my opinion first try with 2D animation and learn some basics.
  2. Also try SVG javascript. It is showing a growth in usage.

If you are interested in animation using HTML5 canvas, try to understand features and experiment with libraries like Processing.JS, Easel.JS, Kinetic.JS, Paper.JS, Fabric.JS etc.  Though Raphael.js losing popularity in competition, this one got browser compatibility even with IE6!

You may don’t need to master all, but understanding few of them may help you to select the best suitable one for a given situation. Please google for each library and experiment with each one. But if you want to learn only one or two, please refer this link

  1. Try 3D with Three.JS

Every other day a new library is appearing in GitHub. Keep your eye and mind open for the next excitement. Happy Scripting.

Hybrid Mobile App development using PhoneGap: A case study for beginners

May 20, 2013

Hybrid Mobile app development

A recent experience with one of my client prompt me to write about Hybrid Mobile Development, as I found there are many ways to improve performance of app and efficiency of development team.

For this case study, I’m taking an instance of a mobile app development project took place in a mid size company with a team of 50 members in the project. The team supposed to develop few mobile applications for 5-6 different platforms ranging from iOS to Symbian.  For them this is first time experience. However their inside research team suggested using PhoneGap.  Till then things were fine.

Things changed thereafter – The web designers in the team asked for submitting mock screens for each activity/layout of the app. They were also new in mobile app development.  They just gone through some basic UI documentation of iOS, Android etc. and designed screens in native style for each platform.  Once designing phase was over and approved by client, web designers created the HTML templates. For that, they advised to use JqueryMobile. I joined into the project at this time as a consultant with mobile domain expertise. Once started creating HTML templates web developers started realizing most of the screens they designed for each platform is very ‘native’ in look and mimicking it using JQueryMobile is like creating different templates for each device!

Once web designers created the HTML templates, ‘software developers’ (note the point – not front end developers, coding by java or .net developers!) immediately started JavaScript coding and used PhoneGap. The content of the app is pulling from a Content Management System as JSON data and there was not a single static page to provide basic info, if internet is not available! Pulling and displaying the list contents and handling images in content etc. were handled without any thought!  Developers for Symbion platform started doing it in native way. As development advances they found most of the pages were having jerks and jumps (especially in Black Berry).  Anyway, somehow they got approval from iTunes app store and started building for other platforms.  As an Architect with comparatively fair experience in mobile and web apps, I would like to suggest the following procedure for rest of the world:

  1. If your client is looking for an app which can deploy on various platforms-like iOS, Android, Windows, BlackBerry etc. PhoneGap is definitely a good option for hybrid development. (Also try alternatives to Phonegap, such as Titanium, MoSync, Intels App Framework etc)  But before proceeding, do good research. Research. and Research.
  2. If project execution time is important, make sure you are NOT mimicking native style of each mobile platform.  Just create a single design that matches with most mobile platforms style. Or at least , use almost similar design for iOS and Android and go with less color information (means less colors, images and gradients) for BlackBerry, Symbian and Java platforms, just because most of these platforms comes in less powered hardwares. For Windows Mobile, I suggest to follow the metro theme that matches their own style because of usability.Also before making the initial design, make sure you finalized which javascript framework is going to use for creating the visual layout.  The common ones are Zepto, JQuery Mobile, Kendo UI etc.
  3. Finalize the Architecture and make sure along with technical lead/Project Designer your UI lead also involved in the process from the beginning. Knowing exactly what you are going to build and being everyone in same page will definitely speed up the development time.
  4. Once Architecture is finalized create a wireframe using tools like Pencil project, Axure or something like that. Before jumping up on creating wireframes make sure, you studied latest trends in visual representation of data and navigation options. If client and Team lead/Designer agrees with the flow, proceed to create at least 4-5 screens which should look like screen shot of app you are going to create.
  5. Once got written approval from Client on design, colors and other branding elements, designers can start creating designs and icons. Make sure they are working on vector format, so it’ll be easy to create different size design elements and icons for various resolutions. For example while designing for iPhone and iPad you have to create at least 3 sets of designs and for android minimum 4 is required. PNG is the best acceptable format. But for Symbion icons are supposed to create in svg format. MAKE SURE DESIGNERS GONE THROUGH DESIGN DOCUMENTATION PROVIDED BY EACH Mobile OS PLATFORMS. (In case of iOS, pixel sizes they mentioned should be followed. Otherwise your app may get rejected). ALSO, REMEMBER AND CONSIDER THE PHYSICAL SIZE AND/OR RESOLUTION OF DEVICE WHICH MAY VARY.If you got at least 3 designers, assign two platforms to each of them and demand a thorough study of what is possible in each platform.  Before proceeding to design process, it’s better to provide mobile handsets and tablets to designers and allow them to download similar apps and experiment with it.
  6. Once design is over, create html templates with the help of web developers. While creating the page structure, give special attention to the order and arrangement of DOM elements. Try to avoid overuse and deeply nested DOM elements.  This will help to reduce ‘browser reflow’. (You can find a good note here )  Also, I noticed some html developers adding ‘translate3d’ transform css style extensively in their project which is normally good for hardware acceleration. But applying translate3d CSS property on complex DOM elements may affect the app performance adversely – sometime it may even get crash! Also avoid nesting DOM elements that use translate3d.)
  7. Many javascript frameworks are available for visual layout – like Zepto.js, JQuery Mobile, JQtouch, Kendo UI or anything like that. (This should be finalized at initial stage itself.  Note the second para in point 2) Each one have it’s own advantages and disadvantages.  Zepto is really small in size which helps faster execution. JQuery Mobile is very native looking for iPhone, while Kendo UI provides a good balance between iPhone and android UI.
  8. Javascript Templating will allow you to easily convert JSON to HTML without having to parse it. My preferred javascript templating frameworks are Amber.Js, underscore.js or Handlebars.js (this part missed in earlier case study, which caused lot of trouble – especially delays in dynamic listing). I suggest ‘code monkeys’ get involved in this stage along with Front end developers. (Please note, a hybrid mobile project needs Front end developers NOT only web designers. To know the difference between these different titles, please read this blog )
  9. Then came the development phase.  But before starting development, I suggest to do a smoke test of templates and make sure it’s appearing fine in all hardware devices and various screen resolutions.
  10. In development, the optimized coding and better memory management is also important. Actually this is where a good architect should exhibit his/her skills.  An architect should know very well the balancing act of data storage across available options and optimized data transfer methods. Also, if you are expecting a lot of people going to use your app simultaneously and content is pulling dynamically from a server, you should seriously consider using ‘Node.js’  (Node.js is a javascript framework with asynchronous communication abilities which can be used for server-side programming! ; yes, you heard it right – ‘javascript for server side programming’. Using Node.js, you can render a page in server itself and send to client.) It’s also possible for NodeJS to interface with the various push notification systems available on each platform, or to use something like SocketIO to provide real-time communications between client and server.  Here again, Architect should consider the load balance between server and client before doing everything in server side itself.Personally, I think creating templates in client side (browser web view) is better idea. Just create a single page mobile app with dynamic JavaScript MV* template and send data seperately as JSON or such other data formats. Also remember, may be your project may not require a templating engine at all. But if you think, it’s required, I guess this site may help you to select one, as per your criteria.

    How to decide if you need a javascript template engine for your app? Well, simply put, if you found something like this in your HTML page – “var output = ‘<li><a href=”‘ + a_link + ‘”>’ + link_name + ‘</a></li>';” It indicates you can use a template engine for betterment.

Well, this is a very short note about Hybrid Mobile App development. But I hope it might be useful for someone in the business. I’m not an expert, so please let me know if you got better ideas/options or suggestions and comments.  Thanks.

Please check Intels App Framework (previously JQMobi) and MoSync also as an alternative to PhoneGap.  Also I strongly suggest to go through this presentation to know what Christophe Coenraets want to say about Performance optimization for PhoneGap based Hybrid Mobile apps.


Get every new post delivered to your Inbox.

Join 118 other followers