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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Building native mobile apps using web technologies

  • 1,505 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,505
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Demo App Duty Plan
  • 5. CSS - Responsive Use % for layout elements Use ems for padding & margins Not pixels
  • 6. 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; }}
  • 7. Thoughts jQuery Mobile thanks, but no thanks. HTML5 Mobile Boilerplate good as a base.
  • 8. Maintainable code Javascript
  • 9. Douglas Crockford
  • 10. Javascript Most used programming language in the world Most misunderstood Gaining a lot of momentum
  • 11. Javascript ● Dynamic● Functional but object oriented● Non-blocking behavior● Important to understand implications ( global, this and more.. )● Jslint, Jshint
  • 12. Javascript - examplevar person = {};person.doSomething = function() {};
  • 13. 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
  • 14. jQueryDoes not solve everything
  • 15. Backbone.js● MVC Library● Solves common problems● Lightweight● Uses jQuery● Popular for modern web apps● See examples: http://documentcloud.github. com/backbone/#examples
  • 16. Backbone.js - Solves common problems ● Structure - important for teams● Validation● Sorting● Events● History & Routes
  • 17. Backbone - RESTful Data Layercreate → POST /collectionread → GET /collection[/id]update → PUT /collection/iddelete → DELETE /collection/id
  • 18. Demo Backbone.js Duty Plan
  • 19. Offline Sync Use local storage Use window.online & offline events Use navigator.onLine to check status Backbone - overwrite sync
  • 20. PhoneGap Provides a way to use web technologies to create multi-platform native apps
  • 21. http://docs.phonegap.com/en/1.1.0/index.html
  • 22. 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
  • 23. 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.
  • 24. 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
  • 25. There are some libraries● Kaazing● jWebSockets● Juggernaut● There is no silver bullet !
  • 26. Urban Airship http://urbanairship.com/ http://urbanairship. com/blog/2010/06/09/phonegap-push/
  • 27. Thank youHope this helps !