Java Server-side Breakout

  • 4,370 views
Uploaded on

Understand the approaches and best practices for integrating client side applications - both desktop and mobile - with various server-side technologies. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,370
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
64
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Fabian Urban >> SenchaCon 2011 Fabian Urban FORTIS Using Ext JS with a Java Back-end © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 2. Fabian Urban 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 :-) © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 3. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination What is perfect??? application save runs time smoothly write less code Perfect! performance optimized minimize risk of writing error prone easy code © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 4. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Having a container has many advantages No need to persist data across requests. Use different scopes. Better performance: No need to recreate instances for every request. No unnecessary database access. Client 1 Request Session Application Request A Scoped Beans Scoped Scoped Beans Beans Client 1 Request Request B Scoped Beans Client 2 Request Session Request A Scoped Beans Scoped Beans Client 2 Request Request B Scoped Beans © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 5. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination If an application is declared to be final, then it has to be final Development Server Application database=DEV Database user=foo DEV password=bar Production Server Database PROD © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 6. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination … so we don’t have to update the configuration before every deployment Development Server Application MyDS database=DEV DataSource=MyDS user=foo Database password=bar DEV Production Server MyDS database=PROD user=abc Database password=def PROD © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 7. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination The less we have to do the earlier it’s done Without Connection Pooling (open / close database connection for each request) With Connection Pooling © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 8. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Having a container has many advantages Java Application Server (Development) DataSource Application DataSource: MyDs Configuration No open / close database connection for each request. Connection Database Better Database performance Pooling Dev (No session overhead). Java Application Server (Prod) DataSource Application DataSource: MyDs Configuration Deploy application without spending time on updating Connection Database login credentials Pooling Prod © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 9. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Web applications must run as smoothly as desktop applications Server-side Rendering NETWORK SERVER Client-side Rendering No rendering is done on the server side: less network traffic. Web applications run smoothly like desktop applications. © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 10. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Using better technologies means writing less error prone code  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). © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 11. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Using better technologies means: writing less code @ApplicationScoped public class SomeApplicationScopedBean { private String fooText; public String getFooText() { return fooText; } public void setFooText(String fooText) { this.fooText = fooText; } } @SessionScoped public class SomeSessionScopedBean { @Inject private SomeApplicationScopedBean someApplicationScopedBean; We do not want to worry about {doing stuff like bean injection. public void doSomething() someApplicationScopedBean someApplicationScopedBean.getFooText(); String fooText = = … // where do I get this from??? Bean injection somethingautomatically when using the @Inject annotation. // do is done with fooText } } Thanks to CDI, we don‘t waste time writing unnecessary code. © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 12. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Java data transfer object (DTO) public class UserDto { private String firstName; private String lastName; private Integer age; public UserDto() {} // getter and setter } © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 13. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Marshalling and unmarshalling JSON data using Jackson is very easy ObjectMapper objectMapper = new ObjectMapper(); UserDto fabian = new UserDto("Fabian", "Urban", 27); String json = objectMapper.writeValueAsString(fabian); > {"firstName":"Fabian","lastName":"Urban","age":27} UserDto youngFabian = objectMapper.readValue( "{"firstName":"Fabian", "lastName":"Urban“, "age":19}", UserDto.class); youngFabian.getAge(); > 19 OK, that‘s simple … but you do not really want to worry about writing that … do you? © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 14. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Applying JAX-RS resources can be that simple @javax.ws.rs.ApplicationPath(“resources“) public class UserManagerApp extends javax.ws.rs.core.Application { } @Path(“user“) public class UserResource { @POST Why spend time on @Path(“doSomething") writing complicated @Consumes(MediaType.APPLICATION_JSON) code that does some @Produces(MediaType.APPLICATION_JSON) routing and JSON public UserDto doSomething(UserDto user) { marshalling/ // do something unmarshalling if JAX-RS and Jackson return user; can do that for } you? } © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 15. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Live Walkthrough A Simple Chat Application Using JAX-RS and Jackson on the Server Side and Ext.Ajax.request on the Client Side © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 16. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Ext Direct libs for Java  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/ © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 17. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Enable Ext Direct on the Java back- end makes it even simpler 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 }); © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 18. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Live Walkthrough Simple Ext Direct Chat Application Using JAX-RS and Jackson on the Server Side and Ext Direct Technology on the Client Side © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 19. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Less dependencies in the code makes maintaining code a lot easier We do not worry to We do not want to care about worry about writing We do not want JSON complex code to to worry about marshalling invoke methods on JSON the server side unmarshalling But do w We do not Today we’ve want t e then want to worry learned that we do o worr about routing not really want to about y on the server worry about which method s availa are side anything bl server e on the side? © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 20. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Less dependencies in the code makes maintaining code a lot easier public class FooController { @Inject private EventController eventController; public void handleFooEvent(@Observes FooEvent fooEvent) { // do something with event data BarEvent barEvent = new BarEvent(); @ClientEvent eventController.fireGlobalEvent(barEvent); public 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 }); © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 21. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Live Walkthrough The Event-based Version of the Chat Application © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 22. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Events vs. Ext Direct Event-based Service-based (Ext Direct)  loosely coupled client needs to code know the services  perfectly perfectly integrates with integrates with CDI Ext JS © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 23. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination We can easily delegate to methods on the client side Client Server public class FooManager { public void doA() {…} } function doSomething() { public class BarManager { FooManager.doA(); public void doB() {…} BarManager.doB(); } XyzManager.doC(); public class XyzManager{ doClientSideAction(); public void doC() {…} } } function doClientSideAction() { // do something } © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 24. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination … or on the server side Client Server public class SomeManager { @Inject private FooManager fooManager; @Inject private BarManager barManager; @Inject private XyzManager xyzManager; function doSomething() { SomeManager.doSomething(); public void doSomething() { doClientSideAction(); fooManager.doA(); } barManager.doB(); xyzManager.doC(); function doClientSideAction() { } // do something } } © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 25. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination … or you don’t worry about delegation client or server … doesn‘t matter Some eventController.fireGlobalEvent(“some.SomeEvent“);// client Event eventController.fireGlobalEvent(new SomeEvent()); // server Server public 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 */ } } Client eventController.observes(‘some.SomeEvent‘, function() { // do something }); © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 26. Fabian Urban >> Ext JS / Sencha Touch with a Java back-end is a perfect combination Summary  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! © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  • 27. Fabian Urban >> Contact Thank you for listening Contact: Fabian Urban fabian.urban@fortis-it.de www.fortis-it.de FORTIS IT-Service GmbH Duvenstedter Damm 72 22397 Hamburg T: +49(0)40 607 699 22 Altenburger Straße 9 33699 Bielefeld T: +49(0)521 920 198 40 Want to check examples of this talk? http://laboris.fortis-it.de/~urbanfbi/SenchaCon2011/ExtJSJavaHowto.pdf © FORTIS IT-SERVICES GMBHWednesday, November 2, 11