How to choose a web framework and be surprised

HOW TO CHOOSE A WEB
FRAMEWORK

…and be surprised

Jose María Arranz Santamaría Agosto 2010

HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised

THE PROBLEM OF CHOOSING

 Choosing the appropriate web
framework which fits your
requirements…
 …and needs, conveniences,
desires, tastes…
 …is not an easy task

Jose María Arranz 2 August 2010


THE PROBLEM OF CHOOSING
 These slides propose and
advocate some criteria to pick the
right framework
– Advocating for freedom of choice,
freedom of design, robustness, security…
– Discarding options (that is, frameworks)
 Maybe you do not agree with
everyone
– I must try… :)


Click

Frameworks, Frameworks,
Frameworks!!



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

 Many of them are very similar
 Some strong criteria are very
important
 Most of frameworks can be
classified into groups



CRITERION: JVM in server

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



CRITERION: Pure Web Client

 Flash/Flex (and other RIA
plugins…)
– 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”
– SEO compatibility is not easy



CRITERION: “Client-Centric”??
 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”?? (cont.)
Do you really want to code this way?




 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




NO THANKS!!




 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…




 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



 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



CRITERION: “Server-Centric”

 In “server-centric” business logic and
visual logic are executed in server
Client- – The server generates markup and/or JavaScript
Centric • 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



LET’S LOOK BACK

 JVM in server
 Pure Web Client
 Server-Centric



Click

Frameworks!!



CRITERION: Dynamic Language??

 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
 Slooow
http://www.codecommit.com/blog/java/groovys-performance-is-not-subjective



CRITERION: Dynamic Language?? (cont.)

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



CRITERION: Java Lenguage

 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: Single Page Interface

 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 (cont.)
 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



 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 pages
– 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




 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




Click

“Standard” < v2.0
(no AJAX)

Another reason to discard both again



LET’S LOOK BACK

 JVM in server
 Pure Web Client
 Server-Centric
 Java Language
 Single Page Interface



Click

Frameworks!!



CRITERION: Not a forced web

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



CRITERION: Templates based on
plain HTML with no logic
 Allows division by role between
developers and web designers
– Two clear roles: visual design, logic 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”



plain HTML with no logic (cont.)

 JSF flavours…. NO!



 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)




 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




 Vaadin? NO TEMPLATING!
– Visual design fully programmatic!




 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)



LET’S LOOK BACK
 JVM in server
 Pure Web Client
 Server-Centric
 Java Language
 Not a forced web
 Templates based on plain HTML
with no logic


Click

Frameworks!!



REMOVING ALL
DISCARDED
FRAMEWORKS



Frameworks!!



NO ONE??!!



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



CRITERION: “Push” Templates
 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 (cont)

 JSF flavours and ZK
– Executable (pull) templates
– Java objects controlled by template
 Vaadin
– Template? What is a template?



REMOVING ALL
DISCARDED
FRAMEWORKS



NO ONE??!!



CRITERION: Easy Creation of
Custom AJAX Components
 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



Custom AJAX Components (cont.)
 JSF pre 2.0
– Tons of “hacks”
– Markup management with client JavaScript
https://bpcatalog.dev.java.net/ajax/textfield-jsf/design.html
http://www.oracle.com/technetwork/java/javaee/tutorial-jsp-140089.html
http://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



 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



 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)



LET’S LOOK BACK
 JVM in server
 Pure Web Client
 Server-Centric
 Java Language
 Not a forced web
 Templates based on plain HTML with no
logic
 “Push” Templates
 Easy Creation of Custom AJAX Components


Click

Frameworks!!



REMOVING ALL
DISCARDED
FRAMEWORKS



NO ONE??!!



CRITERION: Not Steep Learning
Curve

 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



Curve (cont.)
 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)



REMOVING ALL
DISCARDED
FRAMEWORKS



NO ONE??!!



CRITERION: Free of XML and
declarative programming
 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)



 JSF and ZK
– Full of XMLs for configuration and
custom tags (a kind of declarative
programming)
 Vaadin
– Is not free of XML based registries



NO ONE??!!



in many mobile browsers

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

64



This will be the last one!!



CRITERION: SPI SEO compatible
 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



SPI SEO compatible WHAT?

67



LET’S LOOK BACK

 JVM in server  Easy Creation of Custom
 Pure Web Client AJAX Components
 Server-Centric  Not Steep Learning Curve
 Java Language  Free of XML and
 Single Page Interface declarative programming
 Not a forced web  SPI in many mobile
 Templates based on plain browsers
HTML with no logic  SPI SEO compatible
 “Push” Templates



Click

Frameworks!!



NO ONE??!!



REALLY??!!



NO, not true
MISSING ONE!!!



Is ItsNat really compliant
with all previous
criterions?



CRITERION: JVM in server /
Java Language
 ItsNat is coded with Java in
server
– Other JVM languages are not excluded for
development ItsNat applications
CRITERION: Pure Web Client
 100% web technology
– Optional SVG applet based on Batik
– SVGWeb support for SVG in IE (v6-v8)



CRITERION: Server-Centric
 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)




 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: Not a forced web

 Developers have absolute control
of layout including in SPI
 No aesthetic is imposed, no pixel
based desktop simulation
 Swing is optionally used only
because its “data/selection
models” (view independent)



plain HTML with no logic
 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)



 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!!



 The page (client and server) can be
partially changed with new plain HTML
markup
 Three ways to add new markup to a
page in SPI
1. Markup Fragment
2. String containing markup converted to DOM through
ItsNatDocument.toDOM(String)
3. Creating elements through W3C DOM Java API



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&featur
e=feashow.core.domutils.markupFragments.ex



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

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



3. Through W3C DOM Java API

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



 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



 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




Called per
page load

Document
lifecycle is the
same as the
client page



Custom AJAX Components
 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)



 Do 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



CRITERION: Easy Creation of Custom
AJAX Components (cont.)
 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



CRITERION: Easy Creation of Custom
AJAX Components (cont.)
 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



Curve
 ItsNat has two levels:
1. Core
2. 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…)



 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: SPI in many
mobile browsers
 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 (cont.)
 Pocket IE support
of Windows Mobile
6.0 y 6.1 is
INCREDIBLE
– In later versions
(>= 6.1.4) IE Mobile is
much better



 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/



EPILOGUE
 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, Comet, client JavaScript
integration…



ItsNat LINKS

 Project Home
http://www.itsnat.org
 Online Demo
http://www.innowhere.com:8080/itsnat/
 The Single Page Interface
Manifesto
http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php


How to choose a web framework and be surprised

More Related Content

What's hot

Viewers also liked

Similar to How to choose a web framework and be surprised

Recently uploaded

How to choose a web framework and be surprised