Web framework selection is not an easy task it requires some solid criteria to understand the amazing diversity of development putting in the right place blinks and colorful demos
Why Teams call analytics are critical to your entire business
How to choose a web framework and be surprised
1. HOW TO CHOOSE A WEB
FRAMEWORK
…and be surprised
Jose María Arranz Santamaría Agosto 2010
2. 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
3. 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,
freedom of design, robustness, security…
– Discarding options (that is, frameworks)
Maybe you do not agree with
everyone
– I must try… :)
Jose María Arranz 3 August 2010
4. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 4 August 2010
5. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
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
Jose María Arranz 5 August 2010
6. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
CRITERION: JVM in server
The Java platform is the
most robust, most secure,
speediest and richest for
web development
Jose María Arranz 6 August 2010
7. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
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
Jose María Arranz 7 August 2010
8. 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
9. 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
10. 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
11. 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
12. 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
13. 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
14. 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
15. 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
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
Jose María Arranz 15 August 2010
16. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
LET’S LOOK BACK
JVM in server
Pure Web Client
Server-Centric
Jose María Arranz 16 August 2010
17. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 17 August 2010
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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 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
Jose María Arranz 23 August 2010
24. 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
25. 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
26. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
LET’S LOOK BACK
JVM in server
Pure Web Client
Server-Centric
Java Language
Single Page Interface
Jose María Arranz 26 August 2010
27. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 27 August 2010
28. 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
29. 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, 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”
Jose María Arranz 29 August 2010
30. 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
31. 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
32. 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-ajax-
framework
Jose María Arranz 32 August 2010
33. 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
34. 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
35. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
LET’S LOOK BACK
JVM in server
Pure 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
36. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 36 August 2010
37. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz 37 August 2010
38. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 38 August 2010
39. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 39 August 2010
40. 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
41. 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
42. 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
43. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz 43 August 2010
44. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 44 August 2010
45. 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
46. 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
47. 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
48. 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
49. 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
50. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
LET’S LOOK BACK
JVM in server
Pure 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
51. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 51 August 2010
52. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz 52 August 2010
53. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 53 August 2010
54. 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
55. 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
56. 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
57. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
REMOVING ALL
DISCARDED
FRAMEWORKS
Jose María Arranz 57 August 2010
58. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 58 August 2010
59. 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
60. 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
61. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
CRITERION: Free of XML and
declarative programming
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
62. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 62 August 2010
63. 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
64. 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
65. 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
66. 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
67. 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
68. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
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
Jose María Arranz 68 August 2010
69. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
Click
Frameworks, Frameworks,
Frameworks!!
Jose María Arranz 69 August 2010
70. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO ONE??!!
Jose María Arranz 70 August 2010
71. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
REALLY??!!
Jose María Arranz 71 August 2010
72. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
NO, not true
MISSING ONE!!!
Jose María Arranz 72 August 2010
73. 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
74. 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: Pure 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
75. 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
76. 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
77. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
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)
Jose María Arranz 77 August 2010
78. 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
79. 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
80. 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
81. 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
82. 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
83. 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
84. 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
85. 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
86. 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
87. 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
88. 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
89. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
CRITERION: Easy Creation of
Custom AJAX Components (cont.)
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
Jose María Arranz 89 August 2010
90. 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
91. 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
92. HOW TO CHOOSE A JAVA WEB FRAMEWORK ... and be surprised
CRITERION: Not Steep Learning
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…)
Jose María Arranz 92 August 2010
93. 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
94. 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
95. 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
96. 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
97. 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, Comet, client JavaScript
integration…
Jose María Arranz 97 August 2010
98. 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