Web Frameworks Taxonomy

1. Web Frameworks Taxonomy Anthony Berglas April 2011

2. Welcome to the JVM Meetup • Meetings maybe 2nd Tuesday each Month? • Oracle providing room, food today or when presenting. Thanks. • Presentation vs. informal talks? • Future talks ideas at end. (Seam and ADF likely.) • Security at 5:30pm Call Anthony 04 4838 8874 to get in. (Other nrs?) • www.Meetup.com/qldjvm. (These slides uploaded.) • This talk – me for 25 mins review, then to the floor. • What works for you?

3. Introduction • Separate approaches from implementations for review. • Classic procedure based MVC. • View is a Procedure that outputs HTML. • ASP, JSP / Struts, Velocity, Spring MVC, G/Rails, Simplets. • Component “MVC”. • View is an Object Graph with an Event Model (Render event). • ASP.Net, JSF, JBoss/Seam, Oracle ADF, Tapestry, Wicket • “Swingish” – server driven rich clients. • Echo2, ZK, wingS?, Developer 2000. • Client Focused, usually Plugins. “Sofea” / “Soui”. Client / Server. • Flex, Silverlight, Unity 3D, GWT, Heavy JavaScript. • End user editable tools, business object driven. • Force.com, Zoho, Quickbase… • JavaScript Libraries that can support any approach. • JQuery, Prototype, YUI, Dojo…

4. Classic Procedure based MVC <c:foreach items=“${bean.customers} var=“cust”> <tr><td><c:out value=“${cust}”/></td></tr> <x:myHomeGrownTag par=“myParam” customer=“${cust}”/></c:foreach> • View usually in some template language. • Some higher level macro tags for named Input fields etc. • Controller executes Java code before Render. Handles Redirects. • For Ajax, JavaScript can call different Server URLs. • But View is a Procedure with implicit println() • Limits components. • E.g. List component re-query database on Sort. Big Trees. Pagelets. • Only get an implicit render event. • JSPish components can never affect response to posted data. • But some can be meta data driven, e.g. Date field – widget + validation. • (Are templates really a good idea, given Subroutines abstract HTML?) • Impedance mismatch, c.f. Servlets/Simplets just code. Cause of MVC. ASP, JSP / Struts, Velocity, Spring MVC, G/Rails, Simplets – Servlet infrastructure

5. Component “MVC” <p>Raw HTML actually generates an object that can render</p><asp:GridView ID="productGridView" Runat="server" DataSourceID="productsDataSource" DataKeyNames="ProductID" > <asp:BoundField ReadOnly="True" DataField="ProductID“ SortExpression="ProductID“/>… • Above is same as form.add(new GridView…) (not println(…)) . Also HTML. • Many events, ultimately Render outputs HTML. • Can have rich interactions: Call backs, Sort database query. Client Validatn. • “Lazy AJAX” – page content submitted without page submit (state!). • Event model much more complex than procedure oriented. • Especially writing new components. JSF1 – Bad Event Model (JSP) -- List/Crud Hard, ugly EL, Heavy. (Vsn2 better) Seam – Links EJBs to JSF, removes junk (backing bean), Conversations… Oracle ADF – Tightly integrated with data model. Pagelets. Magic. Open Src? Tapestry – HTML templates. Efficient static page structure. Single Developer. <span jwcid=“@Insert" value="ognl:newjava.util.Date()">June 26</span> Wicket – Very like Tapestry. Pure Java views. Static typed. Very Stateful.

6. Thoughts on JSF 1 JSF 2 better. (Facelets certainly better than JSP) Can be partially? tamed with SEAM, ADF.

7. “Swingish” – Server driven rich client • Object graph built on Server (could be XML). Normally no HTML. • Rendered with special JavaScript library. • Browser behaves like smart X-Terminal, driven from server. Super lazy Ajax. • Complete field-by-field control of a web form without user client code. • Easy and safe • Trivial to access database, no web services, avoids data sync problems,. • Could be very chatty, one AJAX call per field, all state on Server • Events and flow heavily optimized. • (Most? useful AJAX requires server interaction anyway.) • Cool Demos, utilizing rich JavaScript components. • Not fashionable. But easy, single tier development. • (What happened to Java 7 Closures!) Echo2, ZK, WingS?, (Developer 2000). Open source. @Override public Window init() { // Echo2 final Button button = new Button("Please click me."); contentPane.add(button); ... button.addActionListener(new ActionListener() {…});

8. Client / Server – Plug ins (Sofea/Soui) • Run almost all program logic in the browser. • Backend just provides simple web services to the client. Vs. tightly coupled? • Generally Ignore HTML. • Tony O. on Flex (applies to others) • “Significantly richer UI, not just a little better, WAY better. Orders of magnitude better” (Is this still really true?) • No browser compatibility issues. None. It just works. • Security better in flex, no source code or Soap requests ever exposed. Why go to the trouble of AJAX if not for the WOW! • Requires writing code on multiple tiers. Distributed Application. • Security issues if we implicitly trust the client. • Web is just a way to deliver client / server code. “MVC is Dead.” Flash/Flex – historic leader. Appletish. New ActionScript is strongly typed. Silverlight – write .Net client and server. GWT – Also effectively a black box on the client. Heavy JavaScript. Rarely done? Client Java – as applets or as HTML Driver. Still an option. Unity 3D, Shockwave “flash”, Google O3D. (Flex is 2.5D). Titanium?

9. Locus of Control • Traditional Server only page at a time. Dead? • Gloss up with minimal fixed JavaScript widgets. • Clean, simple. • Does not confuse the user. (E.g. Meetup change button.) • Hard to do complex list forms nicely. Not Fashionable. • Lazy Ajax. • Code on server, OK for simple effects. • Hybrid – Server serves HTML with manual JavaScript. • Messy to program in two tiers • Sofea – Entire application runs on client. • Server side just implements clean web services, no UI • “Swingish” – Server Side yet highly interactive. • But no good for really interactive stuff. E.g. Animations, games. • Can be as much how to use the tools as the tools themselves.

10. Business Object Driven / RAD • UIs derived semi-automatically from business object schema. • Add a foreign key to the database, it is in the UI by default. • Business rules specified in terms of business objects, not UI. • E.g. Workflow based on information state. • Security / row permissions, audit etc. often built in. • Very quick to develop simple applications. • Allows end users to enhance and configure a standard application. • Especially important for CRM. (e.g. toothpicks) • Usually in the cloud • But what happens if the sun shines (lazybase, coghead). Force.com/Salesforce – huge app exchange. Ability for custom Uis. Zoho – Tiny pretender. Much cheaper. Quickbase – Well established from intuit. Infodome – Cute video overview. Forms + OLAPish. ADF – Not end user usable but data oriented. Filemaker – seems good. MS Access – Never really got there. Open Source – Glom, once:radix, Kexi, OpenOffice Base.

11. JavaScript Libraries • Many, for fancy controls and Ajax • Could be used for many different styles • Augment Html page oriented aps, • Implement Lazy Ajax, • Implement Swingish, • Build Sofea client oriented code. • HTML 5 adds more and more to JavaScript. • VML / SVG / Canvas mess. JQuery Prototypes Dojo YUI Svg2Vml? … “Of YUI, DOJO, Prototype YUI easier to understand better documented”

12. Conclusion • Two issues, the approach and the implementation. • Sofea is becoming very fashionable, Is MVC Dead as some claim? • What about Swingish? • Is rich data binding important? • User extensibility (Force.com)? • Or is simple procedural MVC all that we need for normal applications? • Technology now hugely complex – can be hard to debug. • “I no longer know how Wicket works” Jonathan Locke, creator. • Many paths, much confusion. • People’s actual, practical experience?

13. Some References • Tapestry vs Wicket http://stackoverflow.com/questions/657352/difference-between-apache-tapestry-and-apache-wicket http://www.ibm.com/developerworks/java/library/os-tapestrywicket/index.html?ca=drs Tapestry Static Page, Wicket Dynamic. Tapestry 5 not backward compatible. Tapestry one main developer (HLShip), Wicket Community. Tapestry slightly less code, but less static typing. • JSF vs Wicket/Tapestry http://ptrthomas.wordpress.com/2007/05/14/a-wicket-user-tries-jsf/http://paulszulc.wordpress.com/2009/05/19/jsf-sucks-wicket-rocks/ http://swik.net/Peter-Thomas/Incremental+Operations/Seam+%2F+JSF+vs+Wicket:+performance+comparison/cp1je -- Wicket much faster and less memory (order of magnitude). • ADF http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html • Other MVCs: Click, Stripes, • All http://www.slideshare.net/mraible/comparing-jsf-spring-mvc-stripes-struts-2-tapestry-and-wicket-presentation