Gears Presentation at University of Illinois at Urbana-Champagne

Slide 1: How to take your Web Application Ofﬂine with Google Gears Brad Neuberg Dion Almaer code.google.com Friday, April 11, 2008 1

Slide 2: How to take your Web Application Ofﬂine with Google Gears or, How to enhance your Brad Neuberg Web Application Dion Almaer code.google.com with Google Gears Friday, April 11, 2008 1

Slide 3: Who are these chumps? Friday, April 11, 2008 2

Slide 4: After this session... Great to be here Friday, April 11, 2008 3

Slide 5: Interesting, passionate, times Friday, April 11, 2008 4

Slide 6: Friday, April 11, 2008 5

Slide 7: Developers need tools to make compelling applications Friday, April 11, 2008 6

Slide 8: We Believe... The Web is the platform of today, and of the future Friday, April 11, 2008 7

Slide 9: We believe... It takes too long to update the Web Friday, April 11, 2008 8

Slide 10: The beast has woken! Friday, April 11, 2008 9

Slide 11: •Concurrent Network Connections •Connectivity Events •DOM Storage •Cross Domain The beast has woken! Friday, April 11, 2008 9

Slide 12: Agenda • Introduction to Gears and why we care • Touch on the components • The big secret: It isn’t about ofﬂine! • Dive into the components of Gears • The core components • Community additions • Walk through real examples • Coding labs so you can get going on Gears Friday, April 11, 2008 10

Slide 13: What does ofﬂine mean? Friday, April 11, 2008 11

Slide 14: Why? “How often are you on a plane?” • Reliability • 1% of downtime can hurt at the wrong time • Performance • Local acceleration • Convenience • Not having to ﬁnd a connection • You are ofﬂine more than you think! Friday, April 11, 2008 12

Slide 15: Ofﬂine Web via Open Web • Why just solve this problem for Google? • Why not solve it for others? • Solution: Make it open source with a liberal license • New BSD Friday, April 11, 2008 13

Slide 16: What is the philosophy? • One application, one URL • Seamless transitions between online and ofﬂine • Ability to use local data, even when online • Available to all users on all platforms • ... and a pony Friday, April 11, 2008 14

Slide 17: What is the philosophy? Do for ofﬂine what XMLHttpRequest did for web apps Ajax Libraries Gears Libraries Dojo, jQuery, Prototype, GWT Dojo Ofﬂine, GWT XMLHttpRequest Gears Open Web Open Web Friday, April 11, 2008 15

Slide 18: Ajax Architecture Friday, April 11, 2008 16

Slide 19: Ofﬂine Architecture • Read and write using local store • Changes are queued for later synchronization • Server communication is completely decoupled from UI actions, happens periodically whenever there is a connection Friday, April 11, 2008 17

Slide 20: What are the pieces? Friday, April 11, 2008 18

Slide 22: HTML 5 Offline in General <html application=”manifest-of-urls.txt”> <html application> “There’s a concept of an application cache. An application cache is a group of resources, the group being identified by a URI (which typically happens to resolve to a manifest). Resources in a cache are either top-level or not; top-level resources are those that are HTML or XML and when parsed with scripting disabled have with the value of the attribute pointing to the same URI as identifies the cache. When you visit a page you first check to see if you have that page in a cache as a known top-level page.” Friday, April 11, 2008 20

Slide 23: Worker Pool JavaScript needs threads after all? Brendan! WorkerPool Browser JavaScript Engine WorkerPool window, document no access Friday, April 11, 2008 21

Slide 24: The Digg Oracle Friday, April 11, 2008 22

Slide 25: Full Text Search • Gears added FTS2 to SQLite • Create the database db.execute('CREATE VIRTUAL TABLE recipe USING fts2(dish, ingredients)'); • Search the database db.execute('SELECT dish FROM recipe WHERE recipe MATCH ?', ['tomatoes']); Fun queries: dish:stew tomatoes Find rows with 'stew' in the dish ﬁeld, and 'tomatoes' in any ﬁeld. Friday, April 11, 2008 23

Slide 26: The Bigger Picture Friday, April 11, 2008 24

Slide 27: Upgrading the Web in place Friday, April 11, 2008 25

Slide 28: Desktop Shortcuts var desktop = google.gears.factory.create('beta.desktop'); desktop.createShortcut("Test Application", "An application at http://www.test.com/index.html", "http://www.test.com/index.html", {"16x16": "http://www.test.com/icon16x16.png", "32x32": "http://www.test.com/icon32x32.png", "48x48": "http://www.test.com/icon48x48.png", "128x128": "http://www.test.com/icon128x128.png"}); Friday, April 11, 2008 26

Slide 29: Notification API Growl for the Web var notifier = google.gears.factory.create('beta.notifier', '1.0'); notifier.notify({ application: "My App", title: 'warning', description: 'some text', priority: 2, sticky: 'True', password: 'Really Secure', }); Friday, April 11, 2008 27

Slide 30: Channel API Communicate with native code from javascript. class GearsChannel { public: explicit GearsChannel(const char *requesting_page); virtual ~GearsChannel(); void DispatchMessages(); void Send(const char *message_string); virtual void OnMessage(const char *message_string) = 0; virtual void OnError(int error) = 0; virtual void OnDisconnect() = 0; Friday, April 11, 2008 28

Slide 32: Don’t you want a better File Upload? Friday, April 11, 2008 30

Slide 33: Would you like a better CSS? Friday, April 11, 2008 31

Slide 34: JavaScript Read Write APIs Friday, April 11, 2008 32

Slide 35: Gears + Greasemonkey = GearsMonkey Friday, April 11, 2008 33

Slide 36: Wikipedia Ofﬂine Friday, April 11, 2008 34

Slide 38: Auto network check: checkNetworkAvailability() - access ﬁle on server asd Vortex Ofﬂine on top of Gears Friday, April 11, 2008 36

Slide 39: GWT and Gears try { db = new Database("database-demo"); db.execute("create table if not exists Demo (Phrase varchar(255), Timestamp int)"); } catch (GearsException e) { ... } button.addClickListener(new ClickListener() { public void onClick(Widget sender) { try { String phrase = input.getText(); if (phrase.length() > 0) { db.execute("insert into Demo values (?, ?)", new String[] { phrase, Integer.toString((int) System.currentTimeMillis())}); displayRecentPhrases(); } } catch (DatabaseException e) { Window.alert(e.toString()); } } }); Friday, April 11, 2008 37

Slide 40: Questions? • Google Gears is an open source plugin that aims to push the Web forward • The components are simple to use • You need to think about your architecture • http://code.google.com/apis/gears/ • http://gears.google.com/ • Thanks for your time! Friday, April 11, 2008 38

Slideshare.net (beta)