Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Ext JS 6 for Mobile Development

Using Ext JS 6 for Mobile Development


Andrew Duncan

November 25, 2016

More Decks by Andrew Duncan

Other Decks in Programming


  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. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Mobile Development Considerations Rapid Prototyping

  9. 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
  10. 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
  11. Mobile Development Considerations UI/UX

  12. 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.
  13. 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
  14. Thinking Like a Mobile Developer Place yourself in your users

    shoes… Remember mobile apps should be quick and responsive!
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. Mobile Development Considerations Memory Capacity & No. of Components iPhone

    6 1GB Samsung S6 3GB Average Laptop 4GB vs vs
  22. 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
  23. 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
  24. 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
  25. 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.
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. Mobile Development Considerations Responsive application example: Screen Size iPhone iPad

  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. Overview How do these tools fit together? Generate New Application

    Build & Modify Application View & Debug Application Build & Deploy Application Create & Build Relevant Native Projects
  38. andrew@swarmonline.com @SwarmOnline or @andrewmduncan www.swarmonline.com