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                ...
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...
Thoughts               jQuery Mobile            thanks, but no thanks.           HTML5 Mobile Boilerplate              goo...
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 (  globa...
Javascript - examplevar person = {};person.doSomething = function() {};
jQuery● Includes  ○ Powerful selectors  ○ DOM manipulation  ○ Ajax methods● Fixes browser issues● Fast & stable● Used on ⅓...
jQueryDoes not solve everything
Backbone.js● MVC Library● Solves common problems● Lightweight● Uses jQuery● Popular for modern web apps● See examples: htt...
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 → DELET...
Demo Backbone.js    Duty Plan
Offline Sync               Use local storage     Use window.online & offline events    Use navigator.onLine to check statu...
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" charse...
PhoneGap Build    1. Write your app using HTML, CSS and JavaScript    2. Upload it to the PhoneGap Build service    3. Get...
Background sync● PhoneGap - Push notification not supported● Could do server push● Problems with HTTP   ○ One direction   ...
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 !
Building native mobile apps using web technologies
Building native mobile apps using web technologies
Building native mobile apps using web technologies
Building native mobile apps using web technologies
Building native mobile apps using web technologies
Upcoming SlideShare
Loading in …5
×

Building native mobile apps using web technologies

1,777 views
1,702 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,777
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building native mobile apps using web technologies

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

×