SlideShare una empresa de 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 !

Más contenido relacionado

Similar 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
 

Similar 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

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Último (20)

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...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
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
 
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
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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
 
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
 
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
 

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/