Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Global Tech Predictions, 2015 - 2020 3 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 billion in 2015 estimated size of the enterprise wearables, up from $128 billion in 2015 of organisations use advanced analytics to improve decision making

Slide 4

Slide 4 text

Digital Technologies Are Changing Businesses 4 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Mobile Development Considerations There are many great tools 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

Slide 7

Slide 7 text

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 • Fully functional prototype in Sencha Ext JS or Touch Rapid Prototyping

Slide 8

Slide 8 text

Mobile Development Considerations Rapid Prototyping

Slide 9

Slide 9 text

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 UI/UX

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Mobile Development Considerations UI/UX

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Mobile Development Considerations Throw away apps are very useful in several ways • Great for events or conferences that don’t last forever • Low costs • Targeted data gathering capabilities • Enhanced engagement Throw Away Apps

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Mobile Development Considerations Example • 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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Mobile Development Considerations Connectivity and Working Offline Working offline is possible by using: • HTML offline storage mediums • localStorage and sessionStorage • Cordova • SQL Lite Plugin • Sencha’s new offline functionality with Service Workers

Slide 20

Slide 20 text

Mobile Development Considerations Connectivity and Working Offline An app able to work offline using Ext JS • 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 • Install analytics to monitor usage

Slide 28

Slide 28 text

Mobile Development Considerations Consumer Expectations How we meet 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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Mobile Development Considerations Responsive application example: Screen Size iPhone iPad

Slide 32

Slide 32 text

Mobile Development Considerations Configurable & Data Driven Data-driven apps build themselves • Metadata about the screen / functionality is stored on the backend • Enables additional flexibility • Doesn’t require as many deploys

Slide 33

Slide 33 text

Mobile Development Considerations Configurable & Data Driven How this is achieved: • Store metadata in backend • Send metadata to frontend, iterate and build screens • Use configuration files, check for updates in backend • Consider validators

Slide 34

Slide 34 text

Mobile Development Considerations Configurable & Data Driven Data-driven app: • Users search for and review 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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

[email protected] @SwarmOnline or @andrewmduncan www.swarmonline.com