Your SlideShare is downloading. ×
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
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
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
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
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
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
Building native mobile apps using web technologies
Building native mobile apps using web technologies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building native mobile apps using web technologies

1,532

Published on

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

No Downloads
Views
Total Views
1,532
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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 !

×