how to choose a web framework

HOW TO CHOOSE A WEB FRAMEWORK

…and be surprised

Jose María Arranz Santamaría Agosto 2010

Jose María Arranz August 2010

... and be surprisedHOW TO CHOOSE A JAVA WEB FRAMEWORK

2

Choosing the appropriated web framework which fits – Your requirements, needs,

convenience, desires, taste…

Is not an easy task This will be a path, with

some criteria we will discard options

THE PROBLEM OF CHOOSING



3

These slides propose and advocate some criteria to pick the right framework

Advocating for freedom of choice, of design, robust, secure…

May be you do not agree with everyone– I must to try… :)

THE PROBLEM OF CHOOSING



4

Frameworks, Frameworks, Frameworks!!

Click



5

Many of them are very similar

Some strong criteria are very important

Most of frameworks can be classified by groups

CALM! you will see, THERE ARE NOT VERY MANY!



6

The Java platform is the most robust, secure, speediest and richest for web development

CRITERION: JVM in server



7

Flash/Flex, Silverlight…– Will be replaced by HTML 5 in

a short future– HTML/CSS/JS is more flexible

and open than Flash/Flex– Data applications do not need

to be so “baroque”– Flash/Flex: SEO compatibility

is not easy

CRITERION: Web Client



8

Coding in JavaScript– Unmanageable when code grows

• Not typed, not compiled, not true OOP• Hard to organize• Hard to debug and test• Tends to generated cryptic code

– Hard to divide the work to do• Hard to divide the code in archives

– Slooow– Impossible for Single Page Interface

apps.

CRITERION: “Client-Centric”??



9

Coding in JavaScriptDo you really want to code this

way?

CRITERION: “Client-Centric”?? (cont.)



10

Coding in JavaScript: the myth of Rich Interface Application = JS Library– RIA = beautiful web, Single Page Interface,

with movements and opacity changes– Beautiful Web

• Good design of HTML, CSS, images (nothing to do with JS)

– Single Page Interface• Partial changes of the page (client-centric is not

implied)

– Movements and opacity changes• Funny games with style attributes and timers• The only case a JS library is very useful




11

Coding in JavaScript NO THANKS!!




12

GWT– Allows coding JS in Java– GWT compiles Java code as

JavaScript sent to the client– Visual logic (and some business

logic) is executed only in client– Solves the problem of coding in JS– BUT MORE PROBLEMS

REMAIN…




13

Visual Design is programmatic or with specific IDEs – Bye web designers

Components “black-boxed”– Almost only CSS customization

Cryptic generated JS– Only debugging in Java




14

Paranoid server– No confidence with client (and everything is

there)– Duplicity of checking/validations

Client-server custom communication data bridges (GWT-RPC)

Duplicity of data management in client and server

SOFEA: utopian approach– Impossible sending SQL from browser– Eternal fight about what is on each side




15

In “server-centric” business logic and visual logic are executed in server– The server generates markup and/or

JavaScript• No need of JavaScript programming

– Data and visual state are together– Safer– Better options for freedom of web design

(templates)– Easier Search Engine Optimization

compatibility– Rule: life in server is more comfortable

CRITERION: “Server-Centric”



16

LET’S LOOK BACK

JVM in serverWeb ClientServer-Centric



17


Click



18

Initially are very productive But they become a

problem when – The source code grows (1000

classes?)– Several persons in the same code– IDEs cannot help very much

Slooowhttp://www.codecommit.com/blog/java/groovys-performance-is-not-

subjective

CRITERION: Dynamic Language??



19

Can you live without a true “Find Usages” of NetBeans?

Can you live without refactoring tools?

CRITERION: Dynamic Language?? (cont.)



20

The compiler gives us robust and speeder code– Compiler is your friend

Tools like “Find Usages” and “Refactor” (NetBeans) – Allow us to manage thousand

of classes– Developer knows how changes

affect to any part of the code

CRITERION: Java Lenguage



21

In Single Page Interface (SPI) a web site/application runs into the same page (no reload)– By using AJAX (or similar) we get new

markup or JavaScript for partial updates

Event based programming and only partial changes designed and coded– The same as desktop applications

CRITERION: Single Page Interface



22

No more unexpected Back/Forward/Reload and double form-submitting– No more “post-redirect”– Back/Forward buttons of browser can optionally

work in SPI and remain SPI and deterministic

No more unexpected caching (GET) No more unexpected “form autofill”

– Changing values provided by the server on page load

No more stupid full page rendering when anything is changed– Avoiding annoying blinking and scrolling – Increased performance

CRITERION: Single Page Interface (cont.)



23

No more includes into includes into includes– Templates ONLY containing initial page or page

fragments– More tolerance to visual changes

No more direct access to internal pages

No more problems when the same user opens two page windows – Pages of a SPI application DO NOT share state by

default– Session is NO longer the place to save temporal

data

No more problems with modal windows– Browsers do not like them (hack)– In SPI you can simulate modal windows




24

End users increased productivity!– Example: showed errors while introducing

data

FACT: no one desktop application is paged (multi-frame)– No, a “wizard” is a single modal window, the

same “frame” (=page) is kept The SPI concept is NOT NEW

http://devedge-temp.mozilla.org/viewsource/2003/inner-browsing/index_en.html

SPI is much more than “a bit of AJAX”– If the web framework is not SPI oriented the page must

change to load new AJAX based components




25

Click

“Standard” < v2.0(no AJAX)

Another reason to discard both again




26

LET’S LOOK BACK

JVM in serverWeb ClientServer-Centric Java LanguageSingle Page Interface



27


Click



28

Tools like EclipseRAP and AjaxSwing are interesting for quickly porting desktop applications to web – The result is a “forced” web

application

CRITERION: Not a forced web



29

Allows division by role between developers and web designers– Two clear roles: visual design, lógic

programming (visual and business logic)– Reusing of visual design (visual patterns)– Reusing of visual logic => OOP

• Can be very independent of concrete visual design

Absolute control of layout when “markup is alive”

CRITERION: Templates based on plain HTML with no logic



30

JSF flavours…. NO!

CRITERION: Templates based on plain HTML with no logic (cont.)



31

JSF flavours…. NO!– Black-boxed components

• Visual aesthetic is imposed• Hard to change, “is what you get”

– Mixed visual design and logic (lots of Java bindings and EL expressions)

• Too much Java Reflection, security risk– Struts security hole (in ONGL): http://struts.apache.org/2.2.1/docs/s2-

005.html – Spring security hole: http://securityreason.com/securityalert/7526

– Specific visual editors needed (= FAILURE)




32

ZK? …. NEITHER!– Similar to JSF


“I don't think UI Designer would have patient to learn how to polish his web site in ZUL file, they want CSS and HTML”http://stackoverflow.com/questions/327328/any-real-world-experience-of-the-zk-ajax-framework



33

Vaadin? NO TEMPLATING!– Visual design fully programmatic!




34

Wicket to the rescue?– “Wicket does not mix markup with

Java code and adds no special syntax to your markup files” http://wicket.apache.org/meet/features.html

– Let’s see AJAX “Tree and TreeTable” ex.• Where is the tree markup? => Black

Box!


(again)



35

LET’S LOOK BACK

JVM in serverWeb ClientServer-Centric Java LanguageSingle Page InterfaceNot a forced webTemplates based on plain

HTML with no logic



36


Click



37

REMOVING ALL DISCARDED

FRAMEWORKS



38




39

NO ONE??!!



40

ANOTHER CHANCE TO JSF (with AJAX), ZK and Vaadin



41

In a “push” template the contained markup is the visual pattern managed by Java code pushing data to the template (this is not executable)– Java code has complete control of the

lifecycle of instances, begin and end of transactions

– Promotes visual reusing and OOP– IoC/DI is not imposed (optional)

Example: Wicket load phase (no AJAX)– But Wicket is fully discarded…

CRITERION: “Push” Templates



42

JSF flavours and ZK– Executable (pull) templates– Java objects controlled by

template

Vaadin– Template? What is a template?

CRITERION: “Push” Templates (cont)



43


FRAMEWORKS



44

NO ONE??!!



45




46

Answer to the “fine but can it do…?”

JavaScript minimum or nothing New markup defined as

markup (sort of template)– Not as JavaScript– We can decide what elements send

events– Event processing in server can

insert/modify/remove our markup

CRITERION: Easy Creation of Custom AJAX Components



47

JSF pre 2.0– Tons of “hacks” – Markup management with client JavaScripthttps://bpcatalog.dev.java.net/ajax/textfield-jsf/design.htmlhttp://www.oracle.com/technetwork/java/javaee/tutorial-jsp-140089.htmlhttp://media.techtarget.com/tss/static/articles/content/JSFReference/

JSFReferenceCH11.pdf

JSF post 2.0– Simplified creation of “composite”

components… WOW a new sort of include was invented!

– AJAX calls standardized. WOW!– The same annoying JavaScript

http://www.ibm.com/developerworks/java/library/j-jsf2fu-0410/index.html

CRITERION: Easy Creation of Custom AJAX Components (cont.)



48

ZK– There is some example beyond

adding AJAX listeners to markup on load time?

– New markup management again with JavaScript in client

http://docs.zkoss.org/wiki/Component_Development_Tutorial

http://www.zkoss.org/doc/compdevguide




49

Vaadin– According the manual is not an easy task. The

reference manual is sincere:• “Creation of new widgets involves a number of

rather intricate tasks” http://vaadin.com/book/-/page/gwt.html

– A new GWT component must be created, another one for server, code for client/server coordination and data communication, several registries

– Positive: fortunately management of new markup is Java based (GWT) but pure programmatic (bye web designers)


?



50

LET’S LOOK BACK

JVM in server Web Client Server-Centric Java Language Single Page Interface Not a forced web Templates based on plain HTML with no

logic “Push” Templates Easy Creation of Custom AJAX

Components



51


Click



52


FRAMEWORKS



53

NO ONE??!!



54




55

The framework should provide an easy API and development style

Providing in a short period of time, the necessary skills to develop Single Page Interface applications

CRITERION: Not Steep Learning Curve



All frameworks compete with the longest and rich list of components– Are they hiding that custom component

development is a very cumbersome task?

A custom tag or custom API is needed for a simple button or text box– Hundreds of custom tags including the basics– Web knowledge thrown away

Beyond already made components there is no very much hope (complex task)

56

CRITERION: Not Steep Learning Curve (cont.)



57


FRAMEWORKS



58

NO ONE??!!



59




60

XML based configuration and declarative programming:– Hard to reuse, no very much OOP – Friend of tools, usually become foe for

developers – Hard to debug, error detection on runtime– Rigid relative to the imperative alternative– Fight against rigidity with tons of custom

elements and attributes (trying to cope with any casuistic)

– Usually enormous archives (hard to work with)

CRITERION: Free of XML and declarative programming



61

JSF and ZK– Full of XMLs for configuration

and custom tags (a kind of declarative programming)

Vaadin– Is not free of XML based

registries

CRITERION: Libre de XML y programación declarativa



62

NO ONE??!!



63




64

Is there anybody out there?There is more life beyond iPhone and

Android

CRITERION: Single Page Interface in many mobile browsers

64



65

ANOTHER CHANCE TO JSF (with AJAX), ZK and VaadinThis will be the last one!!



66

The division between a web application and web site is blur today– FaceBook, Twitter (both SPI) are they sites

or apps?

Notwithstanding be indexed by web crawlers is absolutely necessary (SEO compatible) – Avoiding site duplication for SEO

This implies any SPI state should be bookmarkable and in the same time generated with markup

CRITERION: SPI SEO compatible



67

SPI SEO compatible WHAT?


67



68

LET’S LOOK BACK

JVM in server Web Client Server-Centric Java Language Single Page Interface Not a forced web Templates based on

plain HTML with no logic

“Push” Templates

Easy Creation of Custom AJAX Components

Not Steep Learning Curve

Free of XML and declarative programming

SPI in many mobile browsers

SPI SEO compatible



69


Click



70

NO ONE??!!



71

REALLY??!!



72

NO, not true MISSING ONE!!!



73

Is ItsNat really compliant with all

previous criterions?



74

ItsNat is coded with Java in server– Other JVM languages are not

excluded for development ItsNat applications

CRITERION: Web Client

CRITERION: JVM in server / Java Language

100% web technology– Optional SVG applet based on Batik– SVGWeb support for SVG in IE (v6-v8)



75

In ItsNat user JavaScript code is not needed– In spite of developers can easily

inject custom JavaScript from server– In spite of custom JS code and JS

libraries can fit together with ItsNat• Generated markup is CLEAN of ItsNat

artifacts (id and onXXX attributes not used by ItsNat)

• Markup layout is absolutely controlled by developers, jQuery /Dojo can play with style attributes for visual effects (movements, opacity)

CRITERION: Server-Centric



76

ItsNat strongly supports the SPI paradigm

But nothing prevents you of page navigation…– There is a utility called

“Referrers”– Form auto-fill of browsers is

automatically canceled (load time) to ensure all data shown are given by the server

CRITERION: Single Page Interface



77

Developers have absolute control of layout including SPI

No aesthetic is imposed, no pixel based desktop simulation

Swing is optionally used only because its “data/selection models” (view independent)

CRITERION: Not a forced web



78

Templates are normal plain HTML files, no custom tags, no expression languages, no Java bindings– Fully suitable for web designers and pure

HTML/XHTML WYSIWYG tools– New HTML fragments to be inserted into the

page with AJAX are plain XHTML/HTML too

Visual logic is executed using Java W3C DOM APIs in the server (including events)– Any change performed to the DOM in server is

replicated to the client (custom JavaScript is generated and sent to the client)

CRITERION: Templates based on plain HTML with no logic



79

Event listeners are Java W3C DOM Event listeners registered in server– Receiving W3C DOM Events

ItsNat SIMULATES A JAVA W3C BROWSER IN THE SERVER– The client page is a clone of server – This is not “new”, actually ALL of server-

centric frameworks DO the same (JSF, ZK, Vaadin browser) by using techniques…

VERY ARTIFICIAL AND RIGID!!




80




81

The page (client and server) can be partially changed with new plain HTML markup

Three ways to add new markup to a page in SPI1. Markup Fragment2. String containing markup converted to DOM

through ItsNatDocument.toDOM(String) 3. Creating elements through W3C DOM Java

API




82

1. Markup Fragment Is a type of template, only the content in <body> is loaded and can be inserted by DOM API in server

http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.core.domutils.markupFragments.ex




83

2. String containing markup converted to W3C Java DOM by ItsNatDocument.toDOM(String)

http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.core.domutils.toDOM.ex




84

3. Through W3C DOM Java API

http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.core.man.htmlExampleInManual.ex




85

Because templates are plain HTML and can be freely modified…– Because MARKUP IS ALIVE as DOM

…ItsNat easily allows to convert any paged web site or app web to Single Page Interface– Clone of ElCorteIngles.es as SPI:

http://www.innowhere.com:8080/insites/– Clone of an ExtJS application:

http://www.innowhere.com:8080/inexperiments/inexpservlet?itsnat_doc_name=extjsexample




86

ItsNat templates are not executable, view logic is fully based on Java– Java logic manages the template markup and

pushes (injects) data to the template

ItsNat provides the template as DOM to Java code on load time– Java code absolutely controls object

instances, transaction demarcation and view modification in any order

– Nothing prevents of using IoC/DI frameworks, they are not imposed




87


Called per page load

Document lifecycle is the same as the client page



88

Components are the typical form of visual layout, visual code and associated events

In ItsNat components are NOT needed because any HTML element is a “component”– Any element can receive events – Can contain other elements

(=components)– Can change its data (text nodes) and

appearance (CSS, formatting nodes)

CRITERION: Easy Creation of Custom AJAX Components



89

Does we need “components” for reusing in ItsNat? NO!!– A markup fragment (or string

converted toDOM() o Java DOM code) and a Java class with DOM management and event listeners => can be reused without some kind of component registration




90

Anyway ItsNat provides a component system and some components– Component = “binding of a data model, a

selection model (usually Swing), a pluggable layout and some registered event listeners”

– Text boxes, lists, tables, trees …– Layout pluggable (pattern

based): NO “black box”

And a mechanism for new components– Implementing ItsNatComponent – And registering (with code) a

CreateItsNatComponentListener




91

Component creation is so easy like binding a plain HTML pattern…– Defined as markup fragment, toDOM o Java

DOM code• The HTML pattern (layout) can be defined outside

the component and be plugged on component creation

with a data (and selection) model…

and predefined actions (Java) and DOM (AJAX) events

http://www.innowhere.com:8080/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.comp.other.customComponent.ex




92

ItsNat has two levels:1. Core2. Components

The Core level is basically DHTML in the server– Java W3C DOM Core/HTML APIs– Java W3C DOM Events– Enough to create sophisticated SPI

applications

Components are optional– Form components very useful (text box,

select…)

CRITERION: Not Steep Learning Curve



93

ItsNat configuration is fully based on code– Provides maximum freedom, flexibility and reusing

=> OOP and automatic adaptation to environment

100% XML and declarative programming free

Nothing prevent of building declarative layers on top– Config. and registries based on XML, custom tags…– Configuration based on DI frameworks (Spring,

Guice)– ItsNat is consciously a low/middle level

framework

CRITERION: Free of XML and declarative programming



94

Desktop Browsers– Adobe AIR HTML Component, Arora, Google Chrome, FireFox 1+,

Internet Explorer v6,7,8, Internet Explorer v9, Moblin 2.0, Opera 9+, QtWebKit (Qt 4.4), Safari 3+.

Mobile Browsers– Android 1.0+, BlackBerry JDE 4.6+ (Flip, Bold, Storm etc), Bolt,

Fennec 1.0a1 (a.k.a FireFox Mobile), Pocket IE 6 (Windows Mobile 6 and 6.1), IE Mobile 6 (since Windows Mobile 6.1.4), iPhone/iPod Touch 2.0+, Iris 1.0.8+, Minimo 0.2, Motorola Symphony 1.1, NetFront 3.4+, Opera Mini 4.x, Opera Mobile 8.6x (WinMob and UIQ), 9.5, 9.7 and 10, S60WebKit (since S60 3rd), S40WebKit (since S40 6th), Palm Pre webOS, QtWebKit of Qt for Embedded Linux (Qt v4.4) and Windows CE, SkyFire 1.0 and UCWEB (Java and WinMob).

SVG Plugins – Adobe SVG Viewer v3 and v6 beta, Renesis Player v1.1.1, Savarese

Ssrc SVG (adds XUL to MSIE too), SVGWeb, and Batik as applet.

CRITERION: SPI in many mobile browsers



95

Pocket IE support of Windows Mobile 6.0 y 6.1 is INCREDIBLE– In later versions

(>= 6.1.4) IE Mobile is much better

CRITERION: SPI in many mobile browsers (cont.)



96

ItsNat has a render mode on page load called “Fast Load”– In this mode any change made to the initial

template DOM when the page is loading, do not generate JavaScript

– Final DOM tree is rendered as markup

The same Java DOM code can generate markup (load phase) or JavaScript (events)– ElCorteIngles.es as SPI SEO compatible:

http://www.innowhere.com:8080/insites/




97

ItsNat has many more characteristics some of them are unique Pure SVG and embedded SVG in

XHTML/HTML, remote control of other users, server-sent events, integrated functional testing, modal layers, iframe auto-binding in server, extreme mashups, remote templates, client JavaScript integration…

EPILOGUE



98

Project Homehttp://www.itsnat.org

Online Demohttp://www.innowhere.com:8080/itsnat/

The Single Page Interface Manifestohttp://itsnat.sourceforge.net/php/spim/

spi_manifesto_en.php

ItsNat LINKS

how to choose a web framework

Documents