SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - Andrew Duncan

Using Ext JS 6 for Cross-Platform App

Development on Mobile Devices

Andrew DuncanFounder & MD - SwarmOnline

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

Swarm Culture

3

Innovative Thinkers Rapid Growth Enviable Client List

Right Culture Enterprise Experience Be The Best Provider

Client Experience

Global Tech Predictions, 2015 - 2020

5

42% 106bn 25% 20% 2m $201bn $6.3bn 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

Digital Technologies Are Changing Businesses

6

Last 10 Years Next 10 Years

Email

Smartphones

Social Media

Web Browsers

Cloud Computing

Desktop Apps

VideoConference Tools

Search

Cloud Computing and Storage

Tablets

Smartphones

Social Media

Mobile Apps

Web Collaboration Tools

CMS

Wearable Tech

Thinking Like a Mobile DeveloperFinger 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.

Thinking Like a Mobile DeveloperFinger vs MouseHere are some of the most common gestures to keep in mind:

Touch End

Double Tap(Double Click)

Tap (Click)

Swipe

Touch Start

Pinch

Thinking Like a Mobile DeveloperPlace yourself in your users shoes…

Remember mobile apps should be quick and responsive!

Thinking Like a Mobile DeveloperData 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

Thinking Like a Mobile DeveloperRemember 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.

Top 10 Mobile Development ConsiderationsDuncan’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

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


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

Mobile Development ConsiderationsRapid Prototyping


• 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


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

Mobile Development ConsiderationsUI/UX


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


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


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

Mobile Development ConsiderationsConnectivity 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


Working offline is possible by using:• HTML offline storage mediums

• localStorage and sessionStorage


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

Mobile Development ConsiderationsMemory Capacity & No. of Components

iPhone 6

1GB

Samsung S6

3GB

Average Laptop

4GBvs vs


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


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

Mobile Development ConsiderationsConsumer Expectations

What are these consumer expectations?• Mobile apps and desktop apps are designed differently

• Ease of navigation

• Fast performance

• No major bugs


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


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

Mobile Development ConsiderationsScreen 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


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


Responsive application we built:

Screen Size

iPhone iPad

Mobile Development ConsiderationsConfigurable & 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


How this is achieved:• Make views data bound

• Use configuration files

• Consider user interactions


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


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


When building an app for a bank, they required:

Native vs Hybrid

• Smoother animations

• Native UI slick look

• Wasn’t dealing with complicated data

Overview of the MergeTools we would typically use

ChromeSencha Cmd Cordova PhoneGap

OverviewSencha Architect

• Visual Sencha application creator

• Rich drag-and-drop UI builder

• Manage all parts of your app’s code

• Simple IDE built-in

OverviewSencha 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

OverviewCordova/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

OverviewCordova 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

OverviewChrome & 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

OverviewHow do these tools fit together?

Generate NewApplication

Build & ModifyApplication

View & DebugApplication

Build & DeployApplication

Create & Build Relevant Native Projects

Technology

SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - Andrew Duncan