#theedge2012



Rich Ajax Platform
  By: Nickolay Borodachuk




       March 2012
All rights reserved @ Copyright AlphaCSP 2012   2
Modular business apps



             Multi Platform


            Single Sourcing
Cross platform




All rights reserved @ Copyright AlphaCSP 2012   4
Reuse your desktop app

                 98 % - Components reuse

                 80 % - Code reuse




                                                5
All rights reserved @ Copyright AlphaCSP 2012       5
Agenda

  Basic
    History
     Rap Vision
     Architecture
    Example
  Cool stuff
Basic
Web & RCP
Rich                     vs Web


o Rich client: Also known as a desktop application, native application,
  thick client, or fat client



o Web client: Also known as a web application, Internet/Intranet
   application, web user interface, and thin client




    ƒ



                                                                          8
RCP examples




               9
Rich Internet Client

o Rich web client: Also known as a rich Internet application, Ajax client,
   Web 2.0 client, and fat thin client.

    • Java Script - modify static content
    • Ajax - asynchronous requests

    • Dynamic JavaScript and HTML




Focus on one development language and environment.
                                                                             10
The Rich   Platform




                      11
History
 2006…2011




             12
History


RAP 0.1           RAP 1.1               RAP 1.3


 2006      2007       2008       2009      2010      2011



        Rap 1.0              RAP 1.2              RAP 1.4


                                                            13
RAP Vision
No need for WEB in…WEB
The RAP Vision




                 15
The RAP Vision




                 16
• Reusable components

• Consistent look & feel

• Save money

• Custom components




                           17
The RAP Vision




                 18
• Use only Java

• Tooling – Junit

• Full IDE support

• Much like SWT



     No need for HTML ! ! !
                              19
SWT example




                                                20
All rights reserved @ Copyright AlphaCSP 2012   20
The RAP Vision




                 21
• RCP powerful framework


• Plugins, plugins, plugins…


• Separates RCP into server and client


                                         22
The RAP Vision




                 23
• Third party source code

  • Easy to upgrade

  • Decouple applications development



Did you know ? As long as a plug-in is not currently in use, it can
      even be exchanged while an application is running
                                                                24
The RAP Vision




                 25
• No need to rewrite for WEB


• Little effort of developer side


• Use application vice versa




                                    26
The RAP Vision




                 27
• SWT part of the Eclipse


• Reimplements SWT


• Advantage compared to GWT or WICKET




                                        28
Architecture
RWT, QOOXDOO, Equinox




                        29
Architecture

       RCP     RAP




                     30
Architecture
QOOXDOO
// Create a button
var button1 = new qx.ui.form.Button("First Button", "icon/22/apps/internet-web-
browser.png");

// Document is the application root
var doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(button1,
{
  left : 100,
  top : 50
});
 // Add an event listener
button1.addListener("execute", function(e) {
  alert("Hello World!");
});
                                                                                  32
Architecture




Did you know? The word equinox means equal day and night 33
“ Always code as if the person who will
     maintain your code is a maniac
     serial killer that knows where you live.”

                          “..Visual C++, Tip of the day…”




                                                            34
What you know so far

               JFace   Workbench
    SWT




                                   35
Example
RCP to RAP in 5 minutes
RCP Mail




           37
Demo




       38
API Differences

RCP
aboutAction = AboutAction.ABOUT.create(window);
register(aboutAction);

RAP
aboutAction = new AboutAction(window);
register(aboutAction);


RAP + RCP
aboutAction = AboutActionHelper.create(window);
register(aboutAction);
                                                  39
Demo continued




                 40
Different app , same code
42
Cool stuff
Branding, Extension, Theming..
Testing

Supports standard JUnit testing
          public class MyTest extends TestCase {
           ...//
          {



Visible interface tests
          public class MyTest extends RAPTestCase {
           ...//
          {



                                                      44
Branding



             Define visual aspects


           Special branding for group


                  Theming - CSS
plugin.xml




 Themes

Register the New Theme

<extension
         id="firstTheme"
         point="org.eclipse.rap.ui.themes">
      <theme
             file="themes/myTheme/new.css"
             id="RCP.theme1"
             name="theme1">
      </theme>
         </extension>
Activate the Theme

<extension
         point="org.eclipse.rap.ui.branding">
      <branding
            defaultEntrypointId="RCP.entrypoint1"
            id="RCP.branding1"
            servletName="RCP.branding1"
            themeId="RCP.theme1">
      </branding>
   </extension>
                                                      46
Result




         47
Even more…

Run in cluster




RAP mobile




Easy deployment   Libra
                          48
Summary
    Rapid development
    Stay away from writing JavaScript, HTML and CSS




    Single Codebase - RAP can be compiled into an
    RCP application and Native mobile as well.

                                                    49
References

                                                http://wiki.eclipse.org/RAP
                   By Fabian Lange
                                                http://www.eclipse.org/rap/


                                                 By Ralf Sternberg




                                                                              50
All rights reserved @ Copyright AlphaCSP 2012                                 50
Contact details




nikolaib@alphacsp.com

Rich Ajax Platform - theEdge 2012 conference presentation

  • 1.
    #theedge2012 Rich Ajax Platform By: Nickolay Borodachuk March 2012
  • 2.
    All rights reserved@ Copyright AlphaCSP 2012 2
  • 3.
    Modular business apps Multi Platform Single Sourcing
  • 4.
    Cross platform All rightsreserved @ Copyright AlphaCSP 2012 4
  • 5.
    Reuse your desktopapp 98 % - Components reuse 80 % - Code reuse 5 All rights reserved @ Copyright AlphaCSP 2012 5
  • 6.
    Agenda Basic History Rap Vision Architecture Example Cool stuff
  • 7.
  • 8.
    Rich vs Web o Rich client: Also known as a desktop application, native application, thick client, or fat client o Web client: Also known as a web application, Internet/Intranet application, web user interface, and thin client ƒ 8
  • 9.
  • 10.
    Rich Internet Client oRich web client: Also known as a rich Internet application, Ajax client, Web 2.0 client, and fat thin client. • Java Script - modify static content • Ajax - asynchronous requests • Dynamic JavaScript and HTML Focus on one development language and environment. 10
  • 11.
    The Rich Platform 11
  • 12.
  • 13.
    History RAP 0.1 RAP 1.1 RAP 1.3 2006 2007 2008 2009 2010 2011 Rap 1.0 RAP 1.2 RAP 1.4 13
  • 14.
    RAP Vision No needfor WEB in…WEB
  • 15.
  • 16.
  • 17.
    • Reusable components •Consistent look & feel • Save money • Custom components 17
  • 18.
  • 19.
    • Use onlyJava • Tooling – Junit • Full IDE support • Much like SWT No need for HTML ! ! ! 19
  • 20.
    SWT example 20 All rights reserved @ Copyright AlphaCSP 2012 20
  • 21.
  • 22.
    • RCP powerfulframework • Plugins, plugins, plugins… • Separates RCP into server and client 22
  • 23.
  • 24.
    • Third partysource code • Easy to upgrade • Decouple applications development Did you know ? As long as a plug-in is not currently in use, it can even be exchanged while an application is running 24
  • 25.
  • 26.
    • No needto rewrite for WEB • Little effort of developer side • Use application vice versa 26
  • 27.
  • 28.
    • SWT partof the Eclipse • Reimplements SWT • Advantage compared to GWT or WICKET 28
  • 29.
  • 30.
    Architecture RCP RAP 30
  • 31.
  • 32.
    QOOXDOO // Create abutton var button1 = new qx.ui.form.Button("First Button", "icon/22/apps/internet-web- browser.png"); // Document is the application root var doc = this.getRoot(); // Add button to document at fixed coordinates doc.add(button1, { left : 100, top : 50 }); // Add an event listener button1.addListener("execute", function(e) { alert("Hello World!"); }); 32
  • 33.
    Architecture Did you know?The word equinox means equal day and night 33
  • 34.
    “ Always codeas if the person who will maintain your code is a maniac serial killer that knows where you live.” “..Visual C++, Tip of the day…” 34
  • 35.
    What you knowso far JFace Workbench SWT 35
  • 36.
    Example RCP to RAPin 5 minutes
  • 37.
  • 38.
  • 39.
    API Differences RCP aboutAction =AboutAction.ABOUT.create(window); register(aboutAction); RAP aboutAction = new AboutAction(window); register(aboutAction); RAP + RCP aboutAction = AboutActionHelper.create(window); register(aboutAction); 39
  • 40.
  • 41.
    Different app ,same code
  • 42.
  • 43.
  • 44.
    Testing Supports standard JUnittesting public class MyTest extends TestCase { ...// { Visible interface tests public class MyTest extends RAPTestCase { ...// { 44
  • 45.
    Branding Define visual aspects Special branding for group Theming - CSS
  • 46.
    plugin.xml Themes Register theNew Theme <extension id="firstTheme" point="org.eclipse.rap.ui.themes"> <theme file="themes/myTheme/new.css" id="RCP.theme1" name="theme1"> </theme> </extension> Activate the Theme <extension point="org.eclipse.rap.ui.branding"> <branding defaultEntrypointId="RCP.entrypoint1" id="RCP.branding1" servletName="RCP.branding1" themeId="RCP.theme1"> </branding> </extension> 46
  • 47.
  • 48.
    Even more… Run incluster RAP mobile Easy deployment Libra 48
  • 49.
    Summary Rapid development Stay away from writing JavaScript, HTML and CSS Single Codebase - RAP can be compiled into an RCP application and Native mobile as well. 49
  • 50.
    References http://wiki.eclipse.org/RAP By Fabian Lange http://www.eclipse.org/rap/ By Ralf Sternberg 50 All rights reserved @ Copyright AlphaCSP 2012 50
  • 51.