• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google Dev Fest Presentation

Google Dev Fest Presentation



Description of our experience developing TouchActive using Google App Engine and Google Web Toolkit

Description of our experience developing TouchActive using Google App Engine and Google Web Toolkit



Total Views
Views on SlideShare
Embed Views



3 Embeds 10

http://www.linkedin.com 6
http://www.techgig.com 2
https://www.linkedin.com 2



Upload Details

Uploaded via as Adobe PDF

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Google Dev Fest Presentation Google Dev Fest Presentation Presentation Transcript

    • Google App Engine &Google Web Toolkitour experiencedevelopingTouchActiveAndrew MackenzieDaniel RuizBCNTouchhttp://ta.bcntouch.com
    • The purpose of this talk● Share our experiences using GAE and GWT● Help guide you if you are considering similar technologies● Provide ideas if you are already developing with these technologies● Provide feedback to Google on things to maintain, improve and renew/drop
    • Contents ● SolutionOur Project ● PaaS choice ● GAE overview ● GWT overviewGAE + GWT ● GAE + GWT debugging ● TouchActive implementationImplementation ● Addit ● Optimization tools ● Phonegap experimentSummary ● Avoiding lock-in ● What would we do differentlyFeedback ● Feedback to Google
    • Our Project
    • TouchActive Platform- what we built Brand A platform to put Using tagged consumers and products that thebrands in touch with consumers were each other interested in Consumer
    • Mobile apps to read tagged products - NFC, QR, barcode Scalable store in the cloud with product Cloud service and data and data storage synchronization of user data Mobile apps read products tagged with various technologies Get product information, helpremember, organize in lists, etc. Focus on easy and intuitive interaction with no data entry. NFC the best.
    • Get information about productsfrom tagged objects
    • Management console for brand- multi-tenant, groups, roles Access control on changes Cloud service and data storage Products findable in open queries from mobile devices
    • Consumer Web Interface- Lists, Products, History, etc Mobile web version for mobile platforms without a native app Addit "Web Clipper" to capture products from web pages User data synchronized with native mobile app Cloud service and data storage
    • Social networks, Identity and SharingLeverage existinguser identities for easy sign-up(web and mobile) - OpenId and OAuthSharing of Products, Lists via:● Social Networks● EMail● NFC Tags● NFC peer-to-peer● QR codes● Bump
    • TouchActive Solution Overview- what we built
    • TouchActive Solution Overview- what we built Desktop and Mobile IdentityManagement consumer web Providers console Addit Sharing (web and mobile) over net and Cloud backend face-to-face Mobile Apps Tagged products
    • Context for our choices2+ years ago● Start Small ○ pre-start-up: build prototype ○ uncertain financing (probably small) ○ small team of engineers● Think big, or the possibility of big!● Uncertainties ○ Mobile platforms (especially NFC) ○ Cloud computing platforms
    • CoolingPower / UPS Security Buildings
    • LAMP stack on owned Amazon Web Services Google App Engine or hosted HW (AWS) (GAE) small start-up, low Newer options: capital investment. ● OpenStack (Open SW, multiple service Pay as you go, dont providers) buy servers. ● Windows Azure ● Amazon features for auto scaling, etc.unknown/unexpected demand we dont spend people time and money on managing servers, runtimes, etc. Focus on the application. chose GAE Cooling Power / UPS Security But we didnt want to get "locked-in" Buildings to a single service provider
    • Applications developedwith GWTAdWords AdSense Orkut Wave Health BloggerAnd many more, see: http://gwtreferencelist.appspot.com https://developers.google.com/web-toolkit/developer_spotlight http://gwtgallery.appspot.com/ http://www.quora.com/What-web-applications-use-Google-Web-Toolkit-(GWT)
    • Google Web ToolkitComplex UI Complex UI with graphical Data representation
    • GAE + GWT10
    • Google App Engine Features● Free developer / Pay-as-you go costs● Platform not Infrastructure ○ No need to architect the SW stack for scalability ○ No need to manage the SW stack ○ No machine administration ○ Reasonable set of platform services● Scalability ○ Instances created automatically based on demand ○ Scalable, distributed, datastore ○ Content Distribution Network (CDN) ○ High-performance Image service
    • Google App EngineTools and LanguagesLanguage choices at the time: Java and Python ○ Now "GO" is also available nowWe chose Java ● Developing J2ME and Android mobile apps in Java at the same timeEclipse IDE ○ Local development server ○ Java debugging of server codeAppstats for server performance analysis (RPC)Management dashboardCommand line tools and ANT tasks for automation
    • Google App EngineDatastore Datastore Megatable BigTable GFS2 Advantages Drawbacks● Scalable ● Pay-per-use● Time vary with result set ● NoSql & pre-built size, not search set size indexes● Compatible with existing ○ No JOIN operations frameworks ○ No inequality filters on more ○ Java Data Objects (JDO) than one "field" ○ Java Persistence API (JPA) ○ No filtering of data based on● Distributed, replicated subqueries across data centers ○ No Grouping of results ● Write rate limited
    • Google App EnginePlatform ServicesStandard Implementations Non-Standard● Mail (JMail) ● Cron Tasks● Datastore (JPA/JDO) ● Task Queues● MemCache (JSR107) ● Back-ends● Logging (Java Logging) ● Users (Identity) ● Blob Store ● Image Service ● Chat (XMPP/Jabber) with Presence ● Channels API (Push)
    • Web Client DevelopmentGoogle Web Toolkit● Develop Javascript AJAX client with Java ○ Strongly, statically, typed language. ○ Many errors caught at compile time ○ Full IDE support (completion, etc) ○ Internationalization (i18n) built-in ○ Generates optimized JavaScript, client bundles, code splitting, etc. ○ Hides browser differences ■ Compiles a "permutation" for each language and browser you support● Integrated Server and Client development project ○ Java across Server and Client ○ Shared classes between Server and Client ○ "Transparent" RPCs between server and client (takes care of
    • Web Client DevelopmentGoogle Web Toolkit● Deferred binding with "properties" ○ Used for loading script variants based on browser, language, form factor, etc● Reasonable Widget set ○ Has improved a lot ○ Other widget sets available on top (GXT from Sencha, SmartGWT, Vadim, etc)● "DevMode" ○ Java debug experience in IDE for client side code ○ Combined Client/Server/RPC debug experience ○ No-compile, fast turn-around, hot code replace ○ Memory intensive! :-(
    • Web Client Development Google Web Toolkit imageEncourages reusablemodular code development● Custom widgets● Code in defined "modules" (server/client/shared code, RPCs, html, css, images, etc)● Bundle modules into GWT libraries (.jar)
    • Web Client Development Google Web ToolkitEase of implementingDesign Patterns● Model-View-Presenter with late-binding of views● Same Presenter, different Views● Detect Form Factor from UA and serve the most appropriate view at run- time
    • Google Web ToolkitLate-Binding of views with ClientFactory TouchActive.java TouchActive.gwt. xml
    • Google Web ToolkitLate-Binding of views with ClientFactory TouchActive.java Desktop Mobile
    • Google Web ToolkitMVP, Activities & PlacesEvent-Bus across client code forsubscribe/broadcast eventprogrammingApplication Activity and Placemanagement via browser history History Token
    • Google Web ToolkitUiBinder (XML) for declarative layout With standard or custom widgets
    • GAE/GWT Debug experience:An example Click Event on Facebook sign in button
    • GAE/GWT Debug experience:Client debugging
    • GAE/GWT Debug experience:Server debugging
    • GAE/GWT Debug experience:Client debugging
    • Implementation20
    • Our implementation of TouchActivewith GAE + GWT ● Authentication / Identity management ● Architecture overview ● Data Persistence Layer ● Platform API ● Portability ● CMS Integration ● Addit
    • Authentication:Own, portable, Identity management● Created own User Object and related to standard external accounts ○ OAuth (FB, Twitter, LikedIn) ○ OpenID (Google, Yahoo, MySpace, ...) ○ Google Apps domains for company users● Username + Password also● Avoid forcing users having to have a Google account● Use OAuth & OpenId on mobile apps transparently for account creation and sign-upAvoided lock-in, didnt use Google App Engine UsersService
    • Architecture Overview Request ● Headers, cookies, ... Servlet FiltersRequest App LogicContext Platform API Data Persistence Layer Platform Specific Services
    • Servlet Filters● Flexible, just map filters to servlets with a config file using paths ○ /api ○ /rpc ○ /cms ○ /static● Keeps servlet code clean and modular● Used for: ○ Language selection ○ Desktop/Mobile pages while maintaining constant URL ○ Authentication + assignment user to their Multi-Tenancy namespace ○ Query logging for analytics
    • Servlet Filters: EntryPoint Filter (The Special One) Request ● Headers, cookies, ... EntryPoint Filter Servlet Filters Request Context● Different types of EntryPoint filters that set different permissions and tokens ○ Initializes the Request Context used in your app and DataManager ○ Use of Thread variables to make available to all code but multi-threaded● Authenticates the user and sets the correct "Namespace" in the request context● Defined the appropriate filter for each request based on Access Control rules in web.xml
    • Data Persistence LayerRequestContext DataManager I/F to rest of app Data Manager JDO portable library across multiple datastore implementations Google Datastore MySQL Google AppEngine AWS MySQL Server
    • Data Persistence LayerDataManager Interface DataManager I/F to rest of app● Created an API to manage data objects for reading and writing Data Manager● DataManager layer is used by all app, app is kept 100% portable JDOData Objects● ACL, Protected, Global, etc...● Enforce visibility and Google Datastore MySQL permissions according to filters used on request and object type MySQLMulti-Tenancy Google AppEngine AWS Server● Create data areas in the same datastore● Avoided using Google Datastore Namespaces
    • Platform Specific Services App LogicDefined a Platform API for platform dependant services GAE Implementation Other Implementation Cron Tasks Cron Tasks Task Queues Task Queues Blobstore Blobstore Image Service Image Service Custom build process Chat (XMPP) Chat (XMPP) outside IDE ● ANT tasks to build, deploy, test, Channels (Push) Channels (Push) release ● Run manually from Command Line or scripts / cron ● Significant effort
    • Additional Need:Web content beyond the appEditable by non-programmersNo need for application release on each changeLocalized to multiple languagesUse a CMS GWTCMS Content
    • Integrating a CMSChose to serve content, scripts and RPCs from same domain ○ Deploy CMS to same GAE "appID" as our app ○ This could maybe be avoided with subdomains...Chose Vosao GAE/J based CMS ○ A bit immature at the time....still < 1.0 ○ Uses Apache Velocity (Java based) scripting language ○ Java plugin can integrate tightly with your app and call app code directly from within CMS web pages ○ Has locked us in to GAE at CMS level, but our code is still portable ○ Manual integration of config files, with help from Vosao team it could be automated
    • Internationalization (i18N)● Client GWT UI ○ Built-in i18N support in GWT, strings in property files ○ Permutation of script compiled for each language and correct language loaded at run time● Server messages ○ We have avoided as much as possible ○ Java Message Bundle + Properties files● CMS content ○ Core feature of CMS. Individual strings or entire pages can be localized with common template
    • Other Features30
    • Other features implemented● Chat functionality with server (XMPP) ○ used for testing at the moment● "Presence" detection of users (XMPP)● Push messages to browser using the GAE Channel API ○ GWT Client JSNI Wrapper and EventBus connection● "Addit" Bookmarklet and "web-clipper"
    • Addit -Objectives● Help users create products in TouchActive by capturing product from any web page● Reduce need for data entry by capturing as much data as possible automatically ○ Use eCommerce/Search meta data when available● Relatively simple and easy to use● Broad usage ○ Support all main web browsers ○ Support as many web sites as possible ○ Desktop, Tablet and Mobile versions
    • Product meta-datameta and micro-formats used by eCommercesites to provide data to search engines orcrawlers:Various Standards Exist:● Facebook ○ OpenGraph "product"● Schema.org● GoodRelations● GoogleProducts ○ Google Merchant Center / Google Product Search● hProduct
    • Google Product Search
    • Addit Installation Drag and drop bookmarklet from web-page to bookmarks bar or folder Install extension directly ● From Chrome Web Store ● Chrome, Safari, Firefox from web page
    • User clicks either theAddit Use Bookmarklet or the Extension button (FF, Safari, Chrome)
    • Addit Detect language from Load localized script from cloud server and injectedScript loading page contents into the page Keeping script out of the bookmarklet or extention allows us to update the script continually, without any re-install or redistribution to users Script NOT from Same- Origin as page and security concerns and barriers to overcome
    • Addit Fetch user lists and detect currencyFetches users lists from their TouchActiveaccount using a Cross-Domain "JSONP" RPC call Select default currency based on page language, page contents and user settings retrieved with lists
    • Addit product meta-data parsingParse DOM and detect micro-format product markup elements.Prepares products for user automatically If multiple products detected, a simple product selector UI is shown initially If no product detected,uses page-level markup (meta, OpenGraph) or general page information (Title, etc)
    • AdditPersonalize and save to account Users take the suggested texts, or customize them. Select image, price, etc. Select one of their own lists they would like to add the product to Add a personal note ... and "Addit" to their TouchActive account Will be automatically synced with their mobile app
    • AdditDifferent layouts for different form factors Desktop MobileWider, no vertical scrolling, smaller mouse targets Narrower (adjust to Viewport), vertical scrolling, larger touch targets
    • All Developed in GWT● GWT XSI Cross-Site linker for CORS script loading● Wrote own JSONP library for Cross-Site RPC ○ in Java with some JSNI● GWT "late run-time binding" of scripts for Localization and Form Factor permutations using custom "Property Providers" ○ Detect "best guess" language from host page using multiple methods (poor standards implementations) ○ Detect form factor using a combination of User Agent and display size● Avoid older Layout Widgets that compile down to HTML Tables (Box Model and CSS problems...)● Fast product meta-data parsing from DOM using "querySelectorAll()" and CSS3 selectors
    • Difficulties - mainly due to injecting ascript into a page you dont control● Unknown, uncontrolled CSS / DOCTYPE / QuirksMode ○ Cant just do a "CSS Reset" ○ CSS properties influence complex layouts ○ DOCTYPES affect browser behavior (a nightmare on IE 7/8/9)● "Difficult" sites ○ Dont follow W3C standard for language selection ○ iFrames/Frames/Frameset based ○ Flash sites! ○ Broken image links● Different implementations of product markup standards ○ Especially prices "," vs "." EUR vs € before/after/middle (1€25)● JavaScript image galleries and tricks ○ Images loaded but not visible ○ Images being pre-cached (not always in DOM as image)
    • IE and DOCTYPE and QuirksFor masochists only!http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx
    • Phonegap ExperimentQ Can you take a GWT compiled app (HTML, CSS, JS, Images etc) and create a "native" app for multiple platforms?A Kind-of...● GWT RPCs from Phonegap client to server! ○ Must be able to go cross-domain ○ We wrapped the RPC class so that it remaps the RPC endpoint to default server when running "offline" ○ Version problems expected with serialization in the future!!● Phonegap has problems with relative file paths ○ Processed GWT comiled output to use absolute paths● Prototype produced from existing GWT app ○ Automated with ANT tasks
    • Optimization40
    • Optimization Tools AvailableChrome Developer Tools "Audit"PageSpeedAppStats for server GAE internal RPCSpeedTracerSpeedTracer with AppStats
    • Chrome Audit
    • Page Speed
    • GAE AppStatsunderstand AppEngine RPC usage
    • AppStatsdrill-down to calls, duration and latency
    • SpeedTracerUnderstanding client side performance
    • SpeedTracerNetwork resource usage from client Resource Loads ● HTML ● CSS ● JavaScript
    • SpeedTracer (client) integrated withAppStats (server) RPC request to server Server side trace and timing from AppStats on server
    • Whats new in GWT2.5● Super Dev Mode (experimental) ○ Replaces DevMode, uses "SourceMaps" in Chrome to enable debugging in language JS was written in (Java, Dart...)● New compiler optimizations ○ Smaller, faster JavaScript code ○ With slightly longer compile times● Elemental ○ Lightweight JavaScript library● Updated ARIA support● UIBinder enhancements● Validation enhancements
    • GWT Compiled codesize reductions GWT 2.4 100% GWT 2.5 93% GWT 2.5 Closure Compiler 87%
    • Summary40
    • Did we avoid provider "Lock-in"?Portable data layer built on JDO● Maybe not the most optimal when running on GAE● Have to work with limitations of JDO/GAE subset● Over time, actually moving the data becomes a problemPlatform API has kept rest of code portable● needs work to get running on additional platformsGAE based CMS has increased it● outside of the code, but still important for the project● decouple by moving to multiple domain approach
    • Things we would do differently if we started againNew competitors to GAE ● New AWS services bring it closer to PaaS ● OpenStack from multiple Analytics providers ● Analyze more closely and prototype if time permits Phonegap app API and directory structure CMS
    • Things we would do differently if we started againNew competitors to GAE Analytics ● Avoid programming a lot of that, and falling short Phonegap app ● Expose analytics data and use external tools ● Give business users top- API and directory class tools with flexibility of structure analysis, drill-down etc CMS
    • Things we would do differently if we started againNew competitors to GAE Analytics Phonegap app ● Design and structure web-app for that from day one API and directory structure CMS
    • Things we would do differently if we started againNew competitors to GAE Analytics Phonegap app ● Assume you will have toAPI and directory structure version your external API ● Design app structure early on ○ statics, resources, API, CMS CMS, RPC,...
    • Things we would do differently if we started againNew competitors to GAE Analytics Phonegap app API and directory ● Explore using other CMS structure outside of GAE ● Sub-domains for "Single- CMS Origin" content, RPCs
    • Possible Future Work● Optimize ○ Using tools to focus our efforts ○ More use of memcache for DS accesses● Explore use JDO3 (Polymorphism)● Prototype alternative CMS ○ Run on sub-domain in parallel● Write platform code for other platforms ○ Test on AWS or OpenStack?● Phonegap app for other platforms ○ Blackberry, Windows Phone...● Investigate Continuous Integration Support ○ Jenkins on GAE
    • GAE + GWTThe Good● Scalable, without knowing about or managing the stack● Free for developers, our costs have been pretty low● Java across mobile, backend and client● Programming large app "all together" as client-server ○ But avoid that permitting spaghetti, structure APIs and code ○ Hierarchy of reusable modules of client, server and shared code ○ Drop-in GTW libraries with client, server and shared code● Excellent debug experience when it works! ○ including hot code replacement (server + client)● Model-View-Presenter architecture combined with late- binding ○ extend your app to mobile, tablet views more easily● UI Binder for declarative UI layout, code for behavior
    • GAE + GWTThe BadDevMode problems● Lack of maintenance on browser plug-ins● Memory intensiveYou have to put in effort to avoid "lock-in"JDO● Some people reporting long start-up times (meta-data related) ○ Has worked pretty well for us● Some features missing: e.g. No Async writes
    • Feedback44
    • Feedback for GoogleApp Engine● Dont introduce features or ways to use features that increase lock-in. ○ If you do, we will go to "standard" stacks on AWS or OpenStack... ○ e.g. threads, etc● More transparency on Billing and scheduler behaviour● Need better attention to developers in forums ○ Paying customers! ○ Especially around scheduling and billing - invest people hours in this● Channels API ○ Support multiple listeners per page and broadcast ○ Google supported JSNI GWT library
    • Feedback for GoogleGWT Debugging Dont break the debug experience!● Combined server/RPC/client debug experience in a single IDE is fantastic and unique (?) in developing an AJAX client - cloud server application ○ Make it better! More maintenance of plug-in ○ Support at least on Chrome / WebKit browser ○ Less of a memory hog● GWT 2.5 SuperDevMode does not replace it IMHO ○ list of limitations of seems to outweigh the advantages ○ main advantages (plug-in maintenance) are for Google
    • Feedback for GoogleGWT - others● Allow client-only code and server-only code in same file ○ E.g. Via @annotations ○ Avoid having to complicate the class hierarchy to have shared/server-only/client-only code for a class● Java Calendar emulation in GWT and allow for shared-code date handling
    • Thank You! Questions? Andrew Mackenzie andrew@mackenzie-serres.net andrew.mackenzie@bcntouch.com http://www.linkedin.com/in/andrewdmackenzie Daniel Ruiz Giménez druizgimenez@gmail.com daniel.ruiz@bcntouch.com http://www.linkedin.com/in/danielruizgimenez http://www.slideshare. net/andrewdmackenzie/developing- touchactive-with-gae-and-gwt-google-50 devfest-barcelona-2012