My HTML5 based mobile app development so far

HTML5 app for mobile isn’t new kid in the block. It caught my eye when I wanted to learn html, css and javascript. There are abundant resources on why html5 and how it can give you advantage over native in terms of costs and blah blah. All these doesn’t matter to me, I love programming so it is always fun to try new area, hence I starting playing around with html5 based apps. I would be sharing how my experience went so far. I am not an expert in web technology so whatever I have learned or tried may not be right at all but that counts as my experience.

I have made html5 based app in 2 different teachings so far. I would be sharing those and how do they compare to each other?

Hello Web

First, full web and less native code possible for developer. I chose phonegap for it. Why? No reason. I just picked it. Phonegap framework gives developer whole project template where you don’t need to do much native coding or settings after initial setup. You directly start with writing on web. There are native features that you would like to access and for that it comes with inbuilt plugins and you can find plugins outside too(like for ibeacons). So there too you will be tinkering with javascript after plugins(if not available inbuilt) are installed/setup. I made small demos, medium scale app. Some things were good and some not satisfactory. Most unsatisfactory part was navigations between screen. There is something clean about navigation transition in native ios apps. This I couldn’t achieve from pure web. What I found was phonegap gave just one window to work on, so every screen was to be coded in html. I tried to replicate screen navigation transition like native in javascript. Comparison was nada, unacceptable. I am really no expert in javascript and css and I am still learning but so far i could not make anything near to result of native ios screen transition. Result was slow and unpredictable jerks in animation. I simply removed screen animation. My app was about bringing new screen to users without any transition now. It was fast compared to my last effort but not good to the eyes and feel.

I love Remix sometimes!

Second, what if I try to make my contents only in html but windows and navigations be pure native? Hence I tried to make each screen of uiviewcontroller with uiwebview. I needed another important thing i.e communication between javascript and native objective-c. I solved that part with this awesome library. Now outcome was much satisfactory. All screen navigation transition were smooth native powered but my content were html, css & javascript. I was feeling good about this and I am comfortable with both native and web since I would be learning web along with using my knowledge experience with native. I could even delegate some independent business logic to native if I was finding javascript slow sometimes. It could be my bad javascript skill and definitely not writing optimized code, but I have this flexible option to go between native and web. I haven’t done much performance measure on call between javascript and native. I am planning to go much further along this route.

I have made an sample based on second approach and its available in github.

One Comment

  • Great article Padam and thank you for sharing!

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>