Apps specifically built for mobileField data collectionDeploy to StoreCitizen 411Finder appsGames…Many more!
Memory constrainedNexus 6P (top of the line)32 GB phone Snapdragon 810 processor
But only…3 GB RAM!!
Design patterns == very different
Smaller screensScreen orientation can rotateMobile popups and overlaysTouch-based navigation
Get your data in order, first!
Develop a schemaDesign tablesDefine relationshipsClean the dataTest, test, test
HTTP Request/Response Performance
Test Service response payload sizeSimplify geometries!Remove unneeded attributes
VS.
HTTP Request/Response Performance
DEMO
HTTP Request/Response Performance
Enable webserver gzip compressionUse ArcGIS JavaScript OptimizerMinimize, concatenate your .js and .css
gzip compression
All modern browsers support itAll modern browsers will request itServer needs to be configured
gzip*
*Source: Google
Consider additional viewports
Depending on your end-usersMany different CSS media query configurations
Fluid Grid System
• Layout adapts to different screen sizes
• Based on percentages• 12 column / 960px
Bootstrap Fluid Grid CSS
<div class="col-xs-12 col-sm-8>
Define Column
Device Size
Number of Columns
Query MODE_SNAPSHOT
Number of features being returned?Test request/response performanceFeatures have to be renderedBe aware of memory usage
Build > test > repeat
Unit testingPerformance testingNetwork interrupt testingTest on actual devicesTest on different operating systems
Geolocation
github.com/Esri/html5-geolocation-tool-js
GeolocationWorks online and offlineApproximate location only! Always requires user opt-inSame exact API for PhoneGap
Resourceshttp://www.andygup.net/web-mobile/https://github.com/Esri/html5-geolocation-tool-jshttps://github.com/Esri/quickstart-map-phonegaphttps://github.com/Esri/jquery-mobile-map-js
Multiple-View Design• Framework for single page apps with
multiple views• Similar to native look, feel and
behavior• Cross-browser
Get jquery-mobile-map-js
https://github.com/Esri/jquery-mobile-map-js
<html>
<div data-role=“page” id=“page1”>
</div>
<div data-role=“page” id=“page2”>
</div>
</html>
One HTML page
Multiple Views
Web
Web = HTML, JavaScript, CSS skillsCross-browser, cross-deviceNo special access needed to sensorsNo special storage needs
Hybrid
Hybrid = Native Chrome-less browser plusHTML, CSS, JavaScriptExample: PhoneGap/Cordova
Compiled as a native applicationAccesses device via browser APIs & plug-ins
Hybrid
JavaScript, CSS skillsCross-browser, cross-deviceSome special access needed to sensorsSome special storage needsApp Store and/or Google Play
Native
Native = Objective C, Java or C#
Compiled to run on device OSAccesses device directly via native API
Native
Objective C, Java and/or C# skillsHigh-performance requirementsSpecial access needed to sensorsSpecial storage needsOffline + related tables, domains and subtypes
Additional Resources• http://zurb.com/word/mobile-first• https://facebook.github.io/react-native/• https://www.ampproject.org/