Professional Documents
Culture Documents
2 01 4 G U I D E TO
MOBILE
DEVELOPMENT
TOOLS, STRATEGIES, AND INSIGHTS FOR
ACCELERATING MOBILE DEVELOPMENT
B R O U G H T TO YO U I N PA R T N E R S H I P W I T H
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 1
dzone.com/research/mobile
DZone Research Guides are published by DZone, 150 Preston Executive, Cary, NC 27513.
All contents © 2014 DZone. All rights reserved.
2 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
• The challenges of cross-platform mobile development and strategies for overcoming them
• The strengths and weaknesses of native, hybrid, and web-based approaches to mobile development
• Mobile development trends and preferences from a survey of more than 1,000 mobile professionals
• Feature comparisons between various Mobile Application Development Platforms (MADPs)
• Strategies for mobile user experience design and enterprise integration
Key Takeaways
A Web or Hybrid App is Becoming the Preferred Enterprise App
As enterprises start to build more B2E apps, they are likely to turn to web and hybrid apps, or use
MADPs that generate native apps from a common codebase. Our mobile development survey found
that the organizations building web and hybrid apps are making more enterprise apps than the overall
pool of respondents. The organizations that are exclusively focused on enterprise apps are also using
web technologies 15% more than Java, which is the second most common language for that group.
The lower cost of maintaining a single codebase is driving a surge of web and hybrid apps in the
enterprise world.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 3
dzone.com/research/mobile
K e y Re sea rc h F indings
DZone surveyed over 1,000 IT professionals with some involvement in mobile technology for the 2014 Guide to
Mobile Development, providing key information on mobile monetization, tool usage, production levels, and
platform prioritization. The largest demographic segments are developers (39%) and development team
leads (29%). 53% of respondents come from small organizations (under 100 employees) and 47% come
from large organizations (100 or more employees). The majority of respondents are headquartered in the
US (36%) or Europe (36%).
4 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
Cross-Platform Development and Testing are the Biggest Pain Points What are your organization’s pain points
The most common mobile development pain points for respondents centered
around multi-platform development and testing. Testing efficiently on many
for mobile application development?
different hardware sets and screen sizes is the biggest pain point for respondents
(53%), while building native apps for multiple platforms (50%) is a close second.
1 Testing on Multiple Devices
The third most common pain point is a lack of skilled mobile developers (40%). 2 Building Native Apps for Multiple
Respondents from large organizations were 10% more likely than those from
small organizations to experience pain points around integrating with existing Platforms
in-house apps, lack of skilled mobile developers, and security.
3 Lack of Skilled Mobile Developers
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 5
dzone.com/research/mobile
Mobile development has become a ubiquitous part of must be skilled with the required language, IDE, and development
tools for each targeted platform, and if developers with diverse
the software industry, and most developers understand skillsets are not available, additional developers must be hired. This
the central dilemma organizations face when building can be a serious problem, given the increasing push to develop on
multiple platforms. For example, according to DZone’s 2014 Mobile
a mobile app: cross-platform development. What
Developer Survey, 62% of respondents targeted both Android
options exist for deploying an app to multiple platforms and iOS. The economic constraints of native development are a
simultaneously? What are the strengths and weaknesses major factor in the growing popularity of web apps, hybrid apps,
code translators, and Mobile Application Development Platforms
of each platform? (MADPs), which allow developers to reach multiple platforms with
just one tooling ecosystem.
The backbone of mobile development is the native application,
but there are a growing number of alternatives: web apps provide
WEB APPS
a browser-based solution, hybrid apps leverage web development
The skillset for building a basic mobile web app is more common
skills in a native package, and code translators apply one platform’s
than that of native development. Essentially, mobile web apps are
native development skillset to the codebase of another. However,
just regular websites optimized to look good and function well on
the differences can be subtle, and every option carries its own set of
mobile devices, and they can provide a quality app-like experience
drawbacks.
if the developer is very skilled in web technologies. Widely
understood front-end web development languages such as HTML,
Native Development CSS, and JavaScript provide the logic behind a web app, and there
Native applications are built from the ground up for a specific are plenty of tools and libraries out there to help web developers
platform and tailored to fit it. The precise, platform-centered direct their skills toward mobile devices. jQuery Mobile and Sencha
nature of native development means that these apps have no Touch are two examples of mobile web frameworks that provide UI
limits in terms of access to APIs and device features, performance components and logic for sliders, swipes, and other touch-activated
optimization, and platform-specific best practices for user interface controls that are common to native mobile applications.
design. Ideally, every mobile app would be built this way: to suit its
exact purpose while utilizing all of the available resources. The community around open source web technologies is another
key difference between native and web development. Web
Native Application Development technologies like Node.js and AngularJS are some of the most
popular projects in the open source community according to
Android iOS Windows Phone
GitHub statistics [1]. This suggests that the community support and
Language: Java Language: Objective-C Language: C# knowledge base around web technologies is broader than native
Primary IDE: Eclipse or Primary IDE: XCode Primary IDE: Visual Studio technologies.
Android Studio
6 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
version of the browser. For iOS this view is called UIWebView, while Because UI development cannot be translated between platforms,
on Android it’s called WebView. This view can present the HTML code translators still require significant knowledge of the
and JavaScript files in a full-screen format, and pure web apps can native platform to write the UI. In other words, code translators
achieve this full-screen view as well. WebKit is the most commonly can provide substantial benefits in terms of cutting down
targeted browser rendering engine because it is used on iOS, development time, but they’re not necessarily a “write once, run
Where a web app really starts to become a hybrid app is when NO SILVER BULLETS
the app is placed inside of a native wrapper, which packages the Between native apps, web apps, hybrid apps, and the growing
hybrid app as a discrete application and makes it viable for app number of MADPs, there are a lot of options for mobile
store distribution. In addition to the native wrapper, a native bridge development. It’s important to note that there is no one solution
allows the app to communicate with device APIs, such as alarm that does everything. Some sacrifice affordability and accessibility
settings, accelerometers, and cameras. The native bridge is an for pure native performance, UI for easy cross-platform deployment,
abstraction layer that exposes the device APIs to the hybrid app as or ease of development for native authenticity. Even the simplest
a JavaScript API. This is one feature that clearly separates hybrid tools come with some degree of a learning curve. If a method with
and pure web apps, because web apps are unable to pass through no trade-offs existed, the industry would adopt it en masse, and you
the security structures between the browser and native device would know about it.
APIs. Access to many of the hardware features on mobile devices
makes hybrid apps feel more like native apps than web apps from Because there are trade-offs, developers and decision-makers will
the user perspective. have to recognize their needs, and the needs of their users, in order
to determine the best way to approach mobile development.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 7
ANYTIME, ANYWHERE
ACCESS.
Close the App Gap. Create powerful
data-driven mobile & web apps with
minimal coding.
Visit www.progress.com/dzonemobile
and take a trial today.
© 2014 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
2014 GUIDE TO MOBILE DEVELOPMENT
CATEGORY Rapidly develop & deploy business apps using the mobile, data integration, self‑service, and collaboration
MADP capabilities of Progress Pacific.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 9
dzone.com/research/mobile
Native vs. Web vs . Hybrid: 7 Factors of Comparison KEY CON PRO NEUTRAL
Code Reusability/ Code for one platform only works for that Most hybrid tools will enable portability of a Browser compatibility and performance are the
Portability platform single codebase to the major mobile platforms only concerns
Many device APIs closed to web apps can be Only a few device APIs like geolocation can be
Device Access Platform SDK enables access to all device APIs
accessed, depending on the tool accessed, but the number is growing
App stores provide marketing benefits, but also App stores provide marketing benefits, but also No restrictions to launch, but there are no app
Distribution
have requirements and restrictions have requirements and restrictions store benefits
Native code has direct access to platform For complex apps, the abstraction layers often Performance is based on browser and network
Performance
functionality, resulting in better performance prevent native-like performance connection
More monetization opportunities, but stores More monetization opportunities, but stores No store commissions or setup costs, but there
Monetization
take a percentage take a percentage are few monetization methods
10 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
you build an original UI for web apps, rather than trying to recreate an app-like experience, whether it’s through native or hybrid code, is
the native UI and having your app look “wrong” to users [2]. the preferred mode of consumer interaction.
SEO If that’s not enough evidence, you just need to look at the most
This may not be the fairest criterion for native applications, but if you popular mobile apps right now and you’ll find that most of them are
want the textual and semantic content of your app to be found and native. Facebook and LinkedIn both tried to build hybrid apps for
ranked by search engines, your app has to have a web component. A accessing their websites, but they found that the experience and
web component is required because apps are closed environments, performance weren’t up to their standards, so they built native apps
and search engines cannot access that information. for all of the major platforms [5]. However, those companies can
certainly afford to have many developers with the skillsets to build on
Distribution those platforms.
With app stores, native and hybrid apps are able to harness marketing
tools such as rankings and featured placement all in a well-maintained An area where
system. Web apps, by contrast, don’t have to fulfill any app store web and hybrid
requirements, and they are accessible through any compatible
The choice between native, app development
browser. The disadvantages for native and hybrid apps are the is becoming more
app store requirements and content restrictions. For web apps, the web, or hybrid is dependent common is in the
downsides are that you don’t get the marketing benefits of an app enterprise. The need
store. Web apps also have to be manually bookmarked if the user on a number of factors, for business-to-
wants a shortcut on their homescreen. employee apps (B2E)
including business is expected to grow
Performance exponentially over the
Native code will always be the most straightforward path to the
needs, app requirements, next few years, and
snappiest performance. Hybrid app performance can be strong, most companies will
developer skill, and
but will sometimes suffer depending on how the tools build code to not want to build and
interface with the native OS. Web apps can have strong performance development timelines. maintain two or more
as well, if you have skilled web developers and use modern standards codebases for every
like appcache. Web and hybrid performance will also improve as app. Another option
mobile browsers get faster JavaScript engines. Other things that for these enterprises is
can help mobile web performance include using WebKit’s overflow using MADPs, which were described in the introduction. The expected
scrolling to create scrolling divs, using tools like FastClick to speed up growth of B2E apps has led some analysts to recommend choosing
hyperlinks, and only animating GPU-accelerated properties [3]. hybrid apps or MADPs for large scale internal app development, while
building native apps for external customers with high performance
Deployment/Updates expectations [6]. Web apps tend to be recommended if the
If app updates aren’t automatic, they can be a real annoyance to organization needs to circumvent app stores, build an e-commerce
the user. A huge advantage for web apps is that you can deploy storefront that is searchable on the web, or create a marketing site
them like any other desktop website. Hybrid apps can make some that is also easily searchable and accessible through the web.
updates through the web without app store approval, but hybrid apps
and native apps still have to jump through the hoops of app store The point of this exploration is not to pick a winner, but to know the
approval, and they need to download any updates from the app store. strengths and weakness of each application type. The choice between
native, web, or hybrid is dependent on a number of factors, including
Monetization business needs, app requirements, developer skill, and development
For web apps, you can make money through advertisements, timelines. All potential types should be explored and evaluated before
subscriptions, or an app store for web apps, though the vast majority implementing a mobile strategy.
of app downloads still happen in the native platform stores. Native
[1] http://mobilehtml5.org/
and hybrid apps have more options for monetization, including in-app [2] http://blog.forecast.io itsnotawebappitsanappyouinstallfromtheweb/
purchases, platform-native ads, and the app purchase itself. However, [3] https://github.com/ftlabs/fastclick
to be in the high-profile native app stores, you need to hand over a [4] http://blog.flurry.com/bid/109749/AppsSolidifyLeadershipSixYearsintotheMobileRevolution
[5]https://www.facebook.com/notes/facebookengineering/
percentage of your app download revenue to the company that owns
underthehoodrebuildingfacebookforios/10151036091753920
the store (usually around 30%). There is also an initial fee to develop [6]http://www.techtimetea.com/trendsenterprisemobility2014/
for the platform and deploy on the app store.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 11
2014 GUIDE TO MOBILE DEVELOPMENT
CATEGORY OutSystems Platform empowers developers to create, deploy, and manage amazing mobile and web applications
MADP more efficiently with current skills.
STRENGTHS DESCRIPTION
TAGS ‑JavaScript‑ ‑Java‑ ‑IDE‑
• Create once for all devices utilizing responsive web design OutSystems provides an open, high-productivity
‑Version Mgmt‑‑ ‑Usage Analytics‑ • True no lock-in: customers can detach on to industry-standard
PaaS that allows users to create, deploy, and manage
enterprise mobile and web apps with integration into
Rest + Soap‑‑ ‑hosted‑ application stacks with open Java or C# code; no proprietary
existing systems. OutSystems includes Continuous
runtime
Delivery facilities to deploy and manage those apps
• Can use flexible deployment scenarios from on‑premises to after release, including lifecycle governance and
TARGETS public, private , or hybrid cloud integrated UX monitoring.
Web • Allows creation of more complex systems, including those using
large volumes of data and non‑trivial workflows
Hybrid
• Not just for building single‑function apps
Native
NOTABLE CUSTOMERS
Free Trial Free version for individual • Liberty Insurance • FICO • Warner Brothers
users, no ALM or staging capabilities
• PlayRight • Bacardi • Charles River Laboratories
USES
• Enterprise Apps (for internal use) CUSTOMER SUCCESS STORY
Liberty Seguros is a leading insurance company and part of the Boston‑based Liberty Mutual Group ‑ a global insurer and
sixth largest property and casualty company in the United States. Liberty’s vision was to connect every single department
and external partner through an end‑to‑end solution that placed the customer at the core of operations and analytics. The
FULL PROFILE LINK single information system would streamline collaboration with external partners such as agents, repair shops, customers, and
more. Liberty is a great example of what long‑term use of OutSystems Platform can produce. Fast forward 10 years and Liberty
dzone.com/r/ GMRL Connect is a mature collaborative platform with customers at its core. It allows every area of the company, including external
partners, to interact in real time, and that has made it possible for Liberty to completely sustain its business without losing the
Additional information in the vendor profile section of the guide
ability to offer customer‑centric services.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 13
dzone.com/research/mobile
B ac k- en d I nt e g rat i o n :
A Major Headache for Enterprise Mobility
by Suhas Uliyar
A few months back, I was asked to talk about my job are finding it difficult to meet new expectations for project
timelines.
in front of a class of 8th graders during a local school’s
Additionally, it is rare for customers to say that they need a
career day event. To simplify things, I told the class mobile app in the next 12 to 18 months. Most customers expect
that I build mobile applications for companies. I applications to be delivered in a few days or weeks. Customers
and even development professionals often underestimate how
explained that the apps I create are like the apps that difficult it is to build, connect, secure, deploy, and manage a
you find on the app store, except they are built for mobile app.
businesses. One of the students raised her hand and The reason for this is because writing a standalone client
app and posting it to the app store isn’t the difficult part.
said that she had built an iPhone app in two weeks! The difficult part, especially for the enterprise, is making that
application talk effectively to back-end enterprise systems. It is
That’s right, 8th graders are now building iPhone apps, and
also about securing the data accessed by the app as it connects
one of them was asking me what was so tough about my job?
to the back-end systems. To do that, developers must devise
Upon reflection, I realized that over the last 15 years of building
ways to extract critical information from back-end applications
mobile apps, we have come a long way from the time when
and data repositories, while also delivering output optimized for
it used to take developers months or sometimes more than a
mobile devices.
year to build one app. You would need highly skilled mobile
application developers for Windows Mobile, Symbian, or
Hard Decisions
Blackberry, but now even kids can build iOS and Android apps.
Mobile development also forces hard decisions about what
features to include from the backend. Mobile is not about
There does seem to be an app for everything these days, but
putting wheels on the system of record (SOR) and calling it
the one area over the last decade that remains a complex
mobile. Mobile apps must be designed with context in mind and
and costly endeavor is integrating the mobile facing client
with the supporting data source(s) to deliver the context. In
application with enterprise systems. Integration comes with
the past, mobile applications were mostly integrated to one on-
challenges that include adherence to IT security policies for
premise back-end application. Today, enterprises are beginning
Single Sign-On (SSO), integrating with one or more back-end
to deploy a distributed application environment with the core
applications, complying with data encryption policies, and
applications remaining on-premise and others being moved to
other obstacles that still exist after a decade of unprecedented
the cloud (sales, HCM, etc.). In addition, there are other public
technological progress.
cloud services, such as geolocation, payment, social networking,
collaboration, and messaging, that drive additional context for
Today, there are many frameworks and tools that help
the user when integrated with mobile applications.
mobile client developers build native, web, or hybrid mobile
applications. However, there are fewer tools that make your
These “mashups” deliver a final challenge to IT, which is that
life just as easy when integrating the client facing application
these applications must scale reliably with enterprise-grade
with enterprise systems. I wonder what the 8th grader’s
performance. Many enterprises have not faced this challenge
response would have been if I had asked her to authenticate
because they have only dealt with the tactical deployment of
her application via SSO and integrate it with an enterprise
one or two mobile apps.
application for data?
14 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
putting wheels on the user stores (LDAP, AD). mobile applications, middleware, and tools. Suhas
is responsible for driving Oracle’s mobile strategy
It is critical to have a
and vision. He is a seasoned executive with years of
system of record and middleware architecture technical and business management experience in
that brings together enterprise software. He has a successful track record
calling it mobile. an integrated identity as both an entrepreneur in small start-ups and as
an executive with major industry leaders. Suhas
management solution and
has held leadership positions with SAP, Motorola
an integration architecture Solutions, Spring Wireless, Dexterra (Antenna
that exposes services Software), and Micromuse (IBM).
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 15
A Different Kind
of Hybrid
HTML5 Development
Access Native Features
Cross-platform Support
No Native Code
No App Store Submissions
No New Tools
www.bridgeit.mobi
2014 GUIDE TO MOBILE DEVELOPMENT
but BridgeIt
powerful new features of
BridgeIt apps are pure web HTML5/CSS3.
WR I T T E N B Y
apps. The BridgeIt utility eliminates this
Steve Maryka
requirement
augments the standard mobile No bundling is required
browser with native features with BridgeIt, and the CTO, ICEsoft
accessible directly from the and opens new web app leverages Technologies
best-in-class browser
possibilities.
web app. Web deployment
eliminates external approvals, capabilities. The BridgeIt
CATEGORY
ICEmobile is an easy and cost‑effective way to mobilize Java EE web applications. Go beyond HTML5.
MADP
STRENGTHS DESCRIPTION
TAGS ‑JavaScript‑ ‑Java‑ \
• Automated device theming enables a single web application to ICEmobile is a framework for developing
‑On‑Premise‑ ‑Mobile Middleware‑‑ adopt the look of the native mobile device it is viewed from cross‑platform mobile web applications with Java
EE and JSF. ICEmobile supports hybrid application
‑IDE‑ • Extends the ICEfaces Ajax Push capabilities with Cloud
development with the ICEmobile containers and
Push, leveraging native platform push capabilities to deliver
integrates with the BridgeIt utility application.
notifications even when the application is not active
TARGETS
• Extends the ICEfaces framework with a suite of mobile controls
Web for UI development
Hybrid
Native
NOTABLE CUSTOMERS
Free Trial Open source version • Aetna • U.S. Steel • Thermo Fisher Scientific
available
• FedEx • BNSF • US Government
USES
• Enterprise Apps (for internal use) CUSTOMER SUCCESS STORY
A large parcel delivery company had a legacy application running on Java EE infrastructure, and was accessed by employees
using desktop browsers. Evolving business demands required the functionality be extended to include external users/
customers accessing the application via tablets and smart phones. Development and support costs associated with native
FULL PROFILE LINK mobile development were unacceptable, and app store publication was undesirable. ICEmobile enabled them to leverage
legacy software investments and easily extend their existing desktop application into the mobile space. ICEmobile’s suite
dzone.com/r/ hkyX of mobile JSF components simplified the application design, and minimized development and support costs. Additionally,
ICEmobile’s push and hybrid capabilities future proofed their product roadmap.
Additional information in the vendor profile section of the guide
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 17
2014 GUIDE TO MOBILE DEVELOPMENT
CATEGORY A modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and
MADP native apps.
STRENGTHS DESCRIPTION
TAGS ‑Hosted‑ ‑Mobile
• Includes a comprehensive mobile UI library Telerik Platform is a cross‑platform solution that
Middleware‑ ‑IDE‑ ‑Version Mgmt‑‑ includes UI libraries for web, hybrid, and native
• Supports all three development approaches: web, hybrid, and
development as well as a suite of integrated cloud
‑Usage Analytics‑ native
services. It addresses the entire lifecycle of the app,
• Integrates with Apache Cordova and integrates with any development environment.
TARGETS • Addresses the entire lifecycle of the project (from design to
deployment)
Web
• Modular platform that can be integrated with other tools and
Hybrid services
Native
NOTABLE CUSTOMERS
Free Trial 30‑day free trial • Paylocity • Ernst and Young • HP
• Verizon • Symantec • Microsoft
USES
• Consumer Apps CUSTOMER SUCCESS STORY
• Enterprise Apps (for internal use) With a focus on technology and service, Paylocity is constantly striving to offer the latest tools and solutions to make payroll and
HR processes easier. With the shift to a mobile‑focused world, the company recognized the need for a mobile app that would
enable their ESS users to view and make changes to their accounts via any mobile device. With Telerik Platform, Paylocity was
FULL PROFILE LINK able to create a secure cross‑platform mobile app to serve its client‑base of over 7000 organizations in less than 6 months.
dzone.com/r/ PLMa
Additional information in the vendor profile section of the guide
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 21
dzone.com/research/mobile
Performance is critical when you are building apps interface that doesn’t acknowledge the user input, then there is
no way for the user to know that the input has been received.
for mobile devices. When using a device that is built Regardless of whether or not this app is actually slow, the user
for accomplishing tasks quickly and on the go, like a will perceive the app as being slow or buggy simply because
there is nothing to let the user know that their input has been
smartphone, performance is an even bigger concern
received and that the app is preparing a response.
than on desktops. Being users ourselves, we all
understand this, but we also understand that users can’t Loading Animations
After you’ve tapped a button, does your app let the user know
see an app’s network timelines or latency scores. The
that something is happening, or does the UI simply lock up until
user’s perception of application performance depends the next piece of data is ready? If it’s possible (and in most cases,
upon aesthetic design, feedback to the user, speed of it is), you should never lock up the user interface thread while
you are requesting data from a remote source. This is a major red
information, and much more. All they see is the user
flag and users will immediately notice when the entire application
experience you have crafted for them, so even if your locks up and becomes unresponsive.
performance metrics are great, your apps can still feel
A better way of handling this would be to request data in a
slow if you don’t employ the right techniques in your background thread (so it does not lock up the UI) and present
code. In many ways, perceived performance is more the user with some sort of visual cue that an action is being
important than actual performance. In this article, we’re performed. By handling data in a background thread, the app
stays responsive and never feels like it’s freezing up. If you’re
going to focus on the user’s perception of performance. building a hybrid or mobile web app, don’t worry; the browser’s
XMLHttpRequest won’t lock up your webview’s UI, so this is less
Let’s first examine two major use cases for mobile apps: accessing
of an issue.
information on the go, and entertainment. If you are accessing
information on the go, there is a good chance you are in a hurry
Rather than just making your user wait until data is available
or you’re on a limited-speed connection. You need the app to
before changing views, you can change the user perception
give you the information you need as fast as possible. In the
and trick them into feeling that the app is faster by providing
case of entertainment, you just need the app to provide fluid
some sort of feedback. It could be as simple as a spinner or a
interaction. In this case, performance is part of the entertainment
progress bar, however, these have also been known to draw the
factor. In both of these cases, the app’s performance is not simply
user’s attention to the fact that they are waiting. Alternatively,
characterized by how fast the app is processing information
you could create a loading view animation that slowly removes
behind the scenes. Rather, this extends into the app’s design and
the previous page’s data or shows pieces of the new data as it is
system architecture.
loaded. Overall, you want to have some way of entertaining and
distracting the user while they wait. By engaging the user with
Instant Feedback animation, you are changing the perceived performance and user
The most immediate factor of an app’s performance actually experience of the application, even if the loading time does not
has nothing to do with raw processing power. User feedback, or actually change.
some sort of response to user input, is probably the most critical
factor to having an app that seems to perform well. If you touch a
Familiar Native Physics and Gestures
button, that button should immediately provide feedback to the
Buttons and animations are great for any form factor, but the
user. If you swipe across the screen to drag an object, that object
features that make mobile so convenient and elegant to use
should follow the user’s touch immediately.
have always been the touch controls. There is a common set of
interface physics and gestures that all popular mobile platforms
Most native components will handle user feedback (ie: button
share, including momentum scrolling, side swipes, pull-to-refresh,
states) for you. However, if you are building a mobile web or
and multi-touch zooming controls.
hybrid application, it is extremely important that you build in
some sort of user feedback to inform your users that their input
It’s important for app designers to harness these mobile-specific
has been received and you are performing some sort of action.
controls wherever they can, and they need to be snappy.
The button press case is extremely basic, but if you have a user
Natively built apps don’t have too many issues with these built-in
22 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
controls, but web and hybrid apps can have issues recreating this You start uploading that image before the user has actually said
functionality. Luckily, there are tools and CSS controls that can help. they’d like to upload the image. The user then enters a name and
description, and by the time the user hits the upload button the
For implementing momentum scrolling, you can use the overflow- image is already uploaded. Then, when the user does hit upload,
scrolling: touch property on the container and then write some they will be amazed at how quickly the upload took place. This
JavaScript that only applies that class if the container is visible. The is exactly what Instagram does in their app, and it is part of what
JavaScript is necessary because that CSS property disables the set Instagram apart from their competition early on. Preemption
tap-the-top feature of mobile browsers that commonly sends you doesn’t work in every scenario. You don’t want to aggressively load
back to the top of the page. For implementing gestures like pull-to- data that may never be necessary, but it can work extremely well in
refresh and zooming controls, there are plenty of great JavaScript the cases where it does fit.
libraries that can help, such as Hook.js and Hammer.js.
All Decisions Must Consider UX
Harness the GPU In a nutshell, perceived performance is really all about
In many cases, you’ll use animations in your mobile apps, especially understanding how the user experiences UI performance, not the
in the loading instances mentioned above, but how do you make actual performance metrics. You need to consider how the end
sure those animations are fluid and snappy? Obviously, stuttering user is going to be impacted by every technical and architectural
or choppy animations can be very problematic. They give the decision that you make. If there is ever a situation where the user
user the feeling that the app is slow and buggy. This is one of the needs to wait, then give them feedback to let them know that the
major issues that people often complain about with HTML-based app is still working. Request data during an animation sequence,
applications. In native applications, this is less of an issue unless or play animations while the app is doing something else in the
you are doing something extremely complicated. Generally, native background. Preempt data loading if you can. If you can’t, then
animations are fast and smooth. you might want to consider lazy-loading your data. If you’re
Another technique that you can use to make your application feel
extremely fast is to preempt user actions before the user performs them.
This is exactly what Instagram does in their app, and it is part of what set
Instagram apart from their competition early on.
In HTML applications there are ways to make the app feel faster and building a web app, let the GPU handle the UI in any way possible.
make animations smoother. Avoiding computationally-expensive Regardless of the interaction, it is critical to develop your apps in a
browser reflow operations is critical for making fluid animations. fashion that tailors the experience to the user’s delight.transitions
Browser reflow operations occur when your content’s size changes, or animations with the transform:translate3d (x,y,z) style. This style
or the position of your content changes, causing it to impact the forces rendering of your DOM content on the GPU and can also
layout of neighboring DOM elements. If you change width, height, be used to move or animate your content without triggering those
or top/bottom/left/right styles of a DOM element, this will trigger expensive browser reflow operations. This technique can be used
browser reflow operations. to achieve solid 5060 frames per second animations in mobile web
experiences. However, it is also important to make sure that the
If you want to animate your content in HTML, you can use CSS DOM elements you are animating don’t exceed the GPU maximum
transitions or animations with the transform:translate3d (x,y,z) texture size. Otherwise, you could end up with an annoying flicker in
style. This style forces rendering of your DOM content on the GPU your animations, which completely ruins the user experience.
and can also be used to move or animate your content without
triggering those expensive browser reflow operations. This
technique can be used to achieve solid 50-60 frames per second
animations in mobile web experiences. However, it is also important
WRITTEN BY
to make sure that the DOM elements you are animating don’t
exceed the GPU maximum texture size. Otherwise, you could end Andrew Trice
up with an annoying flicker in your animations, which completely Andrew Trice is a Technical Evangelist with Adobe Systems.
ruins the user experience. He has more than a decade of experience designing,
implementing, and delivering rich applications for the
web, desktop, and mobile devices. He is an experienced
Preemptive Performance architect, team leader, accomplished speaker, and
Another technique that you can use to make your application feel published author, specializing in object-oriented
extremely fast is to preempt user actions before the user performs principles, mobile development, real-time data systems,
GIS, and data visualization.
them. For example, let’s say you capture an image with your app.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 23
dzone.com/research/mobile
the Step-by-step
Mobile Application Development Checklist
FF Identify the team members and stakeholders for this project along FF Harness user simulation scripts and load testing tools to test user
with their responsibilities. and business requirements in high traffic conditions.
FF Determine who will support the app when it’s finished. FF Log and visualize all appropriate data for easy pinpointing of
problematic code.
FF Collaborate with team members to build a structured and
repeatable project calendar. FF Ensure that your app meets the requirements for any target app
stores.
FF Construct a marketing strategy in parallel with app development.
Execute pre-release marketing. FF Conduct private beta testing with all of your employees (not just IT).
FF Conduct beta tests with real-world users. Try giving out gift cards at
a coffee shop to recruit testers.
Enterprise App Planning
FF Ask employees what they would like to have in a mobile app.
Launch
FF Identify processes that could be handled more efficiently with a
mobile app. FF Determine a build and deployment process that lets you deploy
updates early and often.
FF Identify data that could be monitored more often with a mobile
app. FF Complete the tasks necessary for deployment to your target app
stores.
FF Find out which systems mobile workers need to access frequently
(e.g. internal web portals). FF For non-app store distribution, prepare an app server for wireless
distribution.
FF Ensure your enterprise mobile systems have fast data access using
authorized methods. FF Follow any platform requirements for non-app store distribution.
FF Execute your marketing plans for launch.
FF Monitor app performance and track new software bugs.
Design and Development FF Collect data on real-world usage and monitor feedback from
FF Harness design and development tools that will make your team customers.
as efficient and effective as possible. FF Continue to improve the app according to a roadmap based on
FF Compile a list of objects and actions for the application and their customer behavior.
relation to each other.
24 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT MA D P
In this section of the guide you will find profiles of the most
TAGS ‑JavaScript‑ ‑Java‑ ‑Objective‑C‑ ‑C#‑‑ ‑Mobile Middleware‑
promising mobile development platforms and frameworks
to help you develop mobile apps more efficiently. Targets Strengths
• Allows developers to remotely build apps in the
Web cloud using PhoneGap Build
Hybrid • Can instantly update apps without recompiling
To view an extended profile of any product, you can use
Native • Features an App Store for building apps
the short-code link found at the bottom of each profile, or without installing separate SDKs
• Hundreds of plugins are available for accessing
SYSTEMS
simply go to dzone.com/research/mobile and enter in the native device APIs
• Cordova/Phonegap
shortcode at the end of the link. • Android
• iOS
• Windows Phone
• BlackBerry
TAGS ‑JavaScript‑ ‑On‑Premise‑ ‑Hosted‑ ‑Mobile Middleware‑‑ ‑IDE‑ TAGS ‑JavaScript‑ ‑Mobile Middleware‑ ‑REST + SOAP‑ ‑IDE‑‑ ‑OAuth2‑
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 25
dzone.com/research/mobile
MA D P
TAGS ‑JavaScript‑ ‑On‑Premise‑ ‑OAuth2‑ ‑Drag‑n‑Drop‑‑ TAGS ‑JavaScript‑ ‑Java‑ ‑Bug Tracking‑ ‑Hosted‑‑ ‑On‑Premise‑
26 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT MA D P
TAGS ‑JavaScript‑ ‑Java‑ ‑C#‑ ‑IDE‑‑ ‑Version Mgmt‑ TAGS ‑C#‑ ‑On‑Premise‑ ‑Drag‑n‑Drop‑
TAGS ‑C/C++‑ ‑On‑Premise‑ ‑Mobile Middleware‑ ‑IDE‑‑ ‑Usage Analytics‑ TAGS ‑Hosted‑ ‑On‑Premise‑ ‑Mobile Middleware‑ ‑REST + SOAP‑‑
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 27
dzone.com/research/mobile
MA D P
TAGS ‑JavaScript‑ ‑Java‑ ‑On‑Premise‑ ‑Mobile Middleware‑‑ ‑IDE‑ TAGS ‑C#‑ ‑Hosted‑ ‑On‑Premise‑ ‑REST‑‑ ‑OAuth2‑
TAGS ‑JavaScript‑ ‑Java‑ ‑Objective‑C‑ ‑C#‑‑ ‑IDE‑ TAGS ‑JavaScript‑ ‑On‑Premise‑ ‑IDE‑ ‑REST‑‑ ‑SOAP‑
28 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT MA D P
TAGS ‑JavaScript‑ ‑Java‑ ‑Objective‑C‑ ‑REST + SOAP‑‑ TAGS ‑JavaScript‑ ‑Hosted‑ ‑On‑Premise‑ ‑Mobile Middleware‑‑ ‑IDE‑
TAGS ‑On‑Premise‑ ‑Mobile Middleware‑ ‑IDE‑ ‑Version Mgmt‑‑ TAGS ‑JavaScript‑ ‑Java‑ ‑Mobile Middleware‑ ‑IDE‑‑ ‑Version Mgmt‑
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 29
dzone.com/research/mobile
MA D P
30 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT MA D P
TAGS ‑Hosted‑ ‑IDE‑ ‑Version Mgmt‑ ‑IDE‑‑ ‑REST + SOAP‑ ‑sso TAGS ‑Hosted‑ ‑On‑Premise‑ ‑Mobile Middleware‑ ‑IDE‑‑ ‑SSO‑
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 31
dzone.com/research/mobile
MA D P
TAGS ‑JavaScript‑ ‑On‑Premise‑ ‑SSO‑ ‑REST + SOAP‑‑ ‑Drag‑n‑Drop‑ TAGS ‑JavaScript‑ ‑On‑Premise‑ ‑IDE‑ ‑REST + SOAP‑‑ ‑Drag‑n‑Drop‑
TAGS ‑Hosted‑ ‑Mobile Middleware‑ ‑IDE‑ ‑Version Mgmt‑‑ TAGS ‑Hosted‑ ‑On‑Premise‑ ‑Mobile Middleware‑ ‑REST + SOAP‑‑
‑Usage Analytics‑ ‑OAuth2‑
32 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT MADP & FRAMEWORKS
TAGS ‑JavaScript‑ ‑Hosted‑ ‑On‑Premise‑ ‑REST‑‑ TAGS ‑Hosted‑ ‑On‑Premise‑ ‑IDE‑ ‑REST + SOAP‑‑ ‑OAuth2‑
CATeGORY MADP TWITTER @xamarinhq CATeGORY Mobile Web Framework TWITTER @kendoui
USES Layout Style
FREE TRIAL 30‑day free trial, but cannot ship apps FREE TRIAL Open source solution
• Consumer Apps App‑centric (navigation, layouts,
workflow, trying to be like a
• Enterprise Apps (for
internal use) FULL PROFILE LINK native app) FULL PROFILE LINK
dzone.com/r/ UWJf dzone.com/r/ 9Gzr
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 33
dzone.com/research/mobile
F RA ME WORK S
CATeGORY Mobile Web Framework TWITTER @senchatouch CATeGORY Mobile Web Framework TWITTER @dojo
Layout Style Layout Style
App‑centric (navigation, layouts, FREE TRIAL 30‑day free trial App‑centric (navigation, layouts, FREE TRIAL Open source solution
CATeGORY Mobile Web Framework TWITTER @jquerymobile CATeGORY Mobile Web Framework TWITTER @ionicframework
Layout Style Layout Style
Content‑centric (flat content, FREE TRIAL Open source solution App‑centric (navigation, layouts, FREE TRIAL Open source solution
34 2 01 4 G U I D E TO M O B I L E D E V E LO P M E N T
2014 GUIDE TO MOBILE DEVELOPMENT
Glossary of Terms
A Hybrid App - A mobile application written P
in HTML, CSS, and JavaScript that uses a
Accelerometer - A sensor that measures web-to-native abstraction layer, allowing the Push Notifications - Short messages
the acceleration (change in speed) of an application to access mobile device APIs that that mobile applications can send to users
object. pure web applications cannot access. even if the application isn’t open.
dzone.com/research/mobile
| dzone.com
| research@dzone.com
| (919) 678-0300 35
Slow mobile apps
can kill your business.
New Relic Mobile is a SaaS performance
tool that gives you code-level visibility
into your mobile software so you can
pinpoint problems and solve issues
before they affect your users.