Upload
sencha
View
4.979
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Understand the approaches and best practices for integrating client side applications - both desktop and mobile - with various server-side technologies.Fabian Urban (27) is an IT Consultant at FORTIS IT-Services GmbH in Hamburg, Germany. He is a web development expert for both - client and server side technologies.During his professional career he designed and implemented interfaces and automated services to share data between affiliate partners and CRM and billing solutions at the telecommunications industry.As a passionate rich internet application developer he has not only implemented web technology solutions, but has always tried to validate and optimize available frameworks to the limit of possibilities. Besides organizing and holding sessions at the Ext JS User Group Hamburg, he will talk about modern RIAs at the SenchaCon 2011.
Citation preview
Fabian Urban
© FORTIS IT-SERVICES GMBH
Fabian UrbanFORTIS
Using Ext JS with a Java Back-end
>> SenchaCon 2011
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Ext JS / Sencha Touch with a Java back-end is a perfect combination
Having a container has many advantages.
Web applications must as run smoothly as desktop applications.
Using better technologies means writing less error prone code.
Theoretically I can do everything, and in practice it is as simple as in theory :-)
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
What is perfect???>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Perfect!performanceoptimized
easy
application runs
smoothly
write less code
save time
minimize risk of writing
error prone code
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Having a container has many advantages>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Request Scoped Beans
Session Scoped Beans
Application Scoped Beans
Request Scoped Beans
Request Scoped Beans
Request Scoped Beans
Session Scoped Beans
Client 1Request A
Client 1Request B
Client 2Request A
Client 2Request B
No need to persist data across requests. Use different scopes.Better performance: No need to recreate instances for every request. No unnecessary database access.
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
If an application is declared to be final, then it has to be final
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Application
database=DEVuser=foopassword=bar
DatabaseDEV
DatabasePROD
Development Server
Production Server
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
… so we don’t have to update the configuration before every deployment
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Application
DataSource=MyDS DatabaseDEV
DatabasePROD
Development Server
Production Server
MyDSdatabase=DEVuser=foopassword=bar
MyDSdatabase=PRODuser=abcpassword=def
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
The less we have to do the earlier it’s done
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Without Connection Pooling (open / close database connection for each request)
With Connection Pooling
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Having a container has many advantages>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Java Application Server (Development)
Database Dev
ApplicationDataSource
ConfigurationDataSource: MyDs
ConnectionPooling
Java Application Server (Prod)
ApplicationDataSource
ConfigurationDataSource: MyDs
ConnectionPooling
Database Prod
No open / close database connection for each request.Better Database performance(No session overhead).
Deploy application without spending time on updating login credentials
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Web applications must run as smoothlyas desktop applications
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Server-side Rendering
Client-side RenderingNETWORK SERVER
No rendering is done on the server side: less network traffic.Web applications run smoothly like desktop applications.
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Using better technologies means writing less error prone code
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
JAX-RS: Easy way to map HTTP requests to a class/method, using annotations. Jackson: Easy way to apply JSON marshalling/unmarshalling. (http://
jackson.codehaus.org/)
CDI: Easy way to fire/observe events (loosely coupled).
Easy way to apply interceptors (AOP). Easy way to write portable extensions (code reuse).
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Using better technologies means: writing less code
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
@ApplicationScopedpublic class SomeApplicationScopedBean {
private String fooText;
public String getFooText() { return fooText; }
public void setFooText(String fooText) { this.fooText = fooText; }}
@SessionScopedpublic class SomeSessionScopedBean { @Inject private SomeApplicationScopedBean someApplicationScopedBean;
public void doSomething() { String fooText = someApplicationScopedBean.getFooText(); // do something with fooText }}
We do not want to worry about doing stuff like bean injection.someApplicationScopedBean = … // where do I get this from???Bean injection is done automatically when using the @Inject annotation.
Thanks to CDI, we don‘t waste time writing unnecessary code.
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Java data transfer object (DTO)>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
public class UserDto { private String firstName; private String lastName; private Integer age;
public UserDto() {} // getter and setter}
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Marshalling and unmarshalling JSON data using Jackson is very easy
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
UserDto youngFabian = objectMapper.readValue( "{\"firstName\":\"Fabian\", \"lastName\":\"Urban\“, \"age\":19}", UserDto.class);
youngFabian.getAge(); > 19
ObjectMapper objectMapper = new ObjectMapper();
UserDto fabian = new UserDto("Fabian", "Urban", 27); String json = objectMapper.writeValueAsString(fabian); > {"firstName":"Fabian","lastName":"Urban","age":27}
OK, that‘s simple … but you do not really want to worry about writing that … do you?
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Applying JAX-RS resources can be that simple
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
@Path(“user“)public class UserResource { @POST @Path(“doSomething") @Consumes(MediaType.APPLICATION_JSON) @Produces(MediaType.APPLICATION_JSON) public UserDto doSomething(UserDto user) { // do something return user; } }
@javax.ws.rs.ApplicationPath(“resources“)public class UserManagerApp extends javax.ws.rs.core.Application {}
Why spend time on writing complicated code that does some routing and JSON marshalling/ unmarshalling if JAX-RS and Jackson can do that for you?
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Live Walkthrough>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
A Simple Chat Application Using JAX-RS and Jackson on
the Server Side
and
Ext.Ajax.request on the Client Side
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Ext Direct libs for Java>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
No standard lib but different implementations available:
directjngine http://code.google.com/p/directjngine/
extdirectspring http://code.google.com/p/extdirectspring/
extdirect4java http://code.google.com/p/extdirect4java
extdirectj-s2-plugin http://code.google.com/p/extdirectj-s2-plugin/
HQExtDirect http://bitbucket.org/cattus/hqextdirect/
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Enable Ext Direct on the Java back-end makes it even simpler
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
public class UserManager {
@ExtDirectAccess public UserDto doSomething(@Name(“user”) UserDto user) { user.setAge(19); return user; } }
var userDto = { firstName: ‘Fabian’, lastName: ‘Urban’, age: 27};var namedArguments = { user: userDto };UserManager.doSomething(namedArguments, function(returnedUserDto) { Ext.Window.MessageBox.alert(‘Fabians real age’,
returnedUserDto.age); // Fabians real age: 19});
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Live Walkthrough>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Simple Ext Direct Chat Application Using
JAX-RS and Jackson on the Server Side
and
Ext Direct Technology on the Client Side
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Less dependencies in the code makes maintaining code a lot easier
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Today we’ve learned that we do not really want to
worry about anything
We do not worry to
care about JSON
marshalling
We do not want to worry about
JSON unmarshalling
We do not want to worry about routing on the server
side
We do not want to worry about writing complex code to
invoke methods on the server side
But do we then want to worry about which methods are available on the server side?
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Less dependencies in the code makes maintaining code a lot easier
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
public class FooController { @Inject private EventController eventController;
public void handleFooEvent(@Observes FooEvent fooEvent) { // do something with event data BarEvent barEvent = new BarEvent(); eventController.fireGlobalEvent(barEvent); } }
@ClientEventpublic class FooEvent { // properties, // getters, // setters}
var fooEvent = { /* some foo event properties */ };eventController.fireGlobalEvent(‘de.fit4ria.event.FooEvent', fooEvent);
eventController.observes(‘de.fit4ria.event.BarEvent’, function(barEvent){ // do something with barEvent data});
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Live Walkthrough>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
The Event-based Version of the Chat Application
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Events vs. Ext Direct>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Event-based
loosely coupled code
perfectly integrates with CDI
Service-based (Ext Direct)client needs to know the services
perfectly integrates with Ext JS
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
ServerClient
We can easily delegate to methods on the client side
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
function doSomething() { FooManager.doA(); BarManager.doB(); XyzManager.doC(); doClientSideAction();}
public class FooManager { public void doA() {…}}
public class BarManager { public void doB() {…}}
public class XyzManager{ public void doC() {…}}
function doClientSideAction() { // do something}
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
ServerClient
… or on the server side>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
function doSomething() { SomeManager.doSomething(); doClientSideAction();}
function doClientSideAction() { // do something}
public class SomeManager { @Inject private FooManager fooManager; @Inject private BarManager barManager;
@Inject private XyzManager xyzManager;
public void doSomething() { fooManager.doA(); barManager.doB(); xyzManager.doC(); }}
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
client or server … doesn‘t matter
… or you don’t worry about delegation>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
eventController.fireGlobalEvent(“some.SomeEvent“);// clienteventController.fireGlobalEvent(new SomeEvent()); // server
SomeEvent
Client
eventController.observes(‘some.SomeEvent‘, function() { // do something});
Serverpublic class FooManager { public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do A */ }}
public class BarManager { public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do B */ }}
public class XyzManager { public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do C */ }}
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Summary>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Technologies / specifications like JAX-RS, Jackson and CDI simplify the code.
The enterprise Java standards not only support service-based, but also event-based applications. You have the choice!
Ext JS / Sencha Touch with a Java back-end is a perfect combination!
Wednesday, November 2, 11
Fabian Urban
© FORTIS IT-SERVICES GMBH
Thank you for listening
Contact:Fabian [email protected]
FORTIS IT-Service GmbHDuvenstedter Damm 7222397 Hamburg T: +49(0)40 607 699 22 Altenburger Straße 933699 BielefeldT: +49(0)521 920 198 40
>> Contact
Want to check examples of this talk?http://laboris.fortis-it.de/~urbanfbi/SenchaCon2011/ExtJSJavaHowto.pdf
Wednesday, November 2, 11