SlideShare a Scribd company logo
Esri Southwest User Conference
September 17-19, 2012 | Denver, Colorado


         Building Mobile Applications with
          the ArcGIS API for JavaScript

                                  Andy Gup
Agenda

 Goal: You’ll get an A to Z mobile web primer

 Why build mobile map apps?

 3 Approaches

 Frameworks

 CSS3 & HTML5

 Hybrid Map apps
Who am I?



   Andy Gup, Esri
   Tech Lead for Web APIs and Android
   Esri Developer Network


   Email: agup@esri.com
   Twitter: @agup
Who are you?

Recommended for you

Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa

Presented by Ben Butchart and Murray King at the Institutional Web Managers Workshop, 12 July 2010, Sheffield

phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers

1. PhoneGap is a framework that allows developers to build mobile apps using HTML, CSS, and JavaScript instead of platform-specific languages. It works by wrapping web pages in a native container so they can access native device functions and be deployed to app stores. 2. The document discusses PhoneGap features like access to device APIs, cross-platform deployment, and debugging tools. It also covers setting up the PhoneGap development environment and creating a basic "Hello World" app. 3. The document provides code examples for the app manifest, JavaScript to access device functions, and HTML/CSS pages. It also discusses PhoneGap advantages like multiple platform support and disadvantages like lack of support for all native features.

hybrid applicationmobile application development
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인

The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.

Why mobile?
Demo
3 Approaches to Mobile - An A to Z Primer.
X

Recommended for you

Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010

Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/

web appweb standardshtml5
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape

A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices. I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms. I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.

Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design

According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand. In this webinar: - Explore some innovative library mobile website designs and see how they were built. - Understand how HTML, CSS, and JavaScript work together to build mobile websites. - Learn what a mobile framework is and why they are used. - Provide some existing mobile services/apps that can be included in library-created mobile websites. - Acquire best practices in mobile Web development from start to finish.

jquery mobilelibrariesmobile web
3 Approaches to Mobile - An A to Z Primer.
Mobile usage stats for my website?




Web Server logs


Web analytic tools
Sample web-site stats from esri.com
Your 3 Approaches


                        Web app
     1.                     +
                    Native mobile app



                       Web app
     2.                     +
                    Web mobile app
                     (a.k.a Hybrid)



     3.              Web app only

Recommended for you

Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applications

This document discusses designing responsive web and mobile mapping applications. It emphasizes that mobile devices, user interactions, and expectations are different than desktop experiences. Responsive design uses a single codebase that adapts content and layout depending on screen size. Key components of responsive design include a fluid grid system, media queries, and HTML5/CSS. The document also discusses developing responsive mapping apps using frameworks like Bootstrap that include standardized components. It provides tips for making maps responsive like auto-resizing, auto-recentering, and using media queries to adjust map sizes at different breakpoints.

arcgis; esri; responsive; mapping; apps; html5; bo
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla

This document summarizes the Firefox OS, an open web platform for building mobile apps and customizing the user interface using HTML5, CSS, and JavaScript. It outlines key web APIs, the process for developing and publishing open web apps, and the different types of apps including regular web apps, installed web apps, and privileged web apps with additional capabilities. Security levels and permissions for APIs are also discussed.

apiweb apiapis
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

readermobile application developmentweb applications
Many different screen sizes and pixel densities




                            1920x1080
Wait…how do I pan and zoom the map??
Hmmm…how many map layers do I load?




                     VS.




       1 GB RAM                   16 GB RAM
How come my map loads so slooow?




                        VS.




     Mostly connected              Always connected

Recommended for you

Web app and more
Web app and moreWeb app and more
Web app and more

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

web application
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

multi-screenhtml5twitter bootstrap
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发

This is a presentation to review and summarize the mobile websites that I have involved in. It includes many practical skills and my own experiences in the development of mobile websites.

web appmobile
3 Approaches to Mobile - An A to Z Primer.
My survey crews use GPS heavily…




                       VS.




     Limited battery               Unlimited power
arcgis.com




      1440 x 900   480 x 800 hdpi
resources.arcgis.com




      1440 x 900       480 x 800 hdpi

Recommended for you

HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today

PhoneGap allows developers to build mobile apps using HTML, CSS and JavaScript instead of relying on platform-specific languages like Objective-C or Java. The document discusses PhoneGap's capabilities and advantages, including writing apps once that run on multiple platforms, using web technologies that are widely known by developers, and leveraging growing browser capabilities on mobile through HTML5. It also outlines PhoneGap's APIs, tools, libraries, and community to help developers get started building cross-platform mobile apps.

html5where20phonegap
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air

A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP. You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.

appshtml5css
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)

The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.

html5mobile
Mobile app – flip view port easily




   Portrait                          Landscape
Desktop app on smartphone
ArcGIS API for JavaScript - Compact




          http://esriurl.com/compactJS




<script type="text/javascript"
    src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact">
Library Size vs. Download vs. Parse


         Compact




         Full

Recommended for you

Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version

The document discusses web mapping and enabling survey data for the web. It provides an overview of shapefiles and their limitations. It then covers hosting web maps using services like ArcGIS Online, Google Maps, and OpenGeo. Key points include that shapefiles have file size and field restrictions, while web maps have no file downloads or software requirements. Web mapping allows data to be universally accessible over the internet from any device with a browser. The document demonstrates publishing maps to various web mapping platforms and services.

Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build

See how PhoneGap (Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. Learn how PhoneGap works and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API and walk you through how to interact with the JavaScript methods to create interactive, feature-rich mobile applications. You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud. This session will cover: Getting started with the PhoneGap API Interacting with the native device features (camera, video) Accessing and using the geolocation sensors Compiling the application using PhoneGap Build

phonegap buildmobilemobile application development
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024

This is a powerpoint that features Microsoft Teams Devices and everything that is new including updates to its software and devices for May 2024

microsoft teamsmicrosoft
Many mobile frameworks, such as…
The challenge
Mobile frameworks help with…



           Views

           Visual Components

           Themes
Views




        Image courtesy Dojo
Views



<div id="mapView" dojoType="dojox.mobile.View“
        style="width:100%;height:100%;">
    <h1 dojoType="dojox.mobile.Heading"
        back="Back" moveTo="mainView">
        5 + 10 minute Drive Times
    </h1>
    <div id="map“ style="width:100%; height:100%;“/>
</div>

Recommended for you

20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024

Everything that I found interesting about engineering leadership last month

quantumfaxmachine
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx

MuleSoft Meetup on APM and IDP

mulesoftai
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf

In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.

social media hackerfacebook hackerhire a instagram hacker
Visual Components



<div dojoType="dojox.charting.widget.Chart2D"
     theme="dojox.charting.themes.Claro" id="viewsChart"
     style="width: 550px; height: 550px;">

    
    <div class="plot" name="default" type="Pie"
     radius="200" fontColor="#000" labelOffset="-20"></div>

    
    <div class="series" name="Last Week's Visits"
        array="chartData">
    </div>

</div>
Themes



<div data-role="dialog" id="legendDialog"
  data-theme="f">
  <div data-role="header">
    <h1>Legend</h1>
  </div>
  <div data-role="content" >
    <div id="legendDiv"></div>
  </div>
</div>
The view port
Setting the mobile view port




<meta name="viewport" content="width=device-width,
   initial-scale=1, maximum-scale=1, user-scalable=no"/>

Recommended for you

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.

air force fighter planebiggest submarinezambia port
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...

Slide of the tutorial entitled "Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Emerging Trends" held at UMAP'24: 32nd ACM Conference on User Modeling, Adaptation and Personalization (July 1, 2024 | Cagliari, Italy)

user modelinguser profilinguser model
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...

This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator. Link to presentation recording and slides: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/ Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.

a11yaccessibilityalt text
Setting the mobile view port

                             Minimum view port




<meta name="viewport" content="width=device-width,
   initial-scale=1, maximum-scale=1, user-scalable=no"/>




Zoom level on page load

                               Force map to scale - not the page
No viewport   With viewport
Map touch events


               No Change!



function init() {
        var map = new esri.Map(...);
        dojo.connect(map, "onClick", myClickHandler);
}
Styling via resolution & rotation


          CSS3 Media Queries

Recommended for you

[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf

Kief Morris rethinks the infrastructure code delivery lifecycle, advocating for a shift towards composable infrastructure systems. We should shift to designing around deployable components rather than code modules, use more useful levels of abstraction, and drive design and deployment from applications rather than bottom-up, monolithic architecture and delivery.

infrastructure as codeclouddevops
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

Profile portofolio

The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses

CIO Council Cal Poly Humboldt September 22, 2023

national research platformdistributed supercomputerdistributed systems
CSS3 Media Queries
Target specific devices by screen width

@media screen and (min-device-width:768px) and (max-device-width:1024px) {
/* styles go here */
}



Apply styles by device orientation

@media (orientation: landscape) {
/* styles go here */
}



Target high density screens such as iPhone 4

@media (-webkit-min-device-pixel-ratio: 2) {
/* high resolution device styles go here */
}
Listen for device rotation

var supportsOrientationChange = "onorientationchange" in window,
        orientationEvent =
            supportsOrientationChange ? "orientationchange" : "resize";

       window.addEventListener(orientationEvent,
               dojo.hitch(this,function(){
                    //... TODO
                    this.orientationChanged = orientationChanged;
                }), false
        );
Demo
Putting it all together
Hybrid Web Apps




Android SDK
               +       HTML +
                   Mobile JavaScript
                                       =
Java Project
                     Framework

Recommended for you

Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

programmingcodingcivil engineering
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf

Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).

solar storms
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

neo4jneo4j webinarsgraph database
Hybrid Web Apps
Hybrid Web Apps

                  Direct access to:

                  GPS
                  Camera
                  SD Card
Examples of Hybrid Web Apps
        http://www.phonegap.com/app
Hybrid Web App Platforms

Recommended for you

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...

Have you noticed the OpenSSF Scorecard badges on the official Dart and Flutter repos? It's Google's way of showing that they care about security. Practices such as pinning dependencies, branch protection, required reviews, continuous integration tests etc. are measured to provide a score and accompanying badge. You can do the same for your projects, and this presentation will show you how, with an emphasis on the unique challenges that come up when working with Dart and Flutter. The session will provide a walkthrough of the steps involved in securing a first repository, and then what it takes to repeat that process across an organization with multiple repos. It will also look at the ongoing maintenance involved once scorecards have been implemented, and how aspects of that maintenance can be better automated to minimize toil.

dartflutteropenssf
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing

Invited Remote Lecture to SC21 The International Conference for High Performance Computing, Networking, Storage, and Analysis St. Louis, Missouri November 18, 2021

distributed supercomputerdistributed machine learning
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

#uipathcommunity#automation#automationdeveloper
build.phonegap.com
build.phonegap.com
Scan the QR code to install
Hello-World PhoneGap Map

Recommended for you

Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

cloudcloud native observabilitycloud native
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems

Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states. In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing. Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.

How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx

Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.

rpa in transportationrpa in transportation industryrpa in transportation sector
3 Approaches to Mobile - An A to Z Primer.
Remote debugging
HTML5

        HTML + CSS3 + JavaScript




                                   HTML5 Logo by W3C
HTML5 APIs
•   Several new APIs
    -   Drag and drop API
    -   FileSystem API(s)
    -   Geolocation API
    -   Web Storage: localStorage/sessionStorage
    -   Web Workers (threaded JavaScript!)
    -   Cross-Origin Resource Sharing (CORS)
    -   Browser History

Recommended for you

Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf

To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.

data recoverydatadiskwarrior
Web Storage API
•   5 MB limit vs. 4 KB per regular cookie
•   Stores key/value pairs
•   localStorage and sessionStorage

// Put the object into storage
localStorage.setItem(“address”, someAddress);

// Retrieve the object from storage
var userAddress = localStorage.getItem(“address”);


// Save data to a the current session's store
sessionStorage.setItem("username", "John");


// Access some stored data
var userName = sessionStorage.getItem("username"));
Geolocation API
•   Provides user’s approximate location
•   Opt-in only!




navigator.geolocation.getCurrentPosition(
    zoomToLocation, locationError
);

watchId = navigator.geolocation.watchPosition(
    updateLocation, locationError
);
Geolocation API
Understanding browsers




          !=         !=

Recommended for you

caniuse.com
Feature detection pattern

useLocalStorage = supports_local_storage();

function supports_local_storage() {
   try {
     return 'localStorage' in window &&
        window['localStorage'] !== null;
   }
   catch( e ){
     return false;
   }
}

function doSomething() {
    if(useLocalStorage == true){
       //write to local storage
    }
    else {
         //degrade gracefully
    }
}
Test on different devices
3 Approaches to Mobile - An A to Z Primer.

Recommended for you

Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network


agup@esri.com
http://blog.andygup.net
@agup
3 Approaches to Mobile - An A to Z Primer.

More Related Content

Similar to 3 Approaches to Mobile - An A to Z Primer.

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Esri Nederland
 
Gup web mobilegis
Gup web mobilegisGup web mobilegis
Gup web mobilegis
GeCo in the Rockies
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
EDINA, University of Edinburgh
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
dssprakash
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
Daum DNA
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Patrick Lauke
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
Ambert Ho
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
St. Petersburg College
 
Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applications
Allan Laframboise
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
Robert Nyman
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
Ron Reiter
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
Zhang Xiaoxue
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version
rudy_stricklan
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
Chris Griffith
 

Similar to 3 Approaches to Mobile - An A to Z Primer. (20)

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and A...
 
Gup web mobilegis
Gup web mobilegisGup web mobilegis
Gup web mobilegis
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Best Practices for Mobile Web Design
Best Practices for Mobile Web DesignBest Practices for Mobile Web Design
Best Practices for Mobile Web Design
 
Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applications
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
移动端Web app开发
移动端Web app开发移动端Web app开发
移动端Web app开发
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 

Recently uploaded

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 

Recently uploaded (20)

What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 

3 Approaches to Mobile - An A to Z Primer.

  • 1. Esri Southwest User Conference September 17-19, 2012 | Denver, Colorado Building Mobile Applications with the ArcGIS API for JavaScript Andy Gup
  • 2. Agenda Goal: You’ll get an A to Z mobile web primer Why build mobile map apps? 3 Approaches Frameworks CSS3 & HTML5 Hybrid Map apps
  • 3. Who am I? Andy Gup, Esri Tech Lead for Web APIs and Android Esri Developer Network Email: agup@esri.com Twitter: @agup
  • 8. X
  • 10. Mobile usage stats for my website? Web Server logs Web analytic tools
  • 11. Sample web-site stats from esri.com
  • 12. Your 3 Approaches Web app 1. + Native mobile app Web app 2. + Web mobile app (a.k.a Hybrid) 3. Web app only
  • 13. Many different screen sizes and pixel densities 1920x1080
  • 14. Wait…how do I pan and zoom the map??
  • 15. Hmmm…how many map layers do I load? VS. 1 GB RAM 16 GB RAM
  • 16. How come my map loads so slooow? VS. Mostly connected Always connected
  • 18. My survey crews use GPS heavily… VS. Limited battery Unlimited power
  • 19. arcgis.com 1440 x 900 480 x 800 hdpi
  • 20. resources.arcgis.com 1440 x 900 480 x 800 hdpi
  • 21. Mobile app – flip view port easily Portrait Landscape
  • 22. Desktop app on smartphone
  • 23. ArcGIS API for JavaScript - Compact http://esriurl.com/compactJS <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1compact">
  • 24. Library Size vs. Download vs. Parse Compact Full
  • 25. Many mobile frameworks, such as… The challenge
  • 26. Mobile frameworks help with… Views Visual Components Themes
  • 27. Views Image courtesy Dojo
  • 28. Views <div id="mapView" dojoType="dojox.mobile.View“ style="width:100%;height:100%;"> <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="mainView"> 5 + 10 minute Drive Times </h1> <div id="map“ style="width:100%; height:100%;“/> </div>
  • 29. Visual Components <div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;"> <!-- Pie Chart: add the plot --> <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div> <!-- pieData is the data source --> <div class="series" name="Last Week's Visits" array="chartData"> </div> </div>
  • 30. Themes <!--Legend Dialog--> <div data-role="dialog" id="legendDialog" data-theme="f"> <div data-role="header"> <h1>Legend</h1> </div> <div data-role="content" > <div id="legendDiv"></div> </div> </div>
  • 32. Setting the mobile view port <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  • 33. Setting the mobile view port Minimum view port <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> Zoom level on page load Force map to scale - not the page
  • 34. No viewport With viewport
  • 35. Map touch events No Change! function init() { var map = new esri.Map(...); dojo.connect(map, "onClick", myClickHandler); }
  • 36. Styling via resolution & rotation CSS3 Media Queries
  • 37. CSS3 Media Queries Target specific devices by screen width @media screen and (min-device-width:768px) and (max-device-width:1024px) { /* styles go here */ } Apply styles by device orientation @media (orientation: landscape) { /* styles go here */ } Target high density screens such as iPhone 4 @media (-webkit-min-device-pixel-ratio: 2) { /* high resolution device styles go here */ }
  • 38. Listen for device rotation var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, dojo.hitch(this,function(){ //... TODO this.orientationChanged = orientationChanged; }), false );
  • 40. Hybrid Web Apps Android SDK + HTML + Mobile JavaScript = Java Project Framework
  • 42. Hybrid Web Apps Direct access to: GPS Camera SD Card
  • 43. Examples of Hybrid Web Apps http://www.phonegap.com/app
  • 44. Hybrid Web App Platforms
  • 47. Scan the QR code to install
  • 51. HTML5 HTML + CSS3 + JavaScript HTML5 Logo by W3C
  • 52. HTML5 APIs • Several new APIs - Drag and drop API - FileSystem API(s) - Geolocation API - Web Storage: localStorage/sessionStorage - Web Workers (threaded JavaScript!) - Cross-Origin Resource Sharing (CORS) - Browser History
  • 53. Web Storage API • 5 MB limit vs. 4 KB per regular cookie • Stores key/value pairs • localStorage and sessionStorage // Put the object into storage localStorage.setItem(“address”, someAddress); // Retrieve the object from storage var userAddress = localStorage.getItem(“address”); // Save data to a the current session's store sessionStorage.setItem("username", "John"); // Access some stored data var userName = sessionStorage.getItem("username"));
  • 54. Geolocation API • Provides user’s approximate location • Opt-in only! navigator.geolocation.getCurrentPosition( zoomToLocation, locationError ); watchId = navigator.geolocation.watchPosition( updateLocation, locationError );
  • 58. Feature detection pattern useLocalStorage = supports_local_storage(); function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; } } function doSomething() { if(useLocalStorage == true){ //write to local storage } else { //degrade gracefully } }
  • 59. Test on different devices
  • 61. Andy Gup, Esri Tech Lead for Web APIs and Android Esri Developer Network agup@esri.com http://blog.andygup.net @agup

Editor's Notes

  1. Demographics app
  2. 835 million smartphone users in 2011
  3. http://www.esri.com/site/pdfs/visitorprofile_q3_2011.pdf
  4. http://mobile.businessweek.com/articles/2012-09-13/the-4g-era-arrives-how-much-will-you-pay
  5. Arcgis.com
  6. Arcgis.com
  7. http://esriurl.com/compactJS
  8. http://dojotoolkit.org/reference-guide/1.8/dojox/mobile.htmlhttp://docs.sencha.com/touch/2-0/#!/api
  9. jQuery
  10. Locks entire window. Focuses pinch zoom on components (e.g. map).Pinch zoom not available on Android 3+ until ArcGIS API for JavaScript v3.2
  11. https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
  12. http://edn1.esri.com/jsdevstarter/device_sim/index.html
  13. You can do the same thing with iOS
  14. http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
  15. http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/
  16. http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering/#s:1-linkedin-ipadhttp://www.mobilemarketer.com/cms/news/software-technology/13786.html
  17. Modernizr
  18. Be careful when reusing desktop content on the mobile web