SlideShare uma empresa Scribd logo
1 de 32
Building mobile apps using web
         technologies


      Hjörtur Elvar Hilmarsson
        twitter.com/hjortureh
Agenda

● Responsive layouts
● Maintainable code
● Offline sync
● Multi-platform
● Background sync
Web Technologies

               HTML - Data

           CSS - Presentation

         Javascript - Functionality

                Server API
Demo App
 Duty Plan
CSS - Responsive



        Use % for layout elements

      Use ems for padding & margins

               Not pixels
CSS - Media queries

 ● Supports: width, height, device-width, device-
   height, orientation, aspect-ratio, device-
   aspect-ration, color, color-index, monochrome,
   resolution, scan, grid.

Example:

@media screen and (min-device-width: 480px) and (orientation:
landscape) {
   body { background: pink; }
}
Thoughts

               jQuery Mobile
            thanks, but no thanks.

           HTML5 Mobile Boilerplate
              good as a base.
Maintainable code

     Javascript
Douglas Crockford
Javascript


      Most used programming
       language in the world

        Most misunderstood

     Gaining a lot of momentum
Javascript 

● Dynamic
● Functional but object oriented
● Non-blocking behavior
● Important to understand implications (
  global, this and more.. )
● Jslint, Jshint
Javascript - example


var person = {};

person.doSomething = function() {

};
jQuery

● Includes
  ○ Powerful selectors
  ○ DOM manipulation
  ○ Ajax methods
● Fixes browser issues
● Fast & stable
● Used on ⅓ of sites in the internet
● No reason not to use it
jQuery


Does not solve everything
Backbone.js

● MVC Library
● Solves common problems
● Lightweight
● Uses jQuery
● Popular for modern web apps
● See examples: http://documentcloud.github.
  com/backbone/#examples
Backbone.js - Solves common problems 

● Structure - important for teams
● Validation
● Sorting
● Events
● History & Routes
Backbone - RESTful Data Layer

create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
delete → DELETE /collection/id
Demo Backbone.js
    Duty Plan
Offline Sync

               Use local storage

     Use window.online & offline events

    Use navigator.onLine to check status

         Backbone - overwrite sync
PhoneGap 



Provides a way to use web technologies to
     create multi-platform native apps
http://docs.phonegap.com/en/1.1.0/index.html
PhoneGap - Example
<!DOCTYPE html>
<html>
 <head>
  <title>Notification Example</title>

  <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
  <script type="text/javascript" charset="utf-8">

  // Wait for PhoneGap to load
  //
  document.addEventListener("deviceready", onDeviceReady, false);

  // PhoneGap is ready
  //
  function onDeviceReady() {
     // Empty
  }

  // alert dialog dismissed
  function alertDismissed() {
      // do something
  }

  // Show a custom alert
  //
  function showAlert() {
     navigator.notification.alert(
       'You are the winner!', // message
PhoneGap Build
    1. Write your app using HTML, CSS and JavaScript
    2. Upload it to the PhoneGap Build service
    3. Get back app-store ready apps for Apple iOS, Google
       Android, Palm, Symbian, Blackberry and more.
Background sync

● PhoneGap - Push notification not supported
● Could do server push
● Problems with HTTP
   ○ One direction
   ○ Message overhead
● WebSockets - push technology for the web
   ○ Network protocol
   ○ Javascript API
   ○ Only supported in Chrome
There are some libraries

● Kaazing
● jWebSockets
● Juggernaut
● There is no silver bullet !
Urban Airship

          http://urbanairship.com/

             http://urbanairship.
    com/blog/2010/06/09/phonegap-push/
Thank you

Hope this helps !

Mais conteúdo relacionado

Semelhante a Building native mobile apps using web technologies

"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
Christian Rokitta
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 

Semelhante a Building native mobile apps using web technologies (20)

phonegap with angular js for freshers
phonegap with angular js for freshers    phonegap with angular js for freshers
phonegap with angular js for freshers
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Android TCJUG
Android TCJUGAndroid TCJUG
Android TCJUG
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
Hybrid application development
Hybrid application developmentHybrid application development
Hybrid application development
 
Android
AndroidAndroid
Android
 
Universal Applications with Universal JavaScript
Universal Applications with Universal JavaScriptUniversal Applications with Universal JavaScript
Universal Applications with Universal JavaScript
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Phone gap development, testing, and debugging
Phone gap development, testing, and debuggingPhone gap development, testing, and debugging
Phone gap development, testing, and debugging
 
Android workshop material
Android workshop materialAndroid workshop material
Android workshop material
 
Cross Platform Mobile App Development
Cross Platform Mobile App DevelopmentCross Platform Mobile App Development
Cross Platform Mobile App Development
 
The Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java DeveloperThe Mobile Web Revealed For The Java Developer
The Mobile Web Revealed For The Java Developer
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
Introduction to jQueryMobile
Introduction to jQueryMobileIntroduction to jQueryMobile
Introduction to jQueryMobile
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

Building native mobile apps using web technologies

  • 1. Building mobile apps using web technologies Hjörtur Elvar Hilmarsson twitter.com/hjortureh
  • 2. Agenda ● Responsive layouts ● Maintainable code ● Offline sync ● Multi-platform ● Background sync
  • 3. Web Technologies HTML - Data CSS - Presentation Javascript - Functionality Server API
  • 4.
  • 5.
  • 6.
  • 8. CSS - Responsive Use % for layout elements Use ems for padding & margins Not pixels
  • 9. CSS - Media queries ● Supports: width, height, device-width, device- height, orientation, aspect-ratio, device- aspect-ration, color, color-index, monochrome, resolution, scan, grid. Example: @media screen and (min-device-width: 480px) and (orientation: landscape) { body { background: pink; } }
  • 10. Thoughts jQuery Mobile thanks, but no thanks. HTML5 Mobile Boilerplate good as a base.
  • 11. Maintainable code Javascript
  • 12.
  • 14. Javascript Most used programming language in the world Most misunderstood Gaining a lot of momentum
  • 15. Javascript  ● Dynamic ● Functional but object oriented ● Non-blocking behavior ● Important to understand implications ( global, this and more.. ) ● Jslint, Jshint
  • 16. Javascript - example var person = {}; person.doSomething = function() { };
  • 17. jQuery ● Includes ○ Powerful selectors ○ DOM manipulation ○ Ajax methods ● Fixes browser issues ● Fast & stable ● Used on ⅓ of sites in the internet ● No reason not to use it
  • 18. jQuery Does not solve everything
  • 19. Backbone.js ● MVC Library ● Solves common problems ● Lightweight ● Uses jQuery ● Popular for modern web apps ● See examples: http://documentcloud.github. com/backbone/#examples
  • 20. Backbone.js - Solves common problems  ● Structure - important for teams ● Validation ● Sorting ● Events ● History & Routes
  • 21. Backbone - RESTful Data Layer create → POST /collection read → GET /collection[/id] update → PUT /collection/id delete → DELETE /collection/id
  • 22. Demo Backbone.js Duty Plan
  • 23. Offline Sync Use local storage Use window.online & offline events Use navigator.onLine to check status Backbone - overwrite sync
  • 24. PhoneGap  Provides a way to use web technologies to create multi-platform native apps
  • 25.
  • 27. PhoneGap - Example <!DOCTYPE html> <html> <head> <title>Notification Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for PhoneGap to load // document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap is ready // function onDeviceReady() { // Empty } // alert dialog dismissed function alertDismissed() { // do something } // Show a custom alert // function showAlert() { navigator.notification.alert( 'You are the winner!', // message
  • 28. PhoneGap Build 1. Write your app using HTML, CSS and JavaScript 2. Upload it to the PhoneGap Build service 3. Get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, Blackberry and more.
  • 29. Background sync ● PhoneGap - Push notification not supported ● Could do server push ● Problems with HTTP ○ One direction ○ Message overhead ● WebSockets - push technology for the web ○ Network protocol ○ Javascript API ○ Only supported in Chrome
  • 30. There are some libraries ● Kaazing ● jWebSockets ● Juggernaut ● There is no silver bullet !
  • 31. Urban Airship http://urbanairship.com/ http://urbanairship. com/blog/2010/06/09/phonegap-push/