1. Using Ext JS 6 for
Cross-Platform App
Development on Mobile Devices
Andrew Duncan
Founder & MD - SwarmOnline

2. Ext JS Essentials
2
Available to buy on:
Amazon Packt
Publishing
• Learn the Ext JS framework for developing rich
web applications
• Understand how the framework works under
the hood
• Explore the main tools and widgets of the
framework for use in your own applications

3. Swarm Culture
3
Innovative
Thinkers
Rapid Growth Enviable Client
List
Right Culture Enterprise
Experience
Be The Best
Provider

4. Client Experience

5. Global Tech Predictions, 2015 - 2020
5
42% 106bn 25% 20% 2m $201b
n
$6.3b
n
75%
of IT decision
makers
increase
spending on
cloud
computing
global software
as a service
market up 21
percent on
2015
of IT budgets
will be
deployed in
mobile and
tablet apps
of business
content will be
authored by
machines
employees will
be required to
wear health
and fitness
tracking
devices as a
condition of
employment
will be spent
on enterprise
apps, up from
$149.9 million
in 2015
estimated size
of the
enterprise
wearables, up
from $128
million in 2015
of
organisations
use advanced
analytics to
improve
decision
making

6. Digital Technologies Are Changing Businesses
6
Last 10 Years Next 10 Years
Email
Smartphones
Social Media
Web Browsers
Cloud Computing
Desktop Apps
Video
Conference Tools
Search
Cloud Computing and Storage
Tablets
Smartphones
Social Media
Mobile Apps
Web Collaboration
Tools
CMS
Wearable Tech

7. Thinking Like a Mobile Developer
Finger vs Mouse
A massive part of the transition to mobile development is the understanding of the user
interaction models and how they relate to browser events. Remember to always test
any complex interaction models with a physical platform - it is only then you can see
how they really react to events.

8. Thinking Like a Mobile Developer
Finger vs Mouse
Here are some of the most common gestures to keep in mind:
Touch End
Double Tap
(Double Click)
Tap (Click)
Swipe
Touch Start
Pinch

9. Thinking Like a Mobile Developer
Place yourself in your users shoes…
Remember mobile apps should be quick and
responsive!

10. Thinking Like a Mobile Developer
Data handling
• Reduce the amount of data being sent to the browser
• Reduce the data complexity - any time spent manipulating complex data will stop the
user being able to interact with the app
• Deeply nested and complicated data structures are highly discouraged

11. Thinking Like a Mobile Developer
Remember it’s a browser!
The mobile application you will be
developing is running in a browser and
therefore has limited power compared to
native mobile applications. Remembering
this will let you estimate realistic goals for
development.

12. Top 10 Mobile Development Considerations
Duncan’s Mobile Dev Law
Rapid
Prototyping
UI/UX Throw Away
Apps
Connectivity
Memory Capacity
& No.
Components
Consumer
Expectations
Screen Size Configurable &
Data Driven
Offline
Native v Hybrid

13. Mobile Development Considerations
Sencha is a great tool for rapid prototyping
• Great to show business users what they are getting before investing
• Saves rework down the line and improves specification
• Gives development team better chance of estimating correctly
Rapid Prototyping

14. Mobile Development Considerations
How we do it:
• Focus on getting components on screen
• Choose simple scenarios
• Consider using other tools such as Sketch and Prototype
• Pre-load stores with data
Rapid Prototyping

15. Mobile Development Considerations
Rapid Prototyping

16. Mobile Development Considerations
• User Interface focusses on a products look and functionality
• User Experience is the user journey
• A perfect UI does not necessarily mean there will be a good user
experience
• e.g. Google has a really good UI, but if it took 30 seconds to load search results
would be an example of poor UX
UI/UX

17. Mobile Development Considerations
Achieving good UI/UX
• Firstly be aware of UX factors when designing the UI
• Know your audience
• Use color appropriately
• Keep it simple
• Plan the user journey
UI/UX

18. Mobile Development Considerations
UI/UX

19. Mobile Development Considerations
Throw away apps are very useful in several ways
• Great for events or conferences that don’t last forever
• Low costs
• Users can delete the app from their phone
Throw Away Apps

20. Mobile Development Considerations
How to be successful with a throw away app
• They should be simple and have a clear purpose
• Less is more
• Make the app available prior to the event
Throw Away Apps

21. Mobile Development Considerations
We built an app for an ale festival
• The event’s lifetime lasted only 2 days
• Users would download this app on their phone before
or during the festival to vote each beer
• User could delete the app after the event had finished
Throw Away Apps

22. Mobile Development Considerations
Connectivity and Working Offline
Sencha can take full advantage of working offline
• Benefit to the user
• Don’t need to rely on a connection or data
• Boosts application performance
Connectivity is vital when app can’t be offline
• No way of accessing the app if connection lost
• A lot of apps require you to have an internet connection to interact with them

23. Mobile Development Considerations
Connectivity and Working Offline
Working offline is possible by using:
• HTML offline storage mediums
• localStorage and sessionStorage

24. Mobile Development Considerations
Connectivity and Working Offline
An app able to work offline using Ext JS called Proscient
Mobile
• Allows users to manage tasks, workflow and risk in heavy industry
• Crucial it has offline support as the user is in the field:
• on an oil platform
• rail companies underground who won’t be able to get a data connection

25. Mobile Development Considerations
Memory Capacity & No. of Components
iPhone 6
1GB
Samsung
S6
3GB
Average Laptop
4GB
vs vs

26. Mobile Development Considerations
Minimize the number of components to reduce capacity used
• The more components that are active, the more capacity will be used
• Call destroy method on a component
• Destroy method sets internal references to null
• Hint: Keep reference to important elements so they can easily be destroyed
Memory Capacity & No. of Components

27. Mobile Development Considerations
E-ON’s meter installation management app
• Switching tab destroys components of previous view
• Has a maximum of 6 form fields per page
• Events are triggered to render extra fields when required
Memory Capacity & No. of Components

28. Mobile Development Considerations
Consumer Expectations
What are these consumer expectations?
• Mobile apps and desktop apps are designed differently
• Ease of navigation
• Fast performance
• No major bugs

29. Mobile Development Considerations
Consumer Expectations
Meeting consumer expectations
• Avoid performance issues by keeping it lightweight
• Layout appropriately to make things easy to find
• Throw away what you don’t need
• Collect feedback on a consumers experience using the app

30. Mobile Development Considerations
Consumer Expectations
How we met consumer expectations
• By using a simple layout for the menu we achieved ease of use
• Keeps clutter to a minimum, with the menu taking up the full screen,
increasing performance
• Consumer survey carried out to make sure expectations were met

31. Mobile Development Considerations
Screen Size
Only compatible with one screen size could cause problems
• Limits the application to one device
• All potential users will have different devices
• Could affect the user experience
iPhone 6
1334x750
Retina iPad
1536x2048

32. Mobile Development Considerations
This is achieved by designing responsive applications:
• Components are not responsive by default to save on performance
• Use the responsive plugin on components
• Hint: Use the ‘responsiveCls’ config
Screen Size

33. Mobile Development Considerations
Responsive application we built:
Screen Size
iPhone iPad

34. Mobile Development Considerations
Configurable & Data Driven
Data-driven programming is where the data itself controls the flow of the app
• Analytics spell out what is working and what is not
• Can predict future problems before they become problems
• You can see the bigger picture

35. Mobile Development Considerations
Configurable & Data Driven
How this is achieved:
• Make views data bound
• Use configuration files
• Consider user interactions

36. Mobile Development Considerations
Configurable & Data Driven
Data-driven app for a company called AMT-Sybex:
• Users search for and review script results held on a server
• Configuration file was used to control the behaviour and look
• Config file can be extracted if local copy is not found

37. Mobile Development Considerations
Native
Native vs Hybrid
Hybrid
• Java, ObjectiveC
• Faster performance
• Access to hardware
• HTML5, JavaScript, CSS
• Cross-platform
• Access to hardware
through plugins
There may be times when using native more suits the needs of given requirements

38. Mobile Development Considerations
When building an app for a bank, they required:
Native vs Hybrid
• Smoother animations
• Native UI slick look
• Wasn’t dealing with complicated data

39. Overview of the Merge
Tools we would typically use
ChromeSencha Cmd Cordova PhoneGap

40. Overview
Sencha Architect
• Visual Sencha application creator
• Rich drag-and-drop UI builder
• Manage all parts of your app’s code
• Simple IDE built-in

41. Overview
Sencha Cmd
• Command line tools for generating, optimising, building and deploying Sencha apps
• Ant integration to allow custom build processes and CI integration
• Automates numerous tasks such as magnification and image-spiriting

42. Overview
Cordova/PhoneGap
• A hybrid app container platform
• Allows HTML5 apps to be submitted to native app stores
• Allows cross-platform distribution
• Enables access to native features through plugins
• Essentially opens our web app in a WebView browser

43. Overview
Cordova vs PhoneGap
• Started as PhoneGap in 2011.
• Bought by Adobe, who started Cordova as an Apache Foundation project.
• Cordova is open source platform and generally ahead of PhoneGap.
• PhoneGap is built upon Cordova but is enhanced by Adobe’s eco-system.
http://ionicframework.com/blog/what-is-cordova-phonegap

44. Overview
Chrome & Chrome Developer Tools
• Development and debugging environment
• We’re building a web application so Chrome provides a close approximation
of mobile devices
• Offers a huge number of tools for tweaking, debugging and optimising
applications

45. Overview
How do these tools fit together?
Generate New
Application
Build & Modify
Application
View & Debug
Application
Build & Deploy
Application
Create & Build
Relevant Native
Projects