Using Ext JS 6 for Cross-Platform App Development on Mobile Devices Andrew Duncan Founder & 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

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

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

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

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

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

Mobile Development Considerations Rapid Prototyping

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

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

Mobile Development Considerations UI/UX

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.

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

Mobile Development Considerations Responsive application example: Screen Size iPhone iPad

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

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

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

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

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

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

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