SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - Andrew Duncan
Download as PPTX, PDF0 likes652 views
The document discusses the use of Ext JS 6 for cross-platform mobile app development, focusing on understanding user interaction models, rapid prototyping, and UI/UX considerations. It emphasizes the importance of lightweight design, offline functionality, and responsive applications to meet consumer expectations while handling data efficiently. Additionally, it contrasts native and hybrid app development approaches and describes various tools and frameworks available for building mobile applications.
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - Andrew Duncan
- 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
- 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
- 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
Editor's Notes
- #34: This is an example of an app we have built for a company called Petrotechnics, that is compatible across different screen sizes. This is what it looks like on an iPhone V how it looks on an iPad. As you can see this the size of the components have changed to suit the needs of this new screen size.