Download Diapositiva 1

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 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
Jose María Arranz
2
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
THE PROBLEM OF CHOOSING
 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… :)
Jose María Arranz
3
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
4
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CALM! 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 by groups
Jose María Arranz
5
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: JVM in server
 The Java platform is the
most robust, secure,
speediest and richest for
web development
Jose María Arranz
6
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Web Client
 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
Jose María Arranz
7
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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.
Jose María Arranz
8
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 Coding in JavaScript
Do you really want to code this way?
Jose María Arranz
9
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 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
Jose María Arranz
10
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 Coding in JavaScript
NO THANKS!!
Jose María Arranz
11
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 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…
Jose María Arranz
12
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 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
Jose María Arranz
13
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Client-Centric”?? (cont.)
 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
Jose María Arranz
14
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Server-Centric”
 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
Jose María Arranz
15
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
LET’S LOOK BACK
 JVM in server
 Web Client
 Server-Centric
Jose María Arranz
16
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
17
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
18
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Dynamic Language?? (cont.)
 Can you live without a true
“Find Usages” of NetBeans?
 Can you live without refactoring
tools?
Jose María Arranz
19
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
20
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
21
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
22
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Single Page Interface (cont.)
 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
Jose María Arranz
23
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Single Page Interface (cont.)
 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
Jose María Arranz
24
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Single Page Interface (cont.)
Click
“Standard” < v2.0
(no AJAX)
Another reason to discard both again
Jose María Arranz
25
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
LET’S LOOK BACK
 JVM in server
 Web Client
 Server-Centric
 Java Language
 Single Page Interface
Jose María Arranz
26
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
27
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
28
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic
 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”
Jose María Arranz
29
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 JSF flavours…. NO!
Jose María Arranz
30
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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)
Jose María Arranz
31
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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-ajaxframework
Jose María Arranz
32
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 Vaadin? NO TEMPLATING!
– Visual design fully programmatic!
Jose María Arranz
33
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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)
Jose María Arranz
34
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
35
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
36
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz
37
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
38
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
39
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
Jose María Arranz
40
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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…
Jose María Arranz
41
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Push” Templates (cont)
 JSF flavours and ZK
– Executable (pull) templates
– Java objects controlled by template
 Vaadin
– Template? What is a template?
Jose María Arranz
42
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz
43
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
44
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
Jose María Arranz
45
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
46
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Easy Creation of
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
Jose María Arranz
47
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Easy Creation of
Custom AJAX Components (cont.)
 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
Jose María Arranz
48
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Easy Creation of
Custom AJAX Components (cont.)
 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)
?
Jose María Arranz
49
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
50
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
51
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz
52
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
53
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
Jose María Arranz
54
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
55
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Not Steep Learning
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)
Jose María Arranz
56
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz
57
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
58
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
Jose María Arranz
59
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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)
Jose María Arranz
60
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Libre de XML y
programación declarativa
 JSF and ZK
– Full of XMLs for configuration and
custom tags (a kind of declarative
programming)
 Vaadin
– Is not free of XML based registries
Jose María Arranz
61
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
62
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
Jose María Arranz
63
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Single Page Interface
in many mobile browsers
Is there anybody out there?
There is more life beyond iPhone and Android
64
Jose María Arranz
64
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
ANOTHER CHANCE TO JSF
(with AJAX), ZK and Vaadin
This will be the last one!!
Jose María Arranz
65
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
66
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: SPI SEO compatible
SPI SEO compatible WHAT?
67
Jose María Arranz
67
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
68
 Easy Creation of Custom
AJAX Components
 Not Steep Learning Curve
 Free of XML and
declarative programming
 SPI in many mobile
browsers
 SPI SEO compatible
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz
69
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO ONE??!!
Jose María Arranz
70
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
REALLY??!!
Jose María Arranz
71
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
NO, not true
MISSING ONE!!!
Jose María Arranz
72
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
Is ItsNat really compliant
with all previous
criterions?
Jose María Arranz
73
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: JVM in server /
Java Language
 ItsNat is coded with Java in
server
– Other JVM languages are not excluded for
development ItsNat applications
CRITERION: Web Client
 100% web technology
– Optional SVG applet based on Batik
– SVGWeb support for SVG in IE (v6-v8)
Jose María Arranz
74
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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)
Jose María Arranz
75
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Single Page Interface
 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
Jose María Arranz
76
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Not a forced web
 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)
Jose María Arranz
77
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
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)
Jose María Arranz
78
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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!!
Jose María Arranz
79
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
Jose María Arranz
80
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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
Jose María Arranz
81
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
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
Jose María Arranz
82
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
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
Jose María Arranz
83
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
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
Jose María Arranz
84
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Templates based on
plain HTML with no logic (cont.)
 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
Jose María Arranz
85
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Push” Templates
 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
Jose María Arranz
86
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: “Push” Templates
Called per
page load
Document
lifecycle is the
same as the
client page
Jose María Arranz
87
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Easy Creation of
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)
Jose María Arranz
88
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Easy Creation of
Custom AJAX Components (cont.)
 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
Jose María Arranz
89
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
90
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
91
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Not Steep Learning
Curve
 ItsNat has two levels:
1.
2.
Core
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…)
Jose María Arranz
92
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: Free of XML and
declarative programming
 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
Jose María Arranz
93
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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.
Jose María Arranz
94
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
95
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
CRITERION: SPI SEO compatible
 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/
Jose María Arranz
96
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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, client JavaScript
integration…
Jose María Arranz
97
August 2010
HOW TO CHOOSE A JAVA WEB FRAMEWORK
... and be surprised
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
Jose María Arranz
98
August 2010