Thursday, February 13, 2014

Native vs HTML5 vs Hybrid Apps

Native app development 

Pro

  • Apps where user experience is paramount,
  • Apps where speed is vital, 
  • Apps that need tight integration with device features (camera, location data, motion sensors, contact lists, etc.) 
  • Apps that need to deliver an immersive experience—like certain games, 
  • Apps that involve virtual or augmented reality. 
  • Apps that require high security might do best as native too—iOS sandboxes each app and some Android devices provide the ability to create different profiles for official and personal use

Cons

  •  If you need to support multiple OSs, you could wind up building separate apps from the ground up for each OS. 
  • Each OS uses its own language and SDK. 
  • One way to control cost is to limit development to the two leading platforms—iOS and Android. 
  • Another answer to the problem of coding multiple times and getting dedicated developers would be using cross-platform tools like Xamarin Studio or Appcelerator Titanium—which are essentially software frameworks that let web developers create native apps for multiple platforms without having to know and learn separate coding languages. For example, a developer with knowledge of HTML and CSS can create an iOS app by using Xamarin Studio.

HTML5 Mobile Apps 

Pros 

  • Where multiple OSs, devices and form factors must be supported while containing cost. Getting to market quickly on multiple platforms is a good use case.
  • HTML5 developers are often easier to find than native developers, making HTML5 apps more convenient and cheaper to develop
  • Can also be less costly to maintain, since there’s only one code base for all devices
  • Apps can be upgraded without requiring users to download and install new code
  • Google Docs and Scribd are good examples of successful web mobile apps built in HTML5

Cons

  • Not right for every app. Limited when it comes to user experience. And if your app needs access to native device functionality, you might want to look into native or hybrid
  • Not every device supports the full capabilities of HTML5, so work arounds might need to be devised for some devices
  • HTML5 apps may be less secure than native apps because they’re not leveraging the all the security features of each OS

Hybrid Mobile Apps

What is it? 

It is a web mobile app wrapped inside a native container. It can help to combine a rich user interface developed in HTML5 with the device-specific capabilities accessed through the native code. The visual element in a hybrid app is mostly delivered by the HTML part, while the native code interacts with the device—and readymade libraries such as PhoneGap help to connect the two.

Pros

  • You can chose to mix and match the HTML and native components to meet the specific requirements of your app. It also provides a nice compromise between the advantages of native and web apps—easy and convenient development, fast deployment, and access to device-specific features.
  • Netflix and Yelp are good examples of hybrid mobile apps

Best approach

The reasonable solution would be hybrid apps—that combine the cross platform capabilities of HTML5 with offline and device specific capabilities of native apps. Gartner even puts a hard number to this prediction—about 50% of the total mobile apps developed and deployed by 2016 would be hybrid apps. [http://www.gartner.com/newroom/id/2429815]

Factors to consider when making a choice

  • What do you need the app for? Does it bring a significant revenue model for your business or is it merely for a mobile presence an extension of your business website?
  • What kind of experience does the app need to deliver to the user? 
  • What features it will need to have? 
  • Will the app need to access device-specific features—like geolocation abilities and the contacts list? 
  • Will it need the pinch and zoom functions?
  • What about online and offline capabilities?
  • What security features do we need?
  • What is the total time that you can afford to spend on developing a new app, or how quickly do you need to deploy your mobile app solution?
  • How do you intend to make your app available to users?
  • Development cost? Don’t just think about development cost—consider the expected returns and benefits from deploying the solution too. An app that costs more to develop may be worth it in the long run.

References

Whitepaper from DMI Inc
Presentation on JQuery Mobile vs Appcelerator Titanium vs Sencha Touch by Steve Drucker
Question about Xamarin 2.0 vs Appcelerator Titanium vs PhoneGap on Stackoverflow

Thursday, October 17, 2013

Exclude files from War packaging by Maven profile

To achieve this I have used the "packagingExcludes" property of Maven war plugin. For more info and examples of using this property see this page. To exclude files by Maven profile you need to first parameterize the value of "packagingExcludes" in war plugin declaration in pom file

     <plugin>  
          <artifactId>maven-war-plugin</artifactId>  
          <version>2.1.1</version>                      
          <configuration>  
                <packagingExcludes>${pkg.exclude}</packagingExcludes>                                     
          </configuration>  
     </plugin>  

In Maven profile you can define the value of this property by profile

            <profile>  
                  <id>prod</id>  
                  <properties>  
                       <pkg.exclude>WEB-INF/classes/com/internal/*.class,internal/*</pkg.exclude>                                                                                       
                  </properties>  
                  <activation>  
                       <property>  
                         <name>environment</name>  
                         <value>prod</value>  
                       </property>  
                  </activation>                      
            </profile>  

Tuesday, July 30, 2013

Mobile Browsers and Cookies

My attempt at succinctly describing first party and third party cookie support in various mobile browsers. For a good read on Cookies in general see this Wikipedia article


BrowserDefault Cookie BehaviourDefaultReference
Safari MobileSupports three cookie settings. "Never", "From Visited", "Always"From Visitedhttp://support.apple.com/kb/HT1677
Chrome MobileAccept cookies: checked/unchecked. No way to enable frist part only. CheckedChecked on my phone
Opera MobileAccept cookies: On /OffOnChecked on my phone
Opera Mini on a BlackberryAccept cookies: on/off. Onhttp://www.usa.gov/optout-instructions.shtml
Android BrowserAccept cookies: Checked / Unchecked. No way to enable first part only.Checkedhttp://www.usa.gov/optout-instructions.shtml
Firefox AndroidCookies: Options "Enabled", "Enabled, excluding 3rd party", "Disabled"EnabledInstalled on my phone and checked
Internet Explorer MobileAllow cookies on my phone: Checked / Unchecked Checkedhttp://www.windowsphone.com/en-us/how-to/wp7/web/changing-privacy-and-other-browser-settings
Blackberry BrowserAccept cookies: Checked / UncheckedCheckedhttp://docs.blackberry.com/en/smartphone_users/deliverables/32004/Turn_off_cookies_in_the_browser_60_1072866_11.jsp

Monday, June 03, 2013

Elastic Beanstalk Tomcat Container Timezone

When deploying a Tomcat container webapp using AWS Elastic Beanstalk with default AMI, it defaults the EC2 instances to UTC/GMT timezone. To set a different timezone the hard way is to create your own custom AMI with the required timezone. If you are only running the Tomcat container on EC2 instance then an easier way to change timezone is to specify is as a JVM command line option. To change the configuration

1. Login to your AWS console
2. Go to "Elastic Beanstalk" service
3. Under your environment click on "Edit Configurations"
4. That should popup a screen and the last tab in the screen will say "Container"
5. Set the required timezone as shown in below screenshot. Java supports these timezones

Wednesday, May 15, 2013

DOJO Combobox On Enter Key Event

Below code can be used to setup a event to fire when a enter key is pressed inside combobox.

1:  require([  
2:  "dojo/ready", "dojo/store/JsonRest", "dijit/form/ComboBox", "dojox/storage", "dojo/request", "dojo/json"  
3:  ], function(ready, JsonRest, ComboBox, storage, request, json)  
4:    
5:  {   
6:      var comboBox = new ComboBox(  
7:      {  
8:         id: "IdCombo",  
9:         name: "NameCombo",  
10:         placeholder: "Enter text",     
11:      }, "placesomewhereid");  
12:    
13:      comboBox.startup();     
14:        
15:      require(["dojo/on", "dijit/focus", "dojo/keys", "dojo/domReady!"], function(on, focusUtil, keys)  
16:      {  
17:          on(document, "keyup", function(event)  
18:          {  
19:             if(event.keyCode == keys.ENTER && focusUtil.curNode.id == "IdCombo")  
20:             {  
21:                 //Write code here that needs to run when enter key is pressed  
22:             }        
23:          });  
24:      });  
25:  });  

Monday, May 13, 2013

Creating autocomplete text box in DOJO

Using DOJO combobox, you can create a autocomplete functionality. Below code creates a programmatic combobox and assigns a json store to combobox. A declarative input form element is used a placeholder on page.

1:  <script type="text/javascript">   
2:  require([  
3:  "dojo/ready", "dojo/store/JsonRest", "dijit/form/ComboBox"], function(ready, JsonRest, ComboBox)  
4:  {    
5:    var jsonStore = new JsonRest  
6:     ({  
7:        target: "URL for Ajax service"  
8:     });  
9:     var comboBox = new ComboBox(  
10:     {  
11:        id: "SomeUniqueID",  
12:        name: "SomeUniqueName",  
13:        value: "",  
14:        store: jsonStore,  
15:        pageSize: 3,  
16:        searchAttr: "key",  
17:        queryExpr: "${0}"  
18:     }, "StoreItemSelect");  
19:    comboBox.startup();   
20:  });   
21:  </script>  
22:  <body>  
23:     <input id="StoreItemSelect"/>  
24:  <body>  

The AJAX service should return items in below json format

 [{key: "Autocomplete value 1"},{key: "Autocomplete value 2"},{key: "Autocomplete value 3"}]  

Friday, May 10, 2013

Dojo TabContainer Tab select ContentPane reload

The usual way to implement a TabContainer is to define a ContentPane as tab childs. When a tab is selected and if you want the ContentPane to reload everytime the tab is selected then you need to specify the refreshOnShow property of ContentPane to true.

 var tc = new TabContainer(  
 {  
     style: "height: 100%; width: 100%;"  
 }, "tc1-prog");  
  var cp2 = new ContentPane(  
 {  
     title: "First Tab",  
     href: "page1.html",      
  });  
  tc.addChild(cp2);  
  var cp2 = new ContentPane({  
     title: "Second Tab",  
     href: "page2.html",   
     refreshOnShow: true     
  });  
  tc.addChild(cp2);    


In this case when "Second Tab" is selected, it refreshes every time. Refresh basically calls the dojo ready function on the page same as when loading the page using F5. "First tab" on the other hand will only load the first time its selected and will not refresh in later selects