Client side (Browser) development with MVC JS
- 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!
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. http://jsperf.com/angular-vs-knockout-vs-ember
For single page applications (like Gmail) I noted recently launched meteor as a promising library.
Server side JS development
- If you like to master HTML5 canvas, in my opinion first try with 2D animation and learn some basics.
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 http://www.html5canvastutorials.com/articles/web-graphics-trends-in-2013/
- 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.
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!
- 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.
- 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.
- 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.
- 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.
- 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 http://www-archive.mozilla.org/newlayout/doc/reflow.html ) 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.)
- 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.
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.