Como Elegir Framework

8/4/2019 Como Elegir Framework

http://slidepdf.com/reader/full/como-elegir-framework 1/98

HOW TO CHOOSE A WEBFRAMEWORK

…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

Choosing the appropriated webframework which fits your

requirements… …and needs , conveniences,

desires, tastes…

…is not an easy task

2

THE PROBLEM OF CHOOSING





These slides propose andadvocate some criteria to pick the

right framework– Advocating for freedom of choice,

freedom of design, robust, security…

– Discarding options (that is, frameworks)

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

THE PROBLEM OF CHOOSING

3





Frameworks, Frameworks,Frameworks!!

Click

4





Many of them are very similar

Some strong criteria are veryimportant

Most of frameworks can be

classified by groups

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

5





The Java platform is themost robust, secure,

speediest and richest forweb development

CRITERION: JVM in server

6





Flash/Flex (and other RIAplugins…)

– Will be replaced by HTML 5 in ashort future

– HTML/CSS/JS is more flexible andopen than Flash/Flex

– Data applications do not need to beso “baroque”

– SEO compatibility is not easy

CRITERION: Pure Web Client

7





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”??

8





Coding in JavaScriptDo you really want to code this way?

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

9





Coding in JavaScript: the myth ofRich Interface Application = JS Library

RIA = beautiful web, Single Page Interface, withmovements 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

10






Coding in JavaScriptNO THANKS!!


11





GWT– Allows coding JS in Java

– GWT compiles Java code as JavaScriptsent 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…


12





Visual Design isprogrammatic or

with specific IDEs– Bye web designers

Components “black- boxed”

– Almost only CSS customization Cryptic generated JS

– Only debugging in Java


13





Paranoid server– No confidence with client (and everything is there)

– Duplicity of checking/validations

Client-server custom communicationdata bridges (GWT-RPC)

Duplicity of data management in clientand server

SOFEA: utopian approach– Impossible sending SQL from browser

– Eternal fight about what is on each side


14

?





In “server-centric” business logic andvisual 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”

15

Client-Centric





LET’S LOOK BACK

JVM in server

Pure Web Client

Server-Centric

16






Click

17





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

18

CRITERION: Dynamic Language??





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

Can you live without refactoringtools?

19

CRITERION: Dynamic Language?? (cont.)





The compiler gives usrobust and speeder code

– Compiler is your friend Tools like “Find Usages”

and “Refactor” (NetBeans)– Allow us to manage thousand of

classes– Developer knows how changesaffect to any part of the code

20

CRITERION: Java Lenguage





In Single Page Interface (SPI) a website/application runs into the same

page (no reload)– By using AJAX (or similar) we get new markupor JavaScript for partial updates

Event based programming and only

partial changes designed and coded– The same as desktop applications

21

CRITERION: Single Page Interface





No more unexpected Back/Forward/Reloadand 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 whenanything is changed– Avoiding annoying blinking and scrolling

– Increased performance

22

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 openstwo 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

23






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

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

“frame” (=page) is kept

The SPI concept is NOT NEWhttp://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

24






25

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

26

d b d






Click

27

d b i dH T C J W F





Tools like EclipseRAP andAjaxSwing are interesting for

quickly porting desktopapplications to web– The result is a “forced” web application

28

CRITERION: Not a forced web

d b i dH T C J W F





Allows division by role betweendevelopers 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”

29

CRITERION: Templates based on

plain HTML with no logic

d b i dH T C J W F





JSF flavours…. NO!

30


plain HTML with no logic (cont.)

d b i dH T C J W F





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)

31



d b i dHOW TO CHOOSE A JAVA WEB FRAMEWORK





ZK? …. NEITHER!– Similar to JSF

32



“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

d b i dHOW TO CHOOSE A JAVA WEB FRAMEWORK





Vaadin? NO TEMPLATING!– Visual design fully programmatic!

33



and be surprisedHOW TO CHOOSE A JAVA WEB FRAMEWORK





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!

34



(again)






LET’S LOOK BACK JVM in server

Pure Web Client

Server-Centric Java Language


Not a forced webTemplates based on plain HTML

with no logic

35







Click

36






37

REMOVING ALL

DISCARDEDFRAMEWORKS







38






39

NO ONE??!!






40

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






In a “push” template the containedmarkup is the visual pattern managed

by Java code pushing data to thetemplate (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…

41

CRITERION: “Push” Templates





43

REMOVING ALL

DISCARDEDFRAMEWORKS






44

NO ONE??!!






45







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

46

CRITERION: Easy Creation of

Custom AJAX Components





a e u p i eJ

JSF pre 2.0– Tons of “hacks”

– Markup management with client JavaScript

https://bpcatalog.dev.java.net/ajax/textfield-jsf/design.htmlhttp://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 JavaScripthttp://www.ibm.com/developerworks/java/library/j-jsf2fu-0410/index.html

47


Custom AJAX Components (cont.)





pJ

ZK– There is some example beyond adding

AJAX listeners to markup on loadtime?

– New markup management again with JavaScript in client

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

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

48







pJ

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

reference manual is sincere:

• “Creation of new widgets involves a number of ratherintricate tasks”

http://vaadin.com/book/-/page/gwt.html

– A new GWT component must be created, another onefor 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 webdesigners)

49



?





pJ

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

50





pJ


Click

51




p

53

NO ONE??!!





The framework shouldprovide an easy API

and development style Providing in a short

period of time, thenecessary skills todevelop Single PageInterface applications

55

CRITERION: Not Steep Learning

Curve





All frameworks compete with the longestand 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 isno very much hope (complex task)

56


Curve (cont.)





REMOVING ALL

DISCARDEDFRAMEWORKS





NO ONE??!!





XML based configuration anddeclarative 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)

60

CRITERION: Free of XML and

declarative programming





JSF and ZK– Full of XMLs for configuration and

custom tags (a kind of declarativeprogramming)

Vaadin– Is not free of XML based registries

61







NO ONE??!!





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

64


in many mobile browsers

64





ANOTHER CHANCE TO JSF

(with AJAX), ZK and VaadinThis will be the last one!!





The division between a web applicationand web site is blur today– FaceBook, Twitter (both SPI) are they sites or apps?

Notwithstanding be indexed by webcrawlers is absolutely necessary (SEOcompatible)– Avoiding site duplication for SEO

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

66

CRITERION: SPI SEO compatible





SPI SEO compatible WHAT?

67


67





LET’S LOOK BACK

JVM in server

Pure Web Client

Server-Centric

Java Language


Not a forced web

Templates based on plainHTML with no logic

“Push” Templates

68

Easy Creation of CustomAJAX Components

Not Steep Learning Curve

Free of XML anddeclarative programming

SPI in many mobile browsers

SPI SEO compatible





Frameworks, Frameworks,

Frameworks!!

Click

69





NO ONE??!!





REALLY??!!





NO, not trueMISSING ONE!!!





Is ItsNat really compliantwith all previous

criterions?





ItsNat is coded with Java inserver

– Other JVM languages are not excluded fordevelopment ItsNat applications

74

CRITERION: Pure 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)





In ItsNat user JavaScript code isnot needed– In spite of developers can easily inject

custom JavaScript from server

– In spite of custom JS code and JS librariescan 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 styleattributes for visual effects (movements, opacity)

75

CRITERION: Server-Centric





ItsNat strongly supports theSPI paradigm

But nothing prevents you ofpage navigation…– There is a utility called “Referrers”

– Form auto-fill of browsers isautomatically canceled (load time) toensure all data shown are given by theserver

76






Developers have absolute controlof layout including in SPI

No aesthetic is imposed, no pixel based desktop simulation

Swing is optionally used only

because its “data/selectionmodels” (view independent)

77

CRITERION: Not a forced web





Templates are normal plain HTML files, nocustom tags, no expression languages, no

Java bindings

– Fully suitable for web designers and pureHTML/XHTML WYSIWYG tools

– New HTML fragments to be inserted into the pagewith 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 generatedand sent to the client)

78


plain HTML with no logic





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

ItsNat SIMULATES A JAVA W3CBROWSER 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!!

79







The page (client and server) can bepartially changed with new plain HTML

markup Three ways to add new markup to a

page in SPI1. Markup Fragment

2. String containing markup converted to DOM throughItsNatDocument.toDOM(String)

3. Creating elements through W3C DOM Java API

81







1. Markup FragmentIs a type of template, only the content in <body> isloaded 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

82







2. String containing markupconverted 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

83







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

84







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

…ItsNat easily allows to convert anypaged web site or app web to SinglePage 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

85







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 inany order

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

86







Called perpage load

Documentlifecycle is thesame as theclient page





Components are the typical form ofvisual layout, visual code andassociated events

In ItsNat components are NOTneeded because any HTML elementis a “component”

– Any element can receive events– Can contain other elements (=components)

– Can change its data (text nodes) and appearance(CSS, formatting nodes)

88


Custom AJAX Components





Do we need “components” forreusing in ItsNat? NO!!

– A markup fragment (or stringconverted toDOM() o Java DOM code)and a Java class with DOMmanagement and event listeners=> can be reused without some kind ofcomponent registration

89







Anyway ItsNat provides a componentsystem 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) aCreateItsNatComponentListener

90

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) andDOM (AJAX) events

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

91

CRITERION: Easy Creation of Custom

AJAX Components (cont.)





ItsNat has two levels:1. Core

2. Components

The Core level is basically DHTML inthe 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…)

92


Curve





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

93







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 (Qtv4.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.

94

CRITERION: SPI in many

mobile browsers





Pocket IE supportof Windows Mobile

6.0 y 6.1 isINCREDIBLE– In later versions

(>= 6.1.4) IE Mobile is

much better

95

CRITERION: SPI in many

mobile browsers (cont.)





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

template DOM when the page is loading, do notgenerate JavaScript

– Final DOM tree is rendered as markup

The same Java DOM code cangenerate markup (load phase) or

JavaScript (events)– ElCorteIngles.es as SPI SEO compatible:

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

96






ItsNat has many morecharacteristics some of them areunique

Pure SVG and embedded SVG inXHTML/HTML, remote control of otherusers , server-sent events, integratedfunctional testing, modal layers, iframe

auto-binding in server, extreme mashups,remote templates, client JavaScriptintegration…

97

EPILOGUE




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

Como Elegir Framework

Documents

Transcript of Como Elegir Framework