CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

Rich Internet Applicationsfor Business Applications

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt How things started

• Coming together of midrange software companies developing business applications / solutions (Oct 2007)

• Result– Business processing side is „under control“

● Java, Spring, Hibernate, Web Services, Jasper, ...– Front end side is still „in discussion“

● No satisfying strategy to convert the core application

– Often: Fat client still alive– HTML, AJAX experience avilable with all companies

● Goal: Rich Client in front of server side application

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Challenge: Application Lifecycle

• Application Lifecycle: >> 5 years– ==> Lllooonnnngggg term commitments are made

• Technical Discussion and...• Management Discussion

– Build?– Buy?

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Challenge: Application Lifecycle

• Application Lifecycle: >> 5 years– ==> Lllooonnnngggg term commitments are made

• Technical Discussion and...• Management Discussion

– Build?– Buy?– ...Community!

● Share vision● Share code, problems, knowledge● Share risk

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt User Types and UI Technology

Power User

Casual User

DoerManager

HTML Pages

Scripting (AJAX,...)

„Native“ UI Technology (Java, .Net)

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt „Typical Power User“

• Quality Doer!• Frequence Frequent!• Processing Display / Edit• Relation Known

• Examples– Call Center Employee– Purchasing Manager– Financial Accountant– Production Planner– Developer - IDE

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Power User's Expectations

• User Interface needs to be...

• FAST● Response times to be measured „in milliseconds“

• ROBUST● Whole day usage without restart / slow down

• INTERACTIVE● Up to date control processing: drag & drop, popup

menus, table sizing, ...● Keybooard-able

• SMART● Look and feel

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt „Typical Casual User“

• Quality Tactical User ... Doer• Frequence Sometimes• Processing Display ... Edit• Relation Unknown

• Examples– Web Mail– Mini Office User– Travel booking– Developer - Newsgroup

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Casual User's Expectations

• User Interface needs to be...

• AVAILABLE● No client installation / configuration

• SMART● Look and feel

• INTERACTIVE● Avoid „annoyance“● Example: calendar input, ...

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

Operationally used Business Applications

Power User

Casual User

DoerManager

HTML Pages

Scripting (AJAX,...)

„Native“ UI Technology (Java, .Net)

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt And here comes... AJAX!

• PREJUDICES (page one)

– AJAX improves the interaction comfort– AJAX gives HTML pages a flavour of desktop applications– AJAX provides frameworks which manage the complexity

of HTML / Javascript / ... processing– AJAX is (still) an area of hype, there is a lot of

development going on worldwide– AJAX is complex, but there are frameworks that hide

complexity

• GOOD NEWS: THEY ALL ARE TRUE!

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt AJAX Expectations

Power User

Casual User

DoerManager

HTML Pages

Scripting (AJAX,...)

„Native“ UI Technology (Java, .Net)

• Lift up the area of HTML browser usage...!

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt And here comes... AJAX!

• PREJUDICES (page two)

– AJAX client rendering is slow– AJAX frameworks either work fine with IE or with Mozilla– Using AJAX frameworks means you should know the

private phone number of the framework developers– Browsers are oracles– Missing standards

• BAD NEWS: THEY ALL ARE TRUE. Sorry.

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

Power User

Casual User

DoerManager

HTML Pages

Scripting (AJAX,...)

„Native“ UI Technology (Java, .Net)

AJAX Usage Dilemma

• Casual users want simple screens to be loaded fast!• Operational users want complex screens to operate

fast!

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt AJAX means „Fighting with Limits“

90s 2000s

Browser LimitsIE 5.5Mozilla1.0

IE 7.0

AJAX UsageAJAX Frameworks

AJAX-ability AJAX ExpectationsAJAX Perception

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

Pane andFight Phase

Fun Phase

AJAX means „Fighting with Limits“

90s 2000s

Browser LimitsIE 5.5Mozilla1.0

IE 7.0

AJAX UsageAJAX Frameworks

AJAX-ability AJAX ExpectationsAJAX Perception

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt AJAX Maturity Conclusions

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt AJAX Maturity Conclusions

GoogleEarth

GoogleMaps

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt What UI Technology to choose...

• ...for operationally used Business Applications

• AJAX– Performance, Robustness, Compatibility

• Macromedia– Animation driven, Valid Option

• MS Silverlight– Animation driven, young, Valid Option (Future)

• ..or..

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Java Clients

• „Industry proven“– Compatible throughout „all“ client OS platforms– Fast– Robust– Used in many, many applications

• Swing vs. Eclipse SWT– „=“ Performance– „+ Swing“ Compatibility– Interoperability Swing <==> SWT

• Active area of development– Java 6.10 improvements

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Java Swing

• Swing...!– Available on „all“ platforms - „code once“ is reality– Fast and robust– Component libraries available

● Transparency, 2D, 3D, charts, ...• But...:

– Swing is just a library – not a rich client concept– Swing is tough for application developers

● Layout Managers...● Complexity of UI libraries is usually underestimated

– Swing looks old fashionned by default

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt NOT Wanted

SwingProgram

Server Logic

Web Services, „BAPI“s

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt NOT Wanted

SwingProgram

Server Logic

Web Services, „BAPI“s

• Development Effort – both frontend and backend development

• WAN-ability – not ensured

• Security – all „BAPI“s to be secured

• Software Distribution – massive client updates

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

WebStartApplet / Stand alone

Rich Client Concept

Browser

Swing based„Browser“

Server

http

XML Layout Definition „full“ or „delta“

Optimized for deltaRendering

Data changes & events

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

WebStartApplet / Stand alone

Rich Client ConceptBrowser

Swing based„Browser“

Java Server Faces

Optimized for deltaRendering

JSFComponent

LibraryManaged Bean(s)

http

XML Layout Definition „full“ or „delta“

Data changes & events

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Hello World! - JSP<t:rowtitlebar text="Hello World" /><t:rowheader> <t:button actionListener="#{helloworld.onHello}" text="Say Hello" /></t:rowheader><t:rowbodypane> <t:row> <t:label text="Your Name" width="120" /> <t:field text="#{helloworld.yourName}" width="100%" /> </t:row> <t:rowdistance height="20" /> <t:row> <t:label text="#{helloworld.outputInfo}" width="100%" /> </t:row></t:rowbodypane><t:rowstatusbar/>

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

<t:rowheader> <t:button actionListener="#{helloworld.onHello}" text="Say Hello" /></t:rowheader><t:rowbodypane> <t:row> <t:label text="Your Name" width="120" /> <t:field text="#{helloworld.yourName}" width="100%" /> </t:row> <t:rowdistance height="20" /> <t:row> <t:label text="#{helloworld.outputInfo}" width="100%" /> </t:row></t:rowbodypane><t:rowstatusbar/>

Hello World! - Java (Server side)

public class HelloWorldBean implements Serializable{ String m_yourName; String m_outputInfo;

// Property yourName public String getYourName() { return m_yourName; } public void setYourName(String yourName) { m_yourName = yourName; } // Property outputInfo public String getOutputInfo() { return m_outputInfo; } public void onHello(ActionEvent event) { m_outputInfo = "Hello World, " + m_yourName + "!"; }}

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Key architectural Advantages

• Fast, robust, approved Client Technology● 50 times faster than HTML / AJAX

• Standard Server Technology● Scalability, Failover, ...

• Simple and fast Development● Descriptive UI definition● Client-Server Separation built in

– No double-coding (client/server)● I18N, ... built in

• Efficient Client Deployment

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Conclusion (I)

• Your boss asks you to provide a frontend that...– ...runs everywhere in all browsers with zero installation– ...is fast and meets requirements of power users– ...covers complex screens with „tons of data“

• Tell him/her about problems– AJAX/HTML is fine for many scenarios but does not really

meet requirements of power users

• Growing role of browser plugins that utilize client UI resources more effectively than HTML/JavaScript

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt Conclusion (II)

• Selecting „native“ technology is a valid option– Intranet, managed environment– Known Users

• When selecting a technology– Do not build Fat Clients (if not explicitly wanted)– Check usage of a generic client renderer– Check if you can plug in into exsiting server environments

CaptainCasaCa

ptai

nCas

a En

terp

rise

Clie

nt

THANKS!