Developing Mobile HTML5 Apps with Grails
Upcoming SlideShare
Loading in...5
×
 

Developing Mobile HTML5 Apps with Grails

on

  • 4,782 views

 

Statistics

Views

Total Views
4,782
Slideshare-icon Views on SlideShare
4,550
Embed Views
232

Actions

Likes
3
Downloads
29
Comments
0

6 Embeds 232

http://gr8conf.eu 116
http://lanyrd.com 92
http://gr8conf.org 20
http://m.gr8conf.eu 2
http://stg.lanyrd.org 1
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Developing Mobile HTML5 Apps with Grails Developing Mobile HTML5 Apps with Grails Presentation Transcript

  • Building Mobile Web Apps with Grails Sébastien Blanc Sopra Group
  • About me•34 years old, 2 children•50% french 50% dutch 100% geek Text•Software engineer working for Sopra Group•Follow me on twitter @sebi2706 2
  • What is a Mobile Web App ? 4 3
  • Size matters .... 4
  • Surviving offline 5
  • CACHE: Cache Manifest File :/css/screen.css/css/offline.css • Simple text file/js/screen.js • Served as text/cache-/img/logo.png manifestFALLBACK: • Declared inside the <html> tagoffline.htmllocalStorage.setitem("myKey","My value"); LocalStorage :localStorage.setitem("myKey", • Simple key/value storage"{my json structure"); • Simple APIlocalStorage.getitem[myKey] 6
  • 7
  • 9 8
  • Geolocation if(navigator.geolocation){ navigator.geolocation.getCurrentPosition( function(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; } ); } 9
  • ? 11 10
  • 11
  • • Official jQuery Product• Progressive Enhancement• Strong Community• Stable releases 12
  • jQuery Mobile syntax <html> <body> <div data-role="page"> <div data-role="header"> <h1>Single page</h1> </div> <div data-role="content"> <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> </body> </html> 13
  • Grails & Mobile Web Apps★Grails is a Web Framework★Resource handling★Cache handling★Dedicated plugins★Deploy to the cloud in seconds 14
  • What’s next ?jQuery Mobile Client Scaffolding plugin : generates a complete independent HTML5 appPhonegap Build plugin : get the native packages in one click ! 15
  • Searching for the holy Grail 16