0
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 f...
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 fil...
7
9    8
Geolocation     if(navigator.geolocation){     navigator.geolocation.getCurrentPosition(     function(position){          ...
?    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 ...
Grails & Mobile Web Apps★Grails is a Web Framework★Resource handling★Cache handling★Dedicated plugins★Deploy to the cloud ...
What’s next ?jQuery Mobile Client Scaffolding plugin :     generates a complete independent HTML5 appPhonegap Build plugin...
Searching for the holy Grail                               16
Upcoming SlideShare
Loading in...5
×

Developing Mobile HTML5 Apps with Grails

4,493

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,493
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
39
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Developing Mobile HTML5 Apps with Grails"

    1. 1. Building Mobile Web Apps with Grails Sébastien Blanc Sopra Group
    2. 2. 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
    3. 3. What is a Mobile Web App ? 4 3
    4. 4. Size matters .... 4
    5. 5. Surviving offline 5
    6. 6. 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. 7. 7
    8. 8. 9 8
    9. 9. 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
    10. 10. ? 11 10
    11. 11. 11
    12. 12. • Official jQuery Product• Progressive Enhancement• Strong Community• Stable releases 12
    13. 13. 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
    14. 14. Grails & Mobile Web Apps★Grails is a Web Framework★Resource handling★Cache handling★Dedicated plugins★Deploy to the cloud in seconds 14
    15. 15. What’s next ?jQuery Mobile Client Scaffolding plugin : generates a complete independent HTML5 appPhonegap Build plugin : get the native packages in one click ! 15
    16. 16. Searching for the holy Grail 16
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×