5 Steps to Understanding Drag and Drop with Ext JS. Translations of articles for developers: web-development


5 Steps to Understanding Drag and Drop with Ext JS. Translations of articles for developers: web-development.

One of the most powerful interaction design patterns available to developers is “Drag and Drop.” We utilize Drag and Drop without really giving it much thought – especially when its done right. Here are 5 easy steps to ensure an elegant implementation.

Defining drag and drop
A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.
From a high level, drag and drop decisions can be summed up by the following flow chart.
5 Steps to Understanding Drag and Drop with Ext JS
To speed up our development, Ext JS provides us with the Ext.dd classes to manage the basic decisions for us. In this post, we will cover coding for the appearance and removal of the drop invitation, invalid drop repair and what happens when a successful drop occurs.

Organzing the drag and drop classes
A first glance of the classes in the Ext.dd documentation might seem a bit intimidating.  But, if we take a quick moment to look at the classes, we see that they all stem from the DragDrop class and most can be categorized into Drag or Drop groups.  With a bit more time and digging, we can see that the classes can be further categorized into single node and multiple node drag or drop interactions.
5 Steps to Understanding Drag and Drop with Ext JS
In order to learn about the basics of drag and drop we’ll focus on applying single drag and drop interactions to DOM nodes.  To do this, we’ll utilize the DD and DDTarget classes, which provide the base implementations for their respective drag and drop behaviors.
However, we need to discuss what our objectives are before we can start implementing drag and drop.

The task at hand
Lets say we’ve been asked to develop an application that will provide a rental car company the ability to place their cars and trucks in one of three states:  available, rented or in repair status.  The cars and trucks are only allowed to be placed in their respective “available” container.
5 Steps to Understanding Drag and Drop with Ext JS

To get started, we must make the cars and trucks “dragable”. For this, we’ll use DD. We’ll need to make the rented, repair and vehicle containers “drop targets”.  For this we’ll use DDTarget.  Lastly, we’ll use different drag drop groups to help enforce the requirement that cars and trucks can only be dropped into their respective “available” containers.
The HTML and CSS for this example is already constructed and can be downloaded here.  With that downloaded, we can begin coding by adding drag operations to the cars and trucks.

Step 1: Starting with drag
To configure the vehicle DIVs elements as dragable, we’ll need to obtain a list and loop through it to instantiate new instances of DD.  Here’s how we do it.
Hide code highlighting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Create an object that we'll use to implement and override drag behaviors a little later
varoverrides = {}; 
// Configure the cars to be draggable
var carElements = Ext.get('cars').select('div'); 
Ext.each(carElements.elements, function(el){
 vardd = newExt.dd.DD(el, 'carsDDGroup', {
 isTarget : false}); 
 //Apply the overrides object to the newly created instance of DD
 Ext.apply(dd, overrides); 
});   
var truckElements = Ext.get('trucks').select('div'); 
Ext.each(truckElements.elements, function(el){
 var dd = new Ext.dd.DD(el, 'trucksDDGroup', {
 isTarget : false
}); 
Ext.apply(dd, overrides); });

All drag and drop classes are designed to be implemented by means of overriding its methods. That’s why in the above code segment, we have create an empty object called overrides, which will be filled in later with overrides specific to the action we need.
We get of list of car and truck elements by leveraging the DomQuery select method to query the cars container for all the child div elements.
To make the cars and truck elements dragable, we create a new instance of DD, passing in the car or truck element to be dragged and the drag drop group that it is to participate in. Notice that the vehicle types have their own respective drag drop group. This will be important to remember later when we setup the rented and repair containers as drop targets.
Also notice that we’re applying the overrides object to the newly created instances of DD using Ext.apply., which is a handy way to add properties or methods to an existing object.
Before we can continue with our implementation, we need to take a quick moment to analyze what happens when you drag an element on screen. With this understanding, the rest of the implementation will fall into place.

Peeking at how drag nodes are affected
The first thing you’ll notice when dragging the car or truck elements around is that they will stick wherever they are dropped. This is OK for now because we’ve just begun our implementation. What is important is to understand how the drag nodes are being affected. This will aid us in coding for the return to their original positions when they are dropped on anything that is a valid drop target, which is known as an “invalid drop”.
The below illustration uses FireBug’s HTML inspection panel and highlights the changes being made by when a drag operation is applied to the Camaro element.
5 Steps to Understanding Drag and Drop with Ext JS
Demo

While inspecting the drag element during a drag operation, we can see a style attribute added to the element with three CSS values populated: position, top and left. Further inspection reveals that the position attribute set to relative and top and left attributes updating while the node is being dragged around.
After a the drag gesture completes, the style attribute remains along with the styles contained therein. This is what we have to clean up when we code for the repair of an invalid drop. Until we setup proper drop targets, all drop operations are considered invalid.

Step 2: Repairing an invalid drop
The path of least resistance is to repair an invalid drop by reseting the style attribute that is applied during the drag operation. This means that the drag element would disappear from under the mouse and reappear where it originated and would be quite boring. To make it smoother, we’ll use Ext.Fx to animate this action.
Remember that the drag and drop classes were designed to have methods overridden. To implement repair, we’ll need to override the b4StartDrag, onInvalidDrop and endDrag methods.
Lets add the following methods to our overrides object above and we’ll discuss what they are and do.
Hide code highlighting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Called the instance the element is dragged.b4StartDrag : function(){// Cache the drag elementif(!this.el){this.el = Ext.get(this.getEl()); }   //Cache the original XY Coordinates of the element, we'll use this later.this.originalXY = this.el.getXY(); }, // Called when element is dropped not anything other than a dropzone with the same ddgrouponInvalidDrop : function(){// Set a flag to invoke the animated repairthis.invalidDrop = true; }, // Called when the drag operation completesendDrag : function(){// Invoke the animation if the invalidDrop flag is set to trueif(this.invalidDrop === true){// Remove the drop invitationthis.el.removeClass('dropOK');   // Create the animation configuration objectvaranimCfgObj = {easing : 'elasticOut', duration : 1, scope : this, callback : function(){// Remove the position attributethis.el.dom.style.position = ''; }};   // Apply the repair animationthis.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj); deletethis.invalidDrop; }   },

In the above code, we begin by overriding the b4StartDrag method, which is called the instant the drag element starts being dragged around screen and makes it an ideal place to cache the drag element and original XY coordinates – which we will use later on in this process.
Next, we override onInvalidDrop, which is called when a drag node is dropped on anything other than a drop target that is participating in the same drag drop group. This override simply sets a local invalidDrop property to true, which will be used in the next method.
The last method we override is endDrag, which is called when the drag element is no longer being dragged around screen and the drag element is no longer being controlled by the mouse movements. This override will move the drag element back to its original X and Y position using animation. We configured the animation to use the elasticOut easing to provide a cool and fun bouncy effect at end of the animation.
5 Steps to Understanding Drag and Drop with Ext JS
Demo

OK, now we have the repair operation complete. In order for it to work on the drop invitation and valid drop operations, we need to setup the drop targets.

Step 3: Configuring the drop targets
Our requirements dictate that we will allow cars and trucks to be in be dropped in the rented and repair containers as well as their respective original containers. To do this, we’ll need to instantiate instances of the DDTarget class.
Here’s how its done.
Hide code highlighting

1
2
3
4
5
6
7
8
9
10
11
//Instantiate instances of Ext.dd.DDTarget for the cars and trucks containervarcarsDDTarget = newExt.dd.DDTarget('cars','carsDDGroup'); vartrucksDDTarget = newExt.dd.DDTarget('trucks', 'trucksDDGroup');   //Instantiate instnaces of DDTarget for the rented and repair drop target elementsvarrentedDDTarget = newExt.dd.DDTarget('rented', 'carsDDGroup'); varrepairDDTarget = newExt.dd.DDTarget('repair', 'carsDDGroup');   //Ensure that the rented and repair DDTargets will participate in the trucksDDGroup rentedDDTarget.addToGroup('trucksDDGroup'); repairDDTarget.addToGroup('trucksDDGroup');

In the above code snippet, we have setup drop targets for the cars, trucks, rented and repair elements. Notice that the cars container element only participates in the “carsDDGroup” and the trucks container element participates in the “trucksDDGroup”. This helps enforce the requirement that cars and trucks can only be dropped in their originating container.
Next, we instantiate instances DDTarget for the rented and repair elements. Initially, they are configured to only participate in the “carsDDGroup”. In order to allow them to participate in the “trucksDDGroup”, we have to add it by means of addToGroup.
OK, now we’ve configured our drop targets. Lets see what happens when we drop the cars or trucks on a valid drop element.
5 Steps to Understanding Drag and Drop with Ext JS
Demo

In exercising the drop targets, we see that the drag element stays exactly its dropped. That is, images can be dropped anywhere on a drop target and stay there. This means that our drop implementation is not complete.
To complete it, we need to actually code for the “complete drop” operation, by means of another override for the instances of DD that we created some time ago.

Step 4: Completing the drop
To complete the drop, we will need to actually drag the element from its parent element to the drop target element using DOM tools. This is accomplished by overriding the DD onDragDrop method.
Add the following method to the overrides object.
Hide code highlighting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Called upon successful drop of an element on a DDTarget with the sameonDragDrop : function(evtObj, targetElId){// Wrap the drop target element with Ext.ElementvardropEl = Ext.get(targetElId);   // Perform the node move only if the drag element's // parent is not the same as the drop targetif(this.el.dom.parentNode.id != targetElId){   // Move the elementdropEl.appendChild(this.el);   // Remove the drag invitationthis.onDragOut(evtObj, targetElId);   // Clear the stylesthis.el.dom.style.position =''; this.el.dom.style.top = ''; this.el.dom.style.left = ''; }else{// This was an invalid drop, initiate a repairthis.onInvalidDrop(); }

In the above override, the drag element is moved to the drop target element, but only if it is not the same as the drag element’s parent node. After the drag element is moved, the styles are cleared from it.
If the drop element is the same as the drag element’s parent, we ensure a repair operation occurs by calling this.onInvalidDrop.
5 Steps to Understanding Drag and Drop with Ext JS
Demo

Upon a successful drop, the drag elements will now will be moved from their parent element to the drop target.
How does the user know if they are hovering above a valid drop target? We’ll give the user some visual feedback by configuring the drop invitation.

Step 5: Adding drop invitation
In order to make drag and drop a bit more useful, we need to provide feedback to the user on whether or not a drop operation can successfully occur. This means that we’ll have to override the onDragEnter and onDragOut methods
Add these last two methods to the overrides object.
Hide code highlighting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Only called when the drag element is dragged over the a drop target with the same ddgrouponDragEnter : function(evtObj, targetElId){// Colorize the drag target if the drag node's parent is not the same as the drop targetif(targetElId != this.el.dom.parentNode.id){this.el.addClass('dropOK'); }else{// Remove the invitationthis.onDragOut(); }}, // Only called when element is dragged out of a dropzone with the same ddgrouponDragOut : function(evtObj, targetElId){this.el.removeClass('dropOK'); }

In the above code, we override the onDragEnter and onDragOut methods, both of which are only utilized when the drag element is interacting with a drop target participating in the same drag drop group.
The onDragEnter method is only called when the mouse cursor first intersects the boundaries of a drop target while a drag item is in drag mode. Likewise, onDragOut is called when the mouse cursor is first dragged outside the boundaries of the drop target while in drag mode.
5 Steps to Understanding Drag and Drop with Ext JS
Demo

By adding overrides to the onDragEnter and onDragOut methods we can see that the background of the drag element will turn green when the mouse cursor first intersects a valid drop target and will lose its green background when it leaves the drop target or is dropped. This completes our implementation of drag and drop with DOM elements.

It doesn’t stop here
Drag and drop can be applied to mostly everything in the Ext JS framework. Here are a few examples that you can use to learn how to implement drag and drop with various widgets:
Example of Drag and Drop
Second example of Drag and Drop

Summary
Today, we learned how to implement end to end drag and drop of DOM nodes using the first-level drag and drop implementation classes. From a high-level, we defined and discussed what drag and drop is and how to think about it in terms of the framework.
We also learned that the drag and drop classes can be grouped by drag or drop behaviors and whether or not they support single or multiple drag or drop operations. While implementing this behavior, we illustrated that the dd classes help make some of the behavioral decisions, and that we are responsible for coding the end-behaviors.
We hope you’ve enjoyed this thorough look at some fundamental drag and drop operations with DOM nodes. We look forward to bringing you more articles about this topic in the future.

Advertisements
By Reda Bouaichi Posted in ui, web

Using JAXB to generate XML from the Java, XSD


Reference

We can use JAXB to marshal the Java objects into XML using the given Schema and vice versa- unmarshal XML into Java objects. The xml schema can be specified in DTD, XSD or other format. The tool “xjc” is used to generate the annotated Java classes from the XSD schema. One can download the Java WSDP from here, it includes the JAXB implementation tools required. Here I will throw light on how to generate XML dynamically. Even I havent gone in depth with JAXB, but I found this really useful and thought of sharing it in the blog.

The sample XSD being used is: expense.xsd

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0"?></div>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="expenseReport" type="ExpenseT" />
<xs:complexType name="ExpenseT">
    <xs:sequence>
        <xs:element name="user" type="UserT"/>
        <xs:element name="items" type="ItemListT"/>
    </xs:sequence>
</xs:complexType>
<xs:complexType name="UserT">
    <xs:sequence>
        <xs:element name="userName" type="xs:string" />
    </xs:sequence>
</xs:complexType>
<xs:complexType name="ItemListT">
     <xs:sequence>
         <xs:element name="item" type="ItemT" maxOccurs="unbounded"/>
     </xs:sequence>
</xs:complexType>
<xs:complexType name="ItemT">
     <xs:sequence>
         <xs:element name="itemName" type="xs:string" />
         <xs:element name="purchasedOn" type="xs:string" />
         <xs:element name="amount" type="xs:decimal" />
     </xs:sequence>
</xs:complexType>
</xs:schema>

You can read about XSD here.

Now we use the xjc tool to generate corresponding Java classes. The generate java classes are annotated appropriately. Am not going into the annotation of the classes, cause it would make things complicated.

1
xjc.exe expense.xsd

By default the command generates the Java classes in a directory named “generated”. There are lot of options which can be used with xjc and one can have a look at using- xjc -help.

The below Main class- Main.java uses the generated classes for creating the XML.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package generated;
import javax.xml.bind.JAXBContext;
import javax.xml.bind.JAXBElement;
import javax.xml.bind.JAXBException;
import javax.xml.bind.Marshaller;
import java.math.BigDecimal;
public class Main
{
    public static void main(String[] args) throws JAXBException
    {
        ObjectFactory factory = new ObjectFactory();
        UserT user = factory.createUserT();
        user.setUserName("Sanaulla");
        ItemT item = factory.createItemT();
        item.setItemName("Seagate External HDD");
        item.setPurchasedOn("August 24, 2010");
        item.setAmount(new BigDecimal("6776.5"));
        ItemListT itemList = factory.createItemListT();
        itemList.getItem().add(item);
        ExpenseT expense = factory.createExpenseT();
        expense.setUser(user);
        expense.setItems(itemList);
        JAXBContext context = JAXBContext.newInstance("generated");
        JAXBElement<ExpenseT> element = factory.createExpenseReport(expense);
        Marshaller marshaller = context.createMarshaller();
        marshaller.setProperty("jaxb.formatted.output",Boolean.TRUE);
        marshaller.marshal(element,System.out);
    }
}

In the above XSD, we see that there are few complex types declared. These complex types generate in to Java classes. The child elements and attributes become the properties of the class and they are provided with the getters and setters. One cannot directly create the instance of such classes i.e cannot call new on them. When ever we compile a XSD, there is a ObjectFacotry class generated- this is the factory for creating the instances of the XSD Complex types (Lines-17,19, 24, 27 in the above Java class). Once we get the instance we populate the properties with corresponding data using the setters provided with the class. Also note that- A complex element can have many complex elements as the members of the class. In that case what happens we use the factory to get the instance of the complex elements and then use the setters of the outer complex element. For example: In the above XSD- ExpenseT is a complex type which consists of UserT and a list of ItemT (ItemListT). In the above Java class- Lines-27,28,29- am creating an instance of ExpenseT and then using the setters to set the values of the UserT and ItemListT. The RootElement- is created by calling createExpenseReport() for the factory. The name of the method is influenced by the name of the root element and the return type and the argument type of the method is same as that of the type of root element.

Once we have set the values for the different elements, attributes which are to go into the XML, its now time to actually generate the XML. We must have an Marshaller (To get XML from the Java objects) or an Unmarshaller (to get java objects from XML). We would need a Marshaller- which can be obtained from the JAXBContext instance. Lines- 31,32 obtain an instance of Marshaller. Different properties can be set for the marshaller and in the above code we are setting the jaxb.formatted.output as true- which means that the xml obtained is neatly formatted making is readable to the user.

Different properties supported are:

  • jaxb.encoding
  • jaxb.formatted.output
  • jaxb.schemaLocation
  • jaxb.noNamespaceSchemaLocation
  • jaxb.fragment

<instance_of_marshaller>.marshal() is the method used to generate the XML. Its is overloaded to accept the following output mechanisms:

  • org.xml.sax.ContentHandler
  • org.w3c.dom.Node
  • javax.xml.transform.Result
  • java.io.Writer
  • java.io.OutputStream
  • javax.xml.stream.XMLStreamWriter
  • javax.xml.stream.XMLEventWriter

The xml generated is shown below:

01
02
03
04
05
06
07
08
09
10
11
12
13
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
  <expenseReport>
    <user>
      <userName>Sanaulla</userName>
   </user>
   <items>
     <item>
       <itemName>Seagate External HDD</itemName>
       <purchasedOn>August 24, 2010</purchasedOn>
       <amount>6776.5</amount>
     </item>
   </items>
</expenseReport>

PS: I havent gone much into the details of JAXB. This is just the overview of how one can generate XML confirming to the schema.

JavaScript Regular expressions


Regular Expressions for client-side JavaScript

a free online quick reference by VisiBone
Regular Expressions (column 1 from a page of the JavaScript Card)
I hope you find these
excerpts of the VisiBone
JavaScript references
very useful.

See also the
JavaScript Card 
and Foldouts

Here is the syntax
for a very powerful
and very cryptic
string pattern
matching scheme
in the client-side
JavaScript of
web browsers.

You can use it to
validate form entry,
parse URLs, and
many other things.

The information here
forms a page of the 
JavaScript Card:
 JavaScript Card

and is one of the set
of three JavaScript 
Foldouts:
 JavaScript Regular Expressions Foldout (page 1)
 JavaScript Regular Expressions Foldout (pages 2-5)
 JavaScript Regular Expressions Foldout (pages 6-8)

Regular Expressions (column 2 from a page of the JavaScript Card)


Regular Expressions (column 3 from a page of the JavaScript Card)
Regular Expressions (column 4 from a page of the JavaScript Card)

VisiBone also makes
several printed web
color references.

Posters & Charts
Webmaster's Palette Color Wheel Poster

Laminated Cards
Color Card, laminated and slick for clients
that match the 
“VisiBone2”
swatch collection 
in Adobe
Illustrator and 
Photoshop.

Plus two varieties 
of Mouse Pads.

And a chart with 
1068
non-web-safe
colors:
Web Color KiloChart

Feedback welcome!

The fight gets technical: mobile apps vs. mobile sites | Econsultancy


http://econsultancy.com/us/blog/7832-the-fight-gets-technical-mobile-apps-vs-mobile-sites

The fight gets technical: mobile apps vs. mobile sites

Posted 28 July 2011 11:10am by Jake Hird with 7 comments

This article is the second in a series of extracts taken from Econsultancy’s new Internet Marketing Strategy Briefing. The free-to-download report covers the most important online trends in digital marketing that we are witnessing.

Topics covered within the document include customer centricity, channel diversification, data, social media and content strategy.

This extract, written by Econsultancy’s Research Manager, Aliya Zaidi, focuses on the more technical aspects in the continuing battle between mobile apps and mobile sites.

Channel diversification

Clearly the proliferation, and fragmentation, of customer touch points and channels, isn’t slowing down. We feel it is safe to say that 2011 is, indeed, finally the ‘year of mobile’, with both smartphone and tablet device usage fast growing.

However, ‘Connected TV’, which promises any brand ‘access to the living room’ via the TV, is looking to become a reality in 2012 in some countries with many brands building capabilities now.

Quite apart from the commercial and regulatory challenges, it is a big operational and technical challenge to deliver a joined up brand experience across all these interactive channels.

The end goal is likely to be a single web platform that can deliver device-specific, personalised, experiences across all these channels; shorter term expediency means ‘silos’, across people, process and technology, are being created in an attempt to ‘deliver something’ and learn in the process.

A key issue for companies is the mobile versus app debate, and whether there is an argument for producing a mobile application over a mobile site.

There are clear arguments for both applications and mobile sites. While some companies believe that mobile development priorities should be focused on either a mobile site or an application, the reality is that consumers are using both channels, so an integrated approach is the optimal solution.

The use of smartphones have proliferated in the last year, which means that there are far more opportunities to reach consumers via a mobile app.

According to Olswang, 22% of UK consumers already have a smartphone, with this percentage rising to 31% among 24-35 year olds. According to research from Gartner smartphone sales globally will reach 467m in 2011.

Smartphones are becoming increasingly sophisticated with a growing number of features, which means consumers are now engaging with brands via multiple channels on their phones.

It is important to distinguish which type of solution best suits the needs of the company. There are three types of mobile applications: native apps, web apps, and hybrid solutions.

Native apps are programmed using Objective C on the iPhone or using Java on Android devices.

  • Native apps make use of all the phone’s features, such as the mobile phone camera, geolocation, and the user’s address book.
  • Native apps do not need to be connected to the internet to be used.
  • A native app is specific to the mobile handset it is run on, since it uses the features of that specific handset.
  • Native apps can be distributed on the phone’s marketplace (e.g. Apple Store for iPhone or Ovi store for Nokia handsets).

Web apps run in the phone’s browser.

  • This means the app works across all devices, and ensures cross-platform compatibility.
  • The same base code can be used to support all devices, including iPhone and Android.
  • However, web apps do not make use of the phone’s other features, such as the camera or geolocation.
  • Web apps cannot be deployed to the phone’s marketplace.

Hybrid mobile apps are a mix between these two types of mobile applications.

  • Using a development framework, companies can develop cross-platform applications that use web technologies (such as HTML, JavaScript and CSS), while still accessing the phone’s features.
  • A hybrid app is a native app with embedded HTML.
  • Selected portions of the app are written using web technologies.
  • The web portions can be downloaded from the web, or packaged within the app.
  • This option allows companies to reap all the benefits of native apps while ensuring longevity associated with well-established web technologies.
  • The Facebook app is an example of a hybrid app; it is downloaded from the app store and has all the features of a native app, but requires updates from the web to function.

Advantages and disadvantages of native mobile applications

There is evidence to show that smartphone users are more affluent and have a higher disposable income. According to a study about smartphone users from Ask.com and Harris Interactive, the most affluent respondents in the survey were most likely to say they had downloaded an app.

Native apps also have better functionality. Because they use the features of the smartphones, such as the camera phone, the user’s address book, geolocation and augmented reality, companies can offer a richer, more immersive experience.

Native apps do not need necessarily to be connected to the internet to be used. Since they make use of the phone’s functionality, they can work in offline mode when there is no internet connection. However, some apps may require an internet connection, depending on functionality and available data.

In terms of distribution, native apps get good visibility with consumers because they are distributed through the phone manufacturer’s app store. This also means that they have an in-built revenue model, since consumers may have to pay to download the app.

The decision to create an application or not depends on the nature of the company and its products and services. If there are a significant proportion of customers using smartphones and mobile apps, then there is a case for investing in app development.

It is also important to consider which platform customers are mostly using. To maximise the number of consumers reached through an application, it is important to create an app for different mobile handsets, to ensure compatibility with the widest range of handsets.

The disadvantage of native mobile apps is that it can restrict the number of users that can be reached, if the app is not compatible with all handsets. It also requires additional development time as different apps need to be developed for each type of platform.

Third-party approval can also be another barrier. As the app will be distributed through the phone’s store, companies need to wait for approval before the app is released, and this can be a time-consuming process. In addition, if the app is not approved, there is usually little, if any feedback on why it was rejected.

Advantages of mobile web applications

The main advantage of a web app is that it is compatible across all platforms and devices. As the application runs in the browser, it is independent of the handset it is run on. This means that the web app has effectively more reach, and that only one app has to be designed for several handsets.

Web apps make use of existing web technologies, such as Java and CSS, which means the technical barriers to entry are low. Developers can use their existing skills to develop a web app, whereas native apps may require additional training given that the technologies are newer.

Companies can also make use of mobile search to allow their consumers to find the app. Native apps need to be downloaded in advance to be used, whereas web apps can be found and used simply through a search on the browser.

Because the app is not distributed through the phone’s store, no third-party approval is required before release. The site can be updated in real-time and changed without requiring sign-off by the mobile provider.

There is also some evidence to suggest that browser-based mobile applications will grow faster than the app market, which may bode well for a long-term strategy.

Which is the right approach?

To cover all bases, it is important to recognise that consumers are not using these channels in a mutually exclusive manner. They are using both native applications and browser-based apps, so the best strategy is to develop both types.

The decision to invest in an app or in a mobile website depends on the company’s target audience and the functionality of the app. Companies also need to consider time, budget and resources to develop each solution.

Native, web or hybrid mobile app development?


Source: Worklight

An inherent trade-off


Source: Worklight

Case study: The Financial Times vs. Apple

Another good example of a hybrid mobile app is the Financial Times mobile web application. Many publishers are unhappy that Apple plans to retain 30% of the revenue from the subscriptions sold on iTunes and to keep customer data from the sales.

To get around this, The Financial Times designed a new app that includes much of the functionality of an iPhone or iPad app, but can be deployed within the browser.

The web app uses the web technology standard, HTML5, which allows developers to create a single application that can be run on a variety of devices, while also making use of the benefits of native mobile apps.

Although the Financial Times uses both native mobile apps and web apps, the newspaper is encouraging its users to migrate to the new web app to circumvent Apple’s app store terms and conditions. Mobile customers currently make up 15% of the FT’s digital subscriber growth, and a large proportion of them are iPhone or iPad users.

While this is a risky strategy, publishers can collect 100% of their revenue via a web app, while 30% of the revenue generated through the native would be collected by Apple.

A key advantage of native apps is that they can be given a high profile within the app store. However, in the case of the FT, their brand is strong enough that users will remember to visit the website, and the FT may not need the extra exposure the app store provides. Employing a multichannel approach also means that the FT is not reliant on a single channel.

Jake Hird is a Senior Research Analyst for Econsultancy. Follow him on Twitter, connect with him on LinkedIn or see what he’s keeping an eye on via Retaggr.

By Reda Bouaichi Posted in Tech, web