Building native mobile apps using web technologies

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

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

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/

Building native mobile apps using web technologies

Recommandé

Recommandé

Contenu connexe

Similaire à Building native mobile apps using web technologies

Similaire à Building native mobile apps using web technologies (20)

Dernier

Dernier (20)

Building native mobile apps using web technologies