Google Mashup Editor Mike Evanoff - Google

1. Google Mashup EditorMike Evanoff - Google

2. Big Picture Overview • You need a Gmail account • Code is edited using your Web Browser • Code is stored on Google servers subject to the Apache 2.0 open source license • Pages are hosted from Google servers • Simple GME tags are translated into JavaScript by Google servers.

3. Press Release Hype • Google Mashup Editor makes mashup programming easier for developers familiar with HTML and JavaScript. • Google Mashup Editor enables developers to use AJAX user interface components on top of existing feeds and Google's web services. • Developers use an online code editor and extended XHTML tags to create applications that read and write feeds. • Google Mashup Editor is an experimental product. We believe that by making it easier to program mashups, users will benefit from a better web experience with more websites displaying information they care about. • Google hosts the mashups and authenticates users so the developer can focus on mashup creation.

4. Created with GWT • Google Web Toolkit was used to develop the Mashup Editor • GWT lets you develop in Java and then port to JavaScript • Used to develop complex AJAX-based applications for your web browser • GWT “brings software engineering to AJAX”

5. Create Your App

6. Push the “Test” Button

7. Publish and View

8. Based on a lot of Google services

9. Complex Back-end Architecture

10. The product consists of three parts: • The Mashup Editor, which is itself an AJAX application. • A server-side hosting framework, which provides developer services (e.g., source code management via Google Code project hosting) and mashup services such as Google Base and a data store that can be accessed via feeds. • A JavaScript client library that implements the mashup UI controls and data processing functionality. The server-side components leverage Google's scalable infrastructure and provide access to Google services via the Google data APIs protocol; the client-side components were developed exclusively using the Google Web Toolkit.

11. Problem: Three skill sets needed for mashups • Feeds • Fetch, parse and manipulate feeds • Create and syndicate new feeds • User Interface • Basic understanding of principles AJAX/JavaScript • Cross browser compatibility • Infrastructure • Setting up scalable server and hosting • Creating and saving data in a database

12. Solution: Simplifying Feeds • Common format for processing and creating feeds • Simple way to parse and access elements in a feed • Common query mechanism across feeds

13. Solution: Simplifying User Interface • Common set of AJAX UI elements • Cross browser compatible • Simple declaration of AJAX components • Similar to using html tags • Flexible way of using UI controls programmatically

14. Solution: Simplifying Infrastructure • Hosting or server infrastructure with no set up • Simple data store modelled after a feed • Ability to sandbox application for testing • One click deployment of application

15. Anatomy of a GME App <gm:page title=“Digg Reader” authenticate=“false”> Optional CSS and HTML Modules <gm:list id="myList" template="diggItems" pagesize="10" data="http://www.digg.com/rss/index.xml" /> Templates <gm:template id="diggItems"> <table width="50%"> <tbody repeat="true"> <tr> <td><gm:text ref="atom:title"/></td> <td><gm:text ref="digg:diggCount"/> diggs</td> </tr> <tr> <td><gm:html ref="atom:summary"/></td> </tr> </tbody> </table> </gm:template> Optional Javascript </gm:page>

16. Demo of the Editor and a Simple Mashup

17. More Information • Editor: http://editor.googlemashups.com • Gallery: http://gallery.googlemashups.com • Google Code: http://code.google.com