Ext JS versus GWT

1. Ext JS versus GWT Alex Chapman and Michelleta Razon

2. Agenda • Teradata Overview • Evolutionary Architecture • Determining the Direction • What is GWT? • Why GWT? • A GWT Example • Questions and Answers

3. Teradata Corporation – At a Glance • Teradata Corporation – Launched October 1, 2007 • S&P 500 Member - NYSE Symbol TDC • Leader in Enterprise Data Warehousing • Positioned in Gartner’s Leader’s Quadrant in data warehousing since 1999 • An end-to-end solution companyfocused solely on data warehousing • EDW/ADW Database Technology • Analytic Solutions • World Class Customer List • 1,000 customers and 2,400+ installations • 6,500+ employees • 25 Java Developers in Raleigh

4. Teradata Financial Performance Revenue Quarterly Results – Q3 2009 • $425M revenue • $88M operating income • GAAP earnings per share $0.36 Annual Results – 2008 • $1,762M revenue • 4% growth over FY 2007 • $333M operating income • GAAP earnings per share $1.39 Operating Income

5. 1,000 Customers Around the World

6. InformationWeek’sTop 10 Most Strategic Vendors IBM SAP Microsoft Oracle Cisco Hewlett-Packard TERADATA VMware EMC Your Outsourcer • “ [Teradata] is unbelievably good and has been a big help to us.” • – Patrick Byrne, CEO, Overstock.com • “ The smallest among our ranked suppliers, with annual revenue of $1.71 billion (slightly below VMware’s $2 billion), this former NCR unit is nonetheless among the most strategic. Marquee customers like Wal-Mart, Coca-Cola Enterprises, eBay, and Overstock.com attribute much of their success to the competitive intelligence they mine through their ‘partnership’ (and that’s the word they use most often) with this leading data warehouse and analytics software vendor.” • – InformationWeek Source: “Down To Business: The 10 Most Strategic IT Vendors”, InformationWeek, Feb. 19, 2010

7. Master Data Management Create a single environment where master data can be consistently described, used, synchronized and stored Customer Management Build enduring, lasting and profitable relationships with customers through superior customer management Finance and Performance Management Improve the speed and quality of financial reporting, reduce finance infrastructure costs, and proactively manage enterprise performance Demand Chain Management Increase customer service levels and sales while reducing inventory, by understanding and accurately predicting demand by store by item Supply Chain Management Improve supply chain operations for higher yields, improved customer service, reduced cycle times, and lower inventories Profitability Analytics Make better decisions by leveraging key customer data to calculate the true value of customers, products and services Teradata Integration Suite for SAP Take advantage of certified integration across the SAP NetWeaver stack, delivering seamless integration and leveraging analytical delivery tools already in place Teradata Analytical Solutions Leverage Enterprise Intelligence to Solve Business Problems

8. “It is not necessary to change. Survival is not mandatory.” –W. Edwards Deming

9. Evolutionary Architecture • Incrementally build and improve software architecture while accommodating • Changing Business Requirements • Changing Competitive Environment • Advances in Technology • Change is the only constant. • For continued success and survival there must exist Continuous Improvement.

10. Evolutionary Architecture • Driving Continuous Improvements • Application Goals • End-user focus • Increase usability • Build a more interactive user experience • Architectural Goals • Technical debt • Technology upgrades – (Spring, Hibernate, JavaScript libraries) • Eliminate unnecessary customizations • Developer productivity • Reduce development overhead • Increase testability

11. Evolutionary Architecture • Driving Continuous Improvements • Make it Faster • Improve response times across application • Consolidate resources and streamline CSS • Leverage sprites and better image formats • Reduce styling overhead • Optimize JavaScript • Remove poor performing parts • Reduce browser reflows • Reduce page loads • Browser-based application • Lessen re-work done by the browser on each page load

12. Technology Spike • Determining the direction • Evaluated three technology approaches: • JavaScript widget library: Ext JS • Java widget library: Ext GWT • JavaScript: DOM Scripting • Eliminated this option due to resource restrictions • Spent half of 2009 attempting to increase staff in this area • Parallel Proof of Concepts • Developed a tracer application with each approach • Integrated with existing Service Layer • Leveraging same UI layout • Analyzed the challenges and benefits from the architectures • Result • We determined that a front-end architecture based upon GWT was the best strategy

13. What is GWT? • Google Web Toolkit • Provides a set of Java APIs and widgets in a SDK that allows developers to write AJAX applications in Java. • Java source code is compiled into highly optimized JavaScript that runs across all browsers, including mobile browsers for the iPhone and Android, as well as, the iPad.

14. What is Ext and GXT? • Ext JS • Cross-browser library for building rich internet applications in JavaScript. • Ext GWT (GXT) • Java library for building rich internet applications with GWT. Provides an additional set of rich widgets to compliment the GWT framework components.

15. Why GWT? • Cross-browser compatibility made easy • Automatic Code Optimizations • Increased testability • Improved developer productivity

16. Cross-browser compatibility • The GWT compiler produces JavaScript that is compliant and optimized specifically for each browser. • Ext JS provides similar cross-browser compatibility. • Must ensure that JavaScript produced by developers is compliant, as well. • The Ext JS Spike leveraged tools like JSLint, which can be integrated into the IDE and the continuous build environment to help enforce syntactic compliance. • Not as efficient in preventing errors • Cross-browser JavaScript error in first Sprint Review for the Ext JS Spike

17. In-lining Replacing a functional call with the contents of the function Before In-lining function unusedFunction(note) {    alert(note['text']);  }  function displayNoteTitle(note) {    alert(note['title']);  }    var flowerNote = {};  flowerNote['title'] = "Flowers";  displayNoteTitle(flowerNote); Code Optimizations After In-lining var a={}; a.title="Flowers"; alert(a.title);

18. Code Optimizations • Elimination of dead code • Unused functions are removed Before Code function unusedFunction(note) {    alert(note['text']);  }  function displayNoteTitle(note) {    alert(note['title']);  }    var flowerNote = {};  flowerNote['title'] = "Flowers";  displayNoteTitle(flowerNote); Code after compilation var a={};a.title="Flowers";alert(a.title);

19. Code Optimizations • Minification • Removing white spaces, new lines, etc Before Minification function unusedFunction(note) {    alert(note['text']);  }  function displayNoteTitle(note) {    alert(note['title']);  }    var flowerNote = {};  flowerNote['title'] = "Flowers";  displayNoteTitle(flowerNote); After Minification var a={};a.title="Flowers";alert(a.title);

20. Code Optimizations • Obfuscation • Renaming variables and functions Before Obfuscation function unusedFunction(note) {    alert(note['text']);  }  function displayNoteTitle(note) {    alert(note['title']);  }    var flowerNote = {};  flowerNote['title'] = "Flowers";  displayNoteTitle(flowerNote); After Obfuscation var a={};a.title="Flowers";alert(a.title);

21. Code Optimizations • Code splitting • Loading JavaScript for browser-based applications can take a significant amount of time • Volume of JavaScript increased due to more work being performed on the client • Segmenting an application into multiple JavaScript fragments • Reduces application start-up time for browser based applications • Code is loaded when it is needed • Pre-fetching is also available using GWT

22. Code Optimizations Before Code Splitting public void onModuleLoad() {      Button b = new Button("Click me", new ClickHandler() {         public void onClick(ClickEvent event){          Window.alert("Hello, AJAX"); }      });        RootPanel.get().add(b);    }  } Code Splitting Example public class Hello implements EntryPoint {    public void onModuleLoad() {      Button b = new Button("Click me", new ClickHandler(){        public void onClick(ClickEvent event) {          GWT.runAsync(new RunAsyncCallback() {            public void onFailure(Throwable caught) {              Window.alert("Code download failed");            } public void onSuccess() {              Window.alert("Hello, AJAX");            } });  }      });        RootPanel.get().add(b);    }  }

23. Code Optimizations • Optimizations for Ext JS • Similar optimizations can be achieved via developer coding or by using an external product such as the Google Closure compiler. • Requires very senior JavaScript developers with understanding of the different JavaScript engine implementations. • NOTE: When using Closure compiler on hand-written JavaScript, care must be taken to package code correctly or the compiler could produce errors. For example, if JavaScript functions are not packaged with their references, then the functions will be eliminated as dead code.

24. Increased Testability • Increased unit test penetration • Judicious separation of concerns allows for unit testing of the presentation layer in Java • User Interface testing • Testing the JavaScript produced by the platform is actually testing GWT (or GXT) • Need to test screen behavior using the tools designed for this purpose (Selenium, Silk)

25. Developer Productivity • Our Technology Spikes showed that a senior Java developer could be as productive writing a web application using GWT as a senior JavaScript developer using ExtJS. • Common Misconception: GWT does not dismiss developers from understanding client-side development in JavaScript. In fact, developers need to be even more aware of the technical concerns of front-end development. GWT does shield developers from some of the easy errors that can be made during JavaScript development.

26. A GWT Example • Anatomy of a GWT Project • Client versus Server code • GWT packages client and server code into separate packages in the web applications • Code in the client package will be compiled into JavaScript and run in the browser. • Code in the server package will be compiled into Java byte code and executed on the Servlet container. • Host Page • Jsp or HTML page that references the JavaScript source code generated by GWT to bootstrap the application. • Entry Point • Each module must provide an entry point class which implements the GWT EntryPoint.onModuleLoad interface. • Modules can implement more than one entry point, in which case the entry points will be loaded sequentially.

27. GWT Example • Eclipse Hello World code walk-through

28. Lessons Learned • Ext GWT • Reduced developer control over the client code • Integrating with custom JavaScript components • JavaScript Native Interface (JSNI) • Odd Syntax • Lack of strong documentation • Leveraged Ext JS documentation, as the libraries are mostly parallel

29. References • GWT: http://code.google.com/webtoolkit/overview.html • Ext JS: http://www.sencha.com/products/js/ • GXT: http://www.sencha.com/products/gwt/ • JS Unit: http://www.jsunit.net/ • JS Lint: http://www.jslint.com/ • Emails: • Michelleta.razon@teradata.com • Alex.Chapman@teradata.com

30. Questions and Answers