Hybrid Mobile Apps

I came across a question – “Questions on Hybrid Apps”  in one of the Forums, and i thought it’s worth writing a blog post, so that it will help others (at least for my blog post visitors ;) ) May be many of us have doubts about Hybrid Mobile Apps. Let me provide my thoughts -

Hybrid, the word itself states that, it’s mixture of multiple things. Now, Hybrid Mobile Apps – it’s mixture of multiple technologies.

1. How it is different from Regular / Native Mobile Apps?

Let me tell you the basic difference of Native Apps and Hybrid Apps -

Native Apps – Developed using Platform specific SDK (Software Development Kit). Native Mobile Apps built on platform SDK’s. For example, if you wish to develop an iOS App, then you may have to download the Apple iOS SDK and start building app. Now, you thought of powering Android users with your app, then you may have to download Android SDK and start building the app from scratch.

Hybrid Apps –  You can leverage your web skills to develop an Mobile App.

HTML 5 + CSS 3 + JavaScript + (APACHE CORDOVA / IONIC FRAMEWORK / TRIGGER.IO etc., )

We can achieve PORTABILITY – write once and deploy on multiple platforms.

2. How to access the device features like Contacts, Camera, GPS etc.,?

You can definitely access to all the device features through  - APACHE CORDOVA / IONIC FRAMEWORKTRIGGER.IOThese plugins will help us in accessing OS features through their API’s. Same is well documented in their respective sites.

3. Can i deploy the Apps to Stores for different platforms?

Yeah. You can deploy your app to multiple platforms App Stores. Consumers can download you app just like the Native Apps.

4. How do you control the layout of an Hybrid app considering it’s one app which will be run on many different devices with many different layouts?

Responsive Web Design. Using CSS 3 media queries you can achieve responsive web design. It allows to design layouts for different resolutions of the devices.

5. Which development framework is better Apache Cordova or Ionic Framework or  Trigger.io or any other?

Hard to answer. Most of the Hybrid Apps are developed on Apache Cordova. It’s Open Source. Even Ionic Framework internally uses Apache Cordova. Trigger.io is licensed and you may have to pay for it.

Each of the framework will have their own Pros and Cons. It’s better to do through analysis on choosing the right one for you!

Happy Mobile App programming!!!

Scalability in Hybrid Mobile Apps

Hybrid Mobile Apps = HTML 5 + CSS 3 + JavaScript. Hybrid Mobile Apps possible through Adobe PhoneGapIonic etc., Many articles available if you google about this!

Scalability is a big factor to consider while designing an Monile App, especially Hybrid Mobile Application. Many people suggests to go with Native app instead of Hybrid app, if SCALABILITY is a primary factor for your app. One point of time, i even agreed it and suggested my team to go with Native app development. Considering the facts, yeah for highly scalable apps, Native app is preferable solution!

In recent R&D i found that, we can achieve Scalability in Hybrid Mobile Apps too. We should pay more attention on the DOM size and this will lead to a highly scalable mobile app.

Let me explain my scenario -

As per requirement, we have to display list of items(Each item has more information). These items will be fetched dynamically from Server. If the number of items greater than 100, our app crashes since the DOM size for the 100 items is huge. Also, we are displaying all items at once which is causing the ***CRASH***.

Now we have started our R&D by examining the code. We tried  removing unnecessary HTML, CSS and JavaScript but in vain. Tried Document Fragments and Object Pools solutions still in vain. Object Pools has provided us better results, but not the scalable results :(

We know the root cause for the crash is the heavy DOM. So we started building ItemStack. ItemStack holds the chunked item size which we predefine(We define it as 20 items). In our scenario, the logic is total number of items / 20. Ex: If we have 100 list items, then the ItemStack size is 5.

Now we applied Lazy Loading approach. Based on scroll position we append or prepend ItemStack row, thus minimising the  footprint of DOM. I know appending and prepending again lead to more DOM access, but still we achieved it with DOM fragments!

Finally, we have fixed the crash issue with the above approach!

Happy Hybrid Mobile App programming :-)

Web Tools – makes WEB more beautiful.

I strongly believe we need great tools to build great Web Apps. I will walk you through few tools which i use in my development. It may be helpful for you too :)

 

Brackets  - An awesome IDE.

Brackets from Adobe is an open source project which is an awesome tool for Web developers. It’s available across the platform include – Mac, PC and Linux. I strongly recommend to try this IDE, if you didn’t try it!

It has plug-in support which includes JS Hint, CSS Hint etc., which makes this tool more awesome.

extractcss.com – An awesome CSS tool.

It’s an Online tool to extract the inline styles to make clean HTML.

jsbeautifier.org - An awesome JavaScript & HTML beautifying tool.

It’s an Online tool to make the JavaScript and HTML readable. Also it makes the code adheres to JS Lint (Indentation only)!

Online JSON Viewer - An awesome Online JSON Viewer tool.

It’s an online tool to view and edit JSON data. Also, we can load data from external URL.

JS Hint - An awesome JS code quality tool.

It’s an online tool to make the JS lint free. Also available as plugin for Visual Studio, Brackets IDE etc.,

JS Bin –  An awesome WEB tool.

It’s an online tool to create Web snippets includes HTML, CSS, JavaScript. Allows exporting to GIT as gist. Many more features to explore!

Watch this space for more web tools!

Webkit Scroll–best alternative to iScroll plugin!

I have seen questions been asked in the forums,  for the best alternative for iScroll. Though it’s a great plugin and works pretty smooth in Apple and Android devices, there are few limitations.

So, we have got better solution that using iScroll for smooth scrolling of list items, which works great in iOS and Android.

All you have to do it add –webkit-overflow-scrolling:touch to the container of the list items and the webkit takes care of the rest!

Code Snippet
  1. <div style="overflow:auto;-webkit-overflow-scrolling:touch;" >
  2.         <ul>
  3.             <li></li>
  4.             <li></li>
  5.             <li></li>
  6.         </ul>
  7.     </div>

 

Happy web programming!

Ripple Emulator for testing Mobile web apps

I have already blogged about different emulators available to test mobile web apps, and links for those –

Apple iPhone/iPad Setup

Android Emulator Setup

Windows Phone Emulator Setup

How it would be, if we have one tool to test our web app in all kinds of devices with different resolutions. Great, right! Ripple extension for

Google Chrome browser makes this possible. Installation is pretty easy and it’s the same process, how you install an Chrome extension.

Download – Ripple Emulator extension for Google Chrome [Make sure you access this link from Chrome browser, so that it will install automatically!]

Once, you are done with the installation, Ripple icon will be visible on the right top corner of the Chrome browser.

Ripple icon

Now, we are ready to test our web apps. Now type the URL in the browser, and click on Ripple icon. It will display Ripple Mission Control dialog.

Click on Enable button in that dialog.

Riple Mission Control

It will display bunch of options to test with different mobile application frameworks. Choose the right one for you. Since we are

testing mobile web application, will choose Mobile Web(default).

options

Now we are in Mobile mode!

mobile mode

We can test our web application. By default our web app will be displayed in a generic device. We change this and test in the appropriate

device. To do that, click on the Devices option in the left corner, and choose the appropriate device!

devices

You can also test the Orientation – Portrait / Landscape.

Few options available to simulate – Accelerometer, Geo location. These options will be handy when you are developing Hybrid

apps using Phone Gap / BlackBerry Web Works!

CAUTION: It’s always recommended to test your on physical device. Some times results may vary!

Thanks!

Firefox browser tool to test Responsive Web design

Modern web browsers are more developer friendly, by providing Developer Tools to make web development easy. Thanks to Mozilla for integrating a feature, which allows to test the Responsive Web design with out using various physical devices.

How to use Responsive Web Design feature in Firefox?

  1. Launch Mozilla Firefox(Latest Version).
  2. Browse the website which you wish to test. For example – i will take – http://tickletheweb.com website, which is developed to have consistent view across the devices.

image

3.   Click on Firefox button on the left top corner of the browser, and select Web Developer –> Responsive Design View.

image

4.  It loads the Responsive Design View chrome -

image

5.  Select different resolutions from the dropdown control on the left corner of the chrome to test the website in different resolutions, which is simple and great.

image

6.  It also allows to test  Portrait or Landscape orientations. Click on rotate button, which toggles between the orientations.

image

Happy Web programming!!!

Limit File Upload size in ASP.NET Web applications

One of the problems in file upload is to check the file size before uploading to the server. It’s been a big problem for web developers to restrict the file upload, if it exceeds the given file size .

Now, we can restrict it before uploading to the server using simple JavaScript snippet. Thanks to latest browsers – Microsoft IE 10+, Chrome 21+, Firefox 15+ for making this happen.

Here is the code to do that -

Code Snippet
  1. <form id="form1" runat="server" enctype="multipart/form-data">
  2.     <div>
  3.         <asp:FileUpload runat="server" ID="fileUpload" />
  4.         <asp:Button runat="server" Text="Submit" OnClientClick="return Validate();" OnClick="FileUpload" />
  5.         <div id="Message"></div>
  6.     </div>
  7.     </form>
  8.     <script type="text/javascript" >
  9.         function Validate() {
  10.             var msg = "";
  11.             var bIsValid = true;
  12.             var uploadedFile = document.getElementById("<%=fileUpload.ClientID %>");
  13.  
  14.             if (uploadedFile.files[0].size > 512000) // greater than 512KB
  15.             {
  16.                 msg += "File Size is limited to 512 KB!";
  17.                 bIsValid = false;
  18.             }
  19.  
  20.             var ext = uploadedFile.value.substr(uploadedFile.value.indexOf(".") + 1, uploadedFile.value.length);
  21.             if (ext != "jpg" || ext != "png") {
  22.                 msg += "You can upload only .jpg or .png images!";
  23.                 bIsValid = false;
  24.             }
  25.             if (!bIsValid) {
  26.                 document.getElementById("Message").innerHTML = msg;
  27.                 return false;
  28.             }
  29.             //On Success
  30.             return true;
  31.         }
  32.     </script>

The above code may fail in browsers which doesn’t support HTML 5 features, so it’s better to validate at server end as well for additional security!

Code Snippet
  1. protected  void FileUpload(object sender, EventArgs e)
  2.       {
  3.           if (fileUpload.PostedFile.ContentLength > 512000)
  4.           {
  5.               return;
  6.           }
  7.       }

 

NOTE: The above JavaScript snippet can be used across the technologies including JSP, PHP etc.,

Happy Web Programming!!!