• Save
Building native mobile apps using web technologies
Upcoming SlideShare
Loading in...5

Building native mobile apps using web technologies






Total Views
Views on SlideShare
Embed Views



3 Embeds 11

http://paper.li 9
http://us-w1.rockmelt.com 1
http://a0.twimg.com 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Building native mobile apps using web technologies Building native mobile apps using web technologies Presentation Transcript

  • 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 - examplevar 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
  • jQueryDoes 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 Layercreate → POST /collectionread → GET /collection[/id]update → PUT /collection/iddelete → 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 youHope this helps !