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

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 

Último (20)

Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 

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/