SlideShare uma empresa Scribd logo
1 de 64
Baixar para ler offline
VJET bringing the best
of JavaTM and
JavaScriptTM together
Greg Choi, Justin Early, and
Yitao Yao
eBay
Why are we here?




                   2
What’s Missing in JavaScript
>   Contract based design and programming
      strongly typed API
      interfaces

>   Namespace management
      packages

>   Data encapsulation
      visibility and access control

>   Classic inheritance

>   Dependency management
      imports

                                            3
Our Answer:
Semantic Equivalence
>   Bring the best of Java to JavaScript
>   Put the “Java” in JavaScript

How?
>   Add typing system to JavaScript
>   Enable Java-like modeling concepts and
    programming constructs for JavaScript


                                             4
Why Java-Like?
>   Proven modeling and programming paradigm

>   Proven tooling and process support

>   Proven manageability of large-scale enterprise
    applications

    Break down the barriers between Java and JavaScript
                            AND
         Enable large scale JavaScript development
                                                          5
TM                   TM
Bring the Best of Java to JavaScript
>   package, imports
>   class, interface, enum, abstract class, inner and
    anonymous class, mixin, o-type
>   extends and implements
>   generics
>   static and instance
>   formal constructors, properties and methods
>   static initialization
>   super and override
>   overloaded constructors and methods
>   modifiers: public, protected, private, final

                                                             6
VJET Package and Class

                        Package

                              Class = ctype
package x.y.z;
                                              vjo.ctype('x.y.z.Person')//<public
public class Person {
                                     (Java)                                   (JS)




                         Public modifier




                                                                                     7
VJET Interfaces and Generics



                                       vjo.itype('a.b.c.IFoo<T>') //< public
package a.b.c;                         .protos({
public interface IFoo<T> {                 //>public T getName();
    public T getName();                    getName: vjo.NEEDS_IMPL
}                         (Java)       })                                    (JS)




                            Generic for type
             Generic for return type




                                                                                    8
VJET extends, implements, import

                import = needs

import   javaone.abc.ABase;
import   javaone.abc.HisUtil;              vjo.ctype('javaone.xyz.Abc') //< public
import   javaone.abc.IMine;                .needs('javaone.abc.HisUtil')
import   javaone.abc.IYours;               .inherits('javaone.xyz.ABase')
                                           .satisfies('javaone.abc.IMine')
public class Abc extends ABase             .satisfies('javaone.abc.IYours')      (JS)
implements IMine, IYours {

}                                (Java)



                                     extends = inherits

                       Implements = satisfies


                                                                                    9
VJET Enum
                       Enum = etype




package x,y,z;                        vjo.etype(‘x.y.z.MyEnum') //< public
public enum MyEnum {                  .values("a,b,c")
    a,b,c                             .endType();                            (JS)
}                           (Java)




                        names




                                                                               10
VJET Static and Instance Properties


                                             .props({
                                                 // Static goes here
public static final int MAX = 12;                MAX:12 //< public final int
                                             })
                                             .protos({
                                                 // Instance goes here
                                                m_name:"Justin"//<private String
private String m_name = “Justin";
                                    (Java)   })                                (JS)




                                                                                   11
VJET Typing and Semantic Declaration
>   VJET comment syntax uses familiar Java-like declaration
    syntax, with a directional indicator: //> or //<

>   VJET comment syntax can be expressed on one line


     .protos({                                   final Modifier
        m_mother:null, //< private final Tiger
                                                 Access Modifier
       //> public void hunt(IAnimal pray)
       hunt:function(pray){                      Type
          this.roar();
          this.base.hunt(pray);
       },                                                          (JS)



                                                                          12
VJET Constructor
              Person = constructs in VJET

                              Parameter type


                                             .protos({
public Person(String name){                  //>public constructs(String name)
                                    (Java)   constructs:function(name){
}                                            }                               (JS)
                                             })



              Access modifier


                                Constructs defined in protos


                                                                                    13
VJET Methods
                      Return Type

                                     Parameter type


public void setName(String name) {            //> public void setName(String)
    m_name = name;                            setName:function(name){
}                                    (Java)       this.m_name=name;
                                              }                               (JS)




              Access modifier




                                                                                     14
VJET Static Property

                              Final Modifier

                                    Type
                     Access

                                               .props({
public static final int MAX = 12;                  MAX:12 //<public int final
                                    (Java)     })                               (JS)




                                                                                15
VJET Overloading

                                             No argument


public void doIt() {                        //> public void doIt()
}                                           //> public void doIt(String)
                                            doIt:function(name){
public void doIt(String foo) {                 // internally must handle
}                                              // variation – our code gen
                                   (Java)      // helps here
                                            }
                                                                             (JS)



                        String argument




                                                                                    16
VJET Varargs

                                           Varargs



public void a(Date... arg){            //>public void a(Date... arguments)
                                       a:function(){
}                             (Java)
                                       }                               (JS)




                                                                              17
VJET Static Initialization

                                               vjo.ctype('x.y.z.Person')
static {                                       .inits(function(){
    String mystatic = “test”;
                                      (Java)
                                                 vars_mystatic==“test” //<String
                                                     mystatic    “test” //<String
}
                                               }).endType();                   (JS)




                 A                                                 A


             B       C                                         B       C

 Class loader – handles static init            VJET Runtime – handles static init
 Where a circular dependency exists            Where a circular dependency exists


                                                                                    18
Sample VJET Type
vjo.ctype('javaone.j4j.oom.Tiger') //< public
.needs(['javaone.j4j.oom.IAnimal','vjo.java.lang.System'])
.inherits('javaone.j4j.oom.Cat')
.satisfies('javaone.j4j.oom.IPanthera')
.props({
   //> public String getSpeciesType()
   getSpeciesType:function(){
      return "CAT";
   }
})
.protos({
   m_mother:null, //< private final Tiger
   //> public constructs(Tiger mother)
   constructs:function(mother){
      this.base();
      this.m_mother=mother;
   },
   //> public void hunt(IAnimal pray)
   hunt:function(pray){
      this.roar();
      this.base.hunt(pray);
   },
   //> public void roar()
   roar:function(){
      this.vj$.System.out.println("I am tiger");
   }
})
.endType();                                                  (JS)


                                                                    19
What is VJET?
>   Not another widget library
>   Not an application framework

>   Java and JavaScript + Enterprise technology
    = A super boost for productivity

>   VJET blends the best of Java and JavaScript
    language and tooling, for a powerful development
    experience

                                                       20
21
VJET Type System
>   VJET Parser handles VJET structural definition and VJET
    comment syntax, on top of JavaScript syntax

>   VJET Abstract Syntax Tree (JST), analogous to Java AST,
    represents Java-like types and semantics in addition to
    JavaScript language constructs

>   VJET Type Space Management supports:
      indexed type, hierarchy, reference and dependent search
      update, refactoring
      syntactic and semantic validation
      tool integration and more …

>   VJET Type Meta enables “typed” Object Serialization

                                                                22
Tooling in VJET IDE
    Code assistance and completion

    Search for types, references, declarations

    Type hierarchies and call hierarchies

    Validation – not only syntax but also semantic!

    Refactor and even browser specific functionality help

    Many more …


                                                            23
24
25
26
27
28
29
Runtime Type Loading Service
>   Analogous to Java ClassLoader

>   No global type tempering (such as modification of
    Object and Function prototype)

>   Supports dynamic type loading

>   Manages type resolution and initialization order
    based on type dependencies (including circular
    dependency)
                                                        30
VJET Supports Common Java Libraries
vjo.java.lang.* & vjo.java.util.*


List<String> li = new ArrayList<String>();            (Java)




var li = new this.vj$.ArrayList(); //< List<String>     (JS)




                                                               31
Why not write VJET code completely in
Java?

>   Write JavaScript code using Java types

>   Enable Java developers to author JavaScript
      Use a familiar programming language – Java
      Use familiar IDE features
      No mental switch on keywords and constructs
      No confusion about JavaScript scoping
       x = 1;
       var x =1;
       this.x = 1;       (JS)



                                                    32
Leverage Java and JavaScript in Java
>   Enable Java-to-JavaScript language translation

>   Take the best of JavaScript and add it to Java
      Closures
      Function
      Object literal

>   Make native JavaScript types available in Java
      Global JavaScript functions and types
      Browser and DOM objects
      VJET and third-party JavaScript libraries

                                                     33
Translation + Interoperation: Java to JS


                 Write      Java
                           Types

    Java
    Developers




                                     Used by
                         Generated
                         JS Types              JavaScript
                                               Developers

                                                            34
VJET Java to JS Translation Service
>   Java    JavaScript - a full language translation

>   Supports most Java language features and object
    modeling semantics

>   Syntactical and structural resemblance

>   Semantic equivalence

>   Provides extension for custom translation

                                                       35
VJET Java to JS Translation
public static void itration() {                   //> public void itration()
  List<String> li = new ArrayList<String>();      itration:function(){
  Iterator<String> itr = li.iterator();              var li=new this.vj$.ArrayList();
  while (itr.hasNext()) {                            var itr=li.iterator();
     System.out.println(itr.next());                 while(itr.hasNext()){
  }                                                     this.vj$.System.out.println(itr.next());
  int[] arr = new int[]{1, 2, 3};                    }
  for (int i = 0; i < arr.length; i++) {             var arr=[1,2,3];
    System.out.println(arr[i]);                      for (var i=0;i<arr.length;i++){
  }                                                     this.vj$.System.out.println(arr[i]);
  Array jsArr = new Array("abc", 123, 14.5);         }
  jsArr.push("xyz");                                 var jsArr=["abc",123,14.5];
  for (Object val : jsArr) {                         jsArr.push("xyz");
    System.out.println(val);                         for (var val in jsArr){
  }                                                     this.vj$.System.out.println(val);
}
                                         (Java)      }
                                                  }                                          (JS)




                                                                                                    36
Author JavaScript using Java
public static boolean myOnclick(MouseEvent e) {
  HtmlButton b = (HtmlButton)e.getTarget();
  b.blur();
  b.attachEvent("click", MyJsType.update);
  HtmlTextArea msgArea =
      docx.getTextArea("messageArea");
  String value = msgArea.getValue();
  win().alert(js.escape(value));
  HtmlSpan span = docx.span();
  span.setClassName("warn");
  span.setInnerHTML(value);
  msgArea.getParentNode().insertBefore(span, msgArea);
  return true;
}
                                                  (Java)



                                                           37
VJET Java to JS Translation
 //> public boolean myOnclick(MouseEvent e)
 myOnclick:function(e){
    var b=e.target || window.event.srcElement;
    b.blur();
    b.attachEvent("click",this.vj$.MyJsType.update);
    var msgArea=document.getElementById("messageArea");
    var value=msgArea.value;
    window.alert(escape(value));
    var span=document.createElement('span');
    span.className="warn";
    span.innerHTML=value;
    msgArea.parentNode.insertBefore(span,msgArea);
    return true;
 },
                                                          (JS)




                                                                 38
TM                            TM
The Best of Java                 and JavaScript
Together at Last!


                            VJET

      Object Literal                    generics

              Functional                 interface
              programming
                                        class
                closures
     Mixins                                     varargs
                                        enum
          Prototypical
          inheritance                    Access control


                                                               39
Access Existing JavaScript from Java:
JS to Java API Translation Service

>   Produces Java API (NativeJsProxy) from VJET
    types authored in JavaScript

>   Exposes functional programming features to Java
    API, where function and type reference become
    first level programming constructs




                                                      40
Translation + Interoperation:
JS to Java API

                 Write                   Can
                          JS Types     Delegate     Legacy
                                          to        Js code
    JavaScript
    Developers




                         Java Native      Used by
                            Proxy
                             API                    Java
                                                    Developers

                                                                 41
JS to Java API
vjo.ctype("javaone.js.MyJsType")
.protos({                                       public class MyJsType extends NativeJsProxy {
   m_index: 0, //<int
   //>public void constructs(int)                   public MyJsType(int index) {
   constructs: function(index) {                      super(index);
     this.m_index = index;                          }
   },                                               public static void update(boolean increament) {
   //>public void doit()                              callStatic(increament);
   doit: function() {                               }
     alert(this.m_index);                           public void doit() {
   }                                                  call();
})                                                  }
.props({                                            public static final NativeJsTypeRef prototype =
  s_counter: 0, //<int                                NativeJsTypeRef.get(MyJsType.class);
  //>public void update(boolean)                    public static final INativeJsFuncProxy update =
  update: function(increament) {                      NativeJsFuncProxy.create(prototype, "update");
    alert(increament? this.s_counter++ :            public final INativeJsFuncProxy doit =
      this.s_counter--);                              NativeJsFuncProxy.create(this, "doit");
                                                }                                            (Java)
  }
})
.endType();                              (JS)


                                                                                                       42
VJET Java Core Library for JavaScript
>   Java API for
      JS global functions – VJ.js.*
      JS native types:
        Array, Object Literal, Function
      Browser, DOM and Events (w3c – based)
      Convenient DOM operation – VJ.docx.*
      Functional Programming Extension – VJ.jsx.*
        Function reference
        Type reference
        Hitch (function scope closure)
        Curry (function arguments closure)


                                                    43
Access JS Native Types from Java

///import com.ebay.dsf.dap.proxy.Array;// Proxy to JavaScript native array
///…
Array jsArr = new Array("abc", 123, 14.5);
for (Object val : jsArr) {
      System.out.println(val);
}                                                                       (Java)




var jsArr=["abc",123,14.5];
for (var val in jsArr){
    this.vj$.System.out.println(val);
}                                                                         (JS)




                                                                                 44
Access Native JS Functions from Java

String rtn = (String)js.eval(js.escape(txt));
js.encodeURI(rtn);

win().setTimeout(js, 100);
int id = win().setInterval(AJsType.update, 10);
win().clearInterval(id);
                                                     (Java)




 var rtn=eval(escape(txt));
 encodeURI(rtn);

 window.setTimeout(js,100);
 var id=window.setInterval(this.vj$.AJsType.update,10);
 window.clearInterval(id);
                                                         (JS)
                                                     (

                                                                45
Access Browser DOM Functions from
Java
HtmlButton b = (HtmlButton)e.getTarget();
b.blur();
HtmlSpan span = docx.span();
span.setClassName("warn");
span.setInnerHTML("<b>Hi</b>");
Node msgArea = doc().getElementById("messageArea");
msgArea.getParentNode().insertBefore(span, msgArea);   (Java)




var b=e.target || window.event.srcElement;
b.blur();
var span=document.createElement('span');
span.className="warn";
span.innerHTML="<b>Hi</b>";
var msgArea=document.getElementById("messageArea");
msgArea.parentNode.insertBefore(span,msgArea);
                                                         (JS)


                                                                46
Java API for Functional Programming
MyVjoType2 a = new MyVjoType2(); // native proxy
a.doIt2("test");
a.doIt2.call(a, "test");
a.doIt2.apply(new MyVjoType2(), new Object[]{"test"} );

MyVjoType2.doIt("test" );
MyVjoType2.doIt.call(MyVjoType2.prototype, "test");
                                                          (Java)




 var a=new this.vj$.MyVjoType2();
 a.doIt2();
 a.doIt2.call(a);
 a.doIt2.apply(new this.vj$.MyVjoType2(),{‘test’});

 this.vj$.MyVjoType2.doIt(“test”);
 this.vj$.MyVjotype2.doIt.call(this.vj$.MyVjoType2,false);
                                                             (JS)



                                                               47
JavaScript Library Integration
>   External JavaScript Libraries are easily integrated

>   VJET typing annotation provides non-intrusive way
    to integrate non-VJET JavaScript libraries

>   No modifications needed for non-VJET JavaScript

>   Typed API becomes available for both JavaScript
    and Java

                                                          48
Integration of Third Party JS Library -
JQuery
>   Create VJET API definition for existing JS library -
    jQuery
vjo.ctype("vjo.dsf.jqueryx.Jq")
.needs('vjo.dsf.jqueryx.Jqueryx')
.protos({
    //> public Element get(int index)
    //> public Array get()
    get:function() {},
    //> public Array queue()
    //> public Array queue(String name)
    //> public Jq queue(Function callback)
    //> public Jq queue(String name, Function callback)
    //> public Jq queue(Array queue)
    //> public Jq queue(String name, Array queue)
    queue:function(){},….
                                                          (JS)



                                                           49
Sample jQuery Usage in both Java and
JavaScript

Jq.$(".slide").slideToggle("slow");
                                      (Java)




$(".slide").slideToggle("slow");
                                       (JS)




                                               50
VJET Active Programming Model
>   VJET enhanced scripting service supports interoperability between
    Java and JavaScript, and blurs the boundary between the Java and
    JavaScript languages

>   In Active Programming mode, Java types are loaded and executed in
    their authored forms (Java or JavaScript), while naturally interacting
    with other JavaScript types and objects

>   Under Active Programming mode, native JavaScript types can live in
    the Java space via proxies, and Java objects can live in the script
    space, with object identity preserved across language boundaries

                      What you write is what
                       you run and debug!!

                                                                             51
Java + JS Runtime Interoperation




                  Java
     JS Types    Types           JS Types



                 Script Engine

                     JVM



                                            52
Running JavaScript in Active Mode
Order of Execution
1   var lion = new this.vj$.Lion('Leo', 450, true);      calling to Lion.js
2   var tigress = new this.vj$.Tiger('Tigris', 350, false);     calling to Tiger.js
3   var son = new this.vj$.Liger(lion, tigress, 'Hercules', true);       calling to Liger.java

          public Liger(Lion father, Tiger mother, String name, boolean isMale) {
                    m_father = father;
                    m_mother = mother;
4                   m_gene = father.getGene()|mother.getGene();       calling to Cat.js
          }

5                     getGene:function(){return this.m_gene;}

6   var hasMarriedParents = son.areParentsMarried();         calling to Liger.java

          public boolean areParentsMarried() {
7                              return m_father.getSpouse() == m_mother;              calling to Cat.js
          }


                                                                                                         53
End-to-End Web Application
Development
>   VJET’s Browser Emulation and Communication
    Services enables live execution, debugging, and
    updates of a client-side JavaScript application from a
    single IDE

>   Render applications in a modern web browser while
    executing and debugging JavaScript in VJET’s Virtual
    Browser

>   Enables a productive development process


                                                             54
VJET Virtual Browser
>   Provides browser based scripting environment

>   Enables vendor specific browser behavior

>   Supports “single-threaded” JS execution model
    with proper timer events




                                                    55
VJET Duplex Live Connect (DLC)
Virtual to External Browser Connection
>   Combining the VJET Virtual Browser with VJET
    DLC enables:
     Native browser binding for graphical rendering
     and user interaction
     Auto-DOM-sync between virtual and native
     browsers
     Capture and replay for interactive browser
     session
     Auto-generation of JUnit tests with window
     events, user interactions and AJAX operations

                                                      56
Run JavaScript in VJET Virtual Browser

                               Page
                          Request/Response

                      User Action/Browser Event




                    Event
                 Msg (DOM sync)                   DOM




                                                        57
The Best of JavaTM Libraries and
          TM
JavaScript Libraries
       Web Browser                      Server




                              VJET
         java.util                     jquery
                       VJET
        java.lang                      Js libs



          VJET
           VJET                         VJET
                                         VJET
         Browser                        Java’s
       Script Engine                 Script Engine

                                                     58
Recap

       Java developers JS developers
    Larger pool of talent      Difficult to find talent
                               Increasing need for client side
    Established patterns         interactive behavior
   Sophisticated tools ++      Managing complexity is difficult
                               Browser incompatibilities hamper
 Standardized technologies      quality
Large collection of commonly
        used libraries         Multiple library use is problematic


                                                                     59
Benefits
>   JavaScript developers can enjoy Java-like
    modeling and tooling
>   Break down language barriers and enable Java
    developers to develop interactive web applications
>   Write, Run, Debug, all in one IDE
>   Leverage existing Java and JavaScript skill sets
    between both programming environments
>   Enable large scale, enterprise level JavaScript
    application development


                                                         60
Today @ eBay
>   Java developers also work on JavaScript
>   JavaScript developers also work on Java
>   Tooling has blurred the line between
     Java and JS Languages
     Browsers
     JavaScript and Java Libraries

               The Gap is Gone!

                                              61
One More Thing…
>   Announcement from eBay Leaders
     Mark Palaima - Chief Architect & eBay Fellow
     James Barrese - VP, Systems Dev (Architecture)




                                                      62
Q&A




      63
Justin Early
jearly@ebay.com
Yitao Yao
yyao@ebay.com
Booth #733


                  64

Mais conteúdo relacionado

Mais procurados

2008 Sccc Inheritance
2008 Sccc Inheritance2008 Sccc Inheritance
2008 Sccc Inheritancebergel
 
Sql server difference faqs- 3
Sql server difference faqs- 3Sql server difference faqs- 3
Sql server difference faqs- 3Umar Ali
 
Introduction à dart
Introduction à dartIntroduction à dart
Introduction à dartyohanbeschi
 
Javabeanproperties
JavabeanpropertiesJavabeanproperties
Javabeanpropertiesvamsitricks
 
13 gui development
13 gui development13 gui development
13 gui developmentAPU
 
eROSE: Guiding programmers in Eclipse
eROSE: Guiding programmers in EclipseeROSE: Guiding programmers in Eclipse
eROSE: Guiding programmers in EclipseThomas Zimmermann
 
FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010David Nuescheler
 
Caching techniques in python, europython2010
Caching techniques in python, europython2010Caching techniques in python, europython2010
Caching techniques in python, europython2010Michael Domanski
 
HATARI: Raising Risk Awareness
HATARI: Raising Risk AwarenessHATARI: Raising Risk Awareness
HATARI: Raising Risk AwarenessThomas Zimmermann
 
クラウド・アプリケーション・アーキテクチャ
クラウド・アプリケーション・アーキテクチャクラウド・アプリケーション・アーキテクチャ
クラウド・アプリケーション・アーキテクチャTomoharu ASAMI
 
Java e i database: da JDBC a JPA
Java e i database: da JDBC a JPAJava e i database: da JDBC a JPA
Java e i database: da JDBC a JPAbenfante
 
DCI
DCIDCI
DCIlpld
 

Mais procurados (17)

2008 Sccc Inheritance
2008 Sccc Inheritance2008 Sccc Inheritance
2008 Sccc Inheritance
 
Con5623 pdf 5623_001
Con5623 pdf 5623_001Con5623 pdf 5623_001
Con5623 pdf 5623_001
 
Sql server difference faqs- 3
Sql server difference faqs- 3Sql server difference faqs- 3
Sql server difference faqs- 3
 
Introduction à dart
Introduction à dartIntroduction à dart
Introduction à dart
 
Javabeanproperties
JavabeanpropertiesJavabeanproperties
Javabeanproperties
 
京都Gtugコンパチapi
京都Gtugコンパチapi京都Gtugコンパチapi
京都Gtugコンパチapi
 
Lecture17
Lecture17Lecture17
Lecture17
 
Deep dive into Oracle ADF
Deep dive into Oracle ADFDeep dive into Oracle ADF
Deep dive into Oracle ADF
 
13 gui development
13 gui development13 gui development
13 gui development
 
eROSE: Guiding programmers in Eclipse
eROSE: Guiding programmers in EclipseeROSE: Guiding programmers in Eclipse
eROSE: Guiding programmers in Eclipse
 
FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010FrOScamp Zurich: Introducing JCR - 2010
FrOScamp Zurich: Introducing JCR - 2010
 
Caching techniques in python, europython2010
Caching techniques in python, europython2010Caching techniques in python, europython2010
Caching techniques in python, europython2010
 
Kotlin After 9 Months
Kotlin After 9 MonthsKotlin After 9 Months
Kotlin After 9 Months
 
HATARI: Raising Risk Awareness
HATARI: Raising Risk AwarenessHATARI: Raising Risk Awareness
HATARI: Raising Risk Awareness
 
クラウド・アプリケーション・アーキテクチャ
クラウド・アプリケーション・アーキテクチャクラウド・アプリケーション・アーキテクチャ
クラウド・アプリケーション・アーキテクチャ
 
Java e i database: da JDBC a JPA
Java e i database: da JDBC a JPAJava e i database: da JDBC a JPA
Java e i database: da JDBC a JPA
 
DCI
DCIDCI
DCI
 

Semelhante a VJET bringing the best of Java and JavaScript together

比XML更好用的Java Annotation
比XML更好用的Java Annotation比XML更好用的Java Annotation
比XML更好用的Java Annotationjavatwo2011
 
Construire une application JavaFX 8 avec gradle
Construire une application JavaFX 8 avec gradleConstruire une application JavaFX 8 avec gradle
Construire une application JavaFX 8 avec gradleThierry Wasylczenko
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Fwdays
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React NativeSoftware Guru
 
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code Example
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code ExampleMaven + Jsf + Richfaces + Jxl + Jdbc - Complete Code Example
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code ExampleNikhil Bhalwankar
 
Advance Java Programs skeleton
Advance Java Programs skeletonAdvance Java Programs skeleton
Advance Java Programs skeletonIram Ramrajkar
 
Paradigmas de linguagens de programacao - aula#9
Paradigmas de linguagens de programacao - aula#9Paradigmas de linguagens de programacao - aula#9
Paradigmas de linguagens de programacao - aula#9Ismar Silveira
 
Joose @jsconf
Joose @jsconfJoose @jsconf
Joose @jsconfmalteubl
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил АнохинFwdays
 
Groovy And Grails JUG Sardegna
Groovy And Grails JUG SardegnaGroovy And Grails JUG Sardegna
Groovy And Grails JUG SardegnaJohn Leach
 
Modern Android app library stack
Modern Android app library stackModern Android app library stack
Modern Android app library stackTomáš Kypta
 
Java 14 features
Java 14 featuresJava 14 features
Java 14 featuresAditi Anand
 
The Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on AndroidThe Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on AndroidFernando Cejas
 
T2 reading 20101126
T2 reading 20101126T2 reading 20101126
T2 reading 20101126Go Tanaka
 
JNI - Java & C in the same project
JNI - Java & C in the same projectJNI - Java & C in the same project
JNI - Java & C in the same projectKarol Wrótniak
 

Semelhante a VJET bringing the best of Java and JavaScript together (20)

比XML更好用的Java Annotation
比XML更好用的Java Annotation比XML更好用的Java Annotation
比XML更好用的Java Annotation
 
Construire une application JavaFX 8 avec gradle
Construire une application JavaFX 8 avec gradleConstruire une application JavaFX 8 avec gradle
Construire une application JavaFX 8 avec gradle
 
JEE.next()
JEE.next()JEE.next()
JEE.next()
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"Михаил Анохин "Data binding 2.0"
Михаил Анохин "Data binding 2.0"
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React Native
 
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code Example
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code ExampleMaven + Jsf + Richfaces + Jxl + Jdbc - Complete Code Example
Maven + Jsf + Richfaces + Jxl + Jdbc - Complete Code Example
 
Advance Java Programs skeleton
Advance Java Programs skeletonAdvance Java Programs skeleton
Advance Java Programs skeleton
 
E:\Plp 2009 2\Plp 9
E:\Plp 2009 2\Plp 9E:\Plp 2009 2\Plp 9
E:\Plp 2009 2\Plp 9
 
Paradigmas de linguagens de programacao - aula#9
Paradigmas de linguagens de programacao - aula#9Paradigmas de linguagens de programacao - aula#9
Paradigmas de linguagens de programacao - aula#9
 
Codemotion appengine
Codemotion appengineCodemotion appengine
Codemotion appengine
 
Joose @jsconf
Joose @jsconfJoose @jsconf
Joose @jsconf
 
Project Coin
Project CoinProject Coin
Project Coin
 
"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин"Android Data Binding в массы" Михаил Анохин
"Android Data Binding в массы" Михаил Анохин
 
Groovy And Grails JUG Sardegna
Groovy And Grails JUG SardegnaGroovy And Grails JUG Sardegna
Groovy And Grails JUG Sardegna
 
Modern Android app library stack
Modern Android app library stackModern Android app library stack
Modern Android app library stack
 
Java 14 features
Java 14 featuresJava 14 features
Java 14 features
 
The Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on AndroidThe Mayans Lost Guide to RxJava on Android
The Mayans Lost Guide to RxJava on Android
 
T2 reading 20101126
T2 reading 20101126T2 reading 20101126
T2 reading 20101126
 
JNI - Java & C in the same project
JNI - Java & C in the same projectJNI - Java & C in the same project
JNI - Java & C in the same project
 

Último

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Último (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

VJET bringing the best of Java and JavaScript together

  • 1. VJET bringing the best of JavaTM and JavaScriptTM together Greg Choi, Justin Early, and Yitao Yao eBay
  • 2. Why are we here? 2
  • 3. What’s Missing in JavaScript > Contract based design and programming strongly typed API interfaces > Namespace management packages > Data encapsulation visibility and access control > Classic inheritance > Dependency management imports 3
  • 4. Our Answer: Semantic Equivalence > Bring the best of Java to JavaScript > Put the “Java” in JavaScript How? > Add typing system to JavaScript > Enable Java-like modeling concepts and programming constructs for JavaScript 4
  • 5. Why Java-Like? > Proven modeling and programming paradigm > Proven tooling and process support > Proven manageability of large-scale enterprise applications Break down the barriers between Java and JavaScript AND Enable large scale JavaScript development 5
  • 6. TM TM Bring the Best of Java to JavaScript > package, imports > class, interface, enum, abstract class, inner and anonymous class, mixin, o-type > extends and implements > generics > static and instance > formal constructors, properties and methods > static initialization > super and override > overloaded constructors and methods > modifiers: public, protected, private, final 6
  • 7. VJET Package and Class Package Class = ctype package x.y.z; vjo.ctype('x.y.z.Person')//<public public class Person { (Java) (JS) Public modifier 7
  • 8. VJET Interfaces and Generics vjo.itype('a.b.c.IFoo<T>') //< public package a.b.c; .protos({ public interface IFoo<T> { //>public T getName(); public T getName(); getName: vjo.NEEDS_IMPL } (Java) }) (JS) Generic for type Generic for return type 8
  • 9. VJET extends, implements, import import = needs import javaone.abc.ABase; import javaone.abc.HisUtil; vjo.ctype('javaone.xyz.Abc') //< public import javaone.abc.IMine; .needs('javaone.abc.HisUtil') import javaone.abc.IYours; .inherits('javaone.xyz.ABase') .satisfies('javaone.abc.IMine') public class Abc extends ABase .satisfies('javaone.abc.IYours') (JS) implements IMine, IYours { } (Java) extends = inherits Implements = satisfies 9
  • 10. VJET Enum Enum = etype package x,y,z; vjo.etype(‘x.y.z.MyEnum') //< public public enum MyEnum { .values("a,b,c") a,b,c .endType(); (JS) } (Java) names 10
  • 11. VJET Static and Instance Properties .props({ // Static goes here public static final int MAX = 12; MAX:12 //< public final int }) .protos({ // Instance goes here m_name:"Justin"//<private String private String m_name = “Justin"; (Java) }) (JS) 11
  • 12. VJET Typing and Semantic Declaration > VJET comment syntax uses familiar Java-like declaration syntax, with a directional indicator: //> or //< > VJET comment syntax can be expressed on one line .protos({ final Modifier m_mother:null, //< private final Tiger Access Modifier //> public void hunt(IAnimal pray) hunt:function(pray){ Type this.roar(); this.base.hunt(pray); }, (JS) 12
  • 13. VJET Constructor Person = constructs in VJET Parameter type .protos({ public Person(String name){ //>public constructs(String name) (Java) constructs:function(name){ } } (JS) }) Access modifier Constructs defined in protos 13
  • 14. VJET Methods Return Type Parameter type public void setName(String name) { //> public void setName(String) m_name = name; setName:function(name){ } (Java) this.m_name=name; } (JS) Access modifier 14
  • 15. VJET Static Property Final Modifier Type Access .props({ public static final int MAX = 12; MAX:12 //<public int final (Java) }) (JS) 15
  • 16. VJET Overloading No argument public void doIt() { //> public void doIt() } //> public void doIt(String) doIt:function(name){ public void doIt(String foo) { // internally must handle } // variation – our code gen (Java) // helps here } (JS) String argument 16
  • 17. VJET Varargs Varargs public void a(Date... arg){ //>public void a(Date... arguments) a:function(){ } (Java) } (JS) 17
  • 18. VJET Static Initialization vjo.ctype('x.y.z.Person') static { .inits(function(){ String mystatic = “test”; (Java) vars_mystatic==“test” //<String mystatic “test” //<String } }).endType(); (JS) A A B C B C Class loader – handles static init VJET Runtime – handles static init Where a circular dependency exists Where a circular dependency exists 18
  • 19. Sample VJET Type vjo.ctype('javaone.j4j.oom.Tiger') //< public .needs(['javaone.j4j.oom.IAnimal','vjo.java.lang.System']) .inherits('javaone.j4j.oom.Cat') .satisfies('javaone.j4j.oom.IPanthera') .props({ //> public String getSpeciesType() getSpeciesType:function(){ return "CAT"; } }) .protos({ m_mother:null, //< private final Tiger //> public constructs(Tiger mother) constructs:function(mother){ this.base(); this.m_mother=mother; }, //> public void hunt(IAnimal pray) hunt:function(pray){ this.roar(); this.base.hunt(pray); }, //> public void roar() roar:function(){ this.vj$.System.out.println("I am tiger"); } }) .endType(); (JS) 19
  • 20. What is VJET? > Not another widget library > Not an application framework > Java and JavaScript + Enterprise technology = A super boost for productivity > VJET blends the best of Java and JavaScript language and tooling, for a powerful development experience 20
  • 21. 21
  • 22. VJET Type System > VJET Parser handles VJET structural definition and VJET comment syntax, on top of JavaScript syntax > VJET Abstract Syntax Tree (JST), analogous to Java AST, represents Java-like types and semantics in addition to JavaScript language constructs > VJET Type Space Management supports: indexed type, hierarchy, reference and dependent search update, refactoring syntactic and semantic validation tool integration and more … > VJET Type Meta enables “typed” Object Serialization 22
  • 23. Tooling in VJET IDE Code assistance and completion Search for types, references, declarations Type hierarchies and call hierarchies Validation – not only syntax but also semantic! Refactor and even browser specific functionality help Many more … 23
  • 24. 24
  • 25. 25
  • 26. 26
  • 27. 27
  • 28. 28
  • 29. 29
  • 30. Runtime Type Loading Service > Analogous to Java ClassLoader > No global type tempering (such as modification of Object and Function prototype) > Supports dynamic type loading > Manages type resolution and initialization order based on type dependencies (including circular dependency) 30
  • 31. VJET Supports Common Java Libraries vjo.java.lang.* & vjo.java.util.* List<String> li = new ArrayList<String>(); (Java) var li = new this.vj$.ArrayList(); //< List<String> (JS) 31
  • 32. Why not write VJET code completely in Java? > Write JavaScript code using Java types > Enable Java developers to author JavaScript Use a familiar programming language – Java Use familiar IDE features No mental switch on keywords and constructs No confusion about JavaScript scoping x = 1; var x =1; this.x = 1; (JS) 32
  • 33. Leverage Java and JavaScript in Java > Enable Java-to-JavaScript language translation > Take the best of JavaScript and add it to Java Closures Function Object literal > Make native JavaScript types available in Java Global JavaScript functions and types Browser and DOM objects VJET and third-party JavaScript libraries 33
  • 34. Translation + Interoperation: Java to JS Write Java Types Java Developers Used by Generated JS Types JavaScript Developers 34
  • 35. VJET Java to JS Translation Service > Java JavaScript - a full language translation > Supports most Java language features and object modeling semantics > Syntactical and structural resemblance > Semantic equivalence > Provides extension for custom translation 35
  • 36. VJET Java to JS Translation public static void itration() { //> public void itration() List<String> li = new ArrayList<String>(); itration:function(){ Iterator<String> itr = li.iterator(); var li=new this.vj$.ArrayList(); while (itr.hasNext()) { var itr=li.iterator(); System.out.println(itr.next()); while(itr.hasNext()){ } this.vj$.System.out.println(itr.next()); int[] arr = new int[]{1, 2, 3}; } for (int i = 0; i < arr.length; i++) { var arr=[1,2,3]; System.out.println(arr[i]); for (var i=0;i<arr.length;i++){ } this.vj$.System.out.println(arr[i]); Array jsArr = new Array("abc", 123, 14.5); } jsArr.push("xyz"); var jsArr=["abc",123,14.5]; for (Object val : jsArr) { jsArr.push("xyz"); System.out.println(val); for (var val in jsArr){ } this.vj$.System.out.println(val); } (Java) } } (JS) 36
  • 37. Author JavaScript using Java public static boolean myOnclick(MouseEvent e) { HtmlButton b = (HtmlButton)e.getTarget(); b.blur(); b.attachEvent("click", MyJsType.update); HtmlTextArea msgArea = docx.getTextArea("messageArea"); String value = msgArea.getValue(); win().alert(js.escape(value)); HtmlSpan span = docx.span(); span.setClassName("warn"); span.setInnerHTML(value); msgArea.getParentNode().insertBefore(span, msgArea); return true; } (Java) 37
  • 38. VJET Java to JS Translation //> public boolean myOnclick(MouseEvent e) myOnclick:function(e){ var b=e.target || window.event.srcElement; b.blur(); b.attachEvent("click",this.vj$.MyJsType.update); var msgArea=document.getElementById("messageArea"); var value=msgArea.value; window.alert(escape(value)); var span=document.createElement('span'); span.className="warn"; span.innerHTML=value; msgArea.parentNode.insertBefore(span,msgArea); return true; }, (JS) 38
  • 39. TM TM The Best of Java and JavaScript Together at Last! VJET Object Literal generics Functional interface programming class closures Mixins varargs enum Prototypical inheritance Access control 39
  • 40. Access Existing JavaScript from Java: JS to Java API Translation Service > Produces Java API (NativeJsProxy) from VJET types authored in JavaScript > Exposes functional programming features to Java API, where function and type reference become first level programming constructs 40
  • 41. Translation + Interoperation: JS to Java API Write Can JS Types Delegate Legacy to Js code JavaScript Developers Java Native Used by Proxy API Java Developers 41
  • 42. JS to Java API vjo.ctype("javaone.js.MyJsType") .protos({ public class MyJsType extends NativeJsProxy { m_index: 0, //<int //>public void constructs(int) public MyJsType(int index) { constructs: function(index) { super(index); this.m_index = index; } }, public static void update(boolean increament) { //>public void doit() callStatic(increament); doit: function() { } alert(this.m_index); public void doit() { } call(); }) } .props({ public static final NativeJsTypeRef prototype = s_counter: 0, //<int NativeJsTypeRef.get(MyJsType.class); //>public void update(boolean) public static final INativeJsFuncProxy update = update: function(increament) { NativeJsFuncProxy.create(prototype, "update"); alert(increament? this.s_counter++ : public final INativeJsFuncProxy doit = this.s_counter--); NativeJsFuncProxy.create(this, "doit"); } (Java) } }) .endType(); (JS) 42
  • 43. VJET Java Core Library for JavaScript > Java API for JS global functions – VJ.js.* JS native types: Array, Object Literal, Function Browser, DOM and Events (w3c – based) Convenient DOM operation – VJ.docx.* Functional Programming Extension – VJ.jsx.* Function reference Type reference Hitch (function scope closure) Curry (function arguments closure) 43
  • 44. Access JS Native Types from Java ///import com.ebay.dsf.dap.proxy.Array;// Proxy to JavaScript native array ///… Array jsArr = new Array("abc", 123, 14.5); for (Object val : jsArr) { System.out.println(val); } (Java) var jsArr=["abc",123,14.5]; for (var val in jsArr){ this.vj$.System.out.println(val); } (JS) 44
  • 45. Access Native JS Functions from Java String rtn = (String)js.eval(js.escape(txt)); js.encodeURI(rtn); win().setTimeout(js, 100); int id = win().setInterval(AJsType.update, 10); win().clearInterval(id); (Java) var rtn=eval(escape(txt)); encodeURI(rtn); window.setTimeout(js,100); var id=window.setInterval(this.vj$.AJsType.update,10); window.clearInterval(id); (JS) ( 45
  • 46. Access Browser DOM Functions from Java HtmlButton b = (HtmlButton)e.getTarget(); b.blur(); HtmlSpan span = docx.span(); span.setClassName("warn"); span.setInnerHTML("<b>Hi</b>"); Node msgArea = doc().getElementById("messageArea"); msgArea.getParentNode().insertBefore(span, msgArea); (Java) var b=e.target || window.event.srcElement; b.blur(); var span=document.createElement('span'); span.className="warn"; span.innerHTML="<b>Hi</b>"; var msgArea=document.getElementById("messageArea"); msgArea.parentNode.insertBefore(span,msgArea); (JS) 46
  • 47. Java API for Functional Programming MyVjoType2 a = new MyVjoType2(); // native proxy a.doIt2("test"); a.doIt2.call(a, "test"); a.doIt2.apply(new MyVjoType2(), new Object[]{"test"} ); MyVjoType2.doIt("test" ); MyVjoType2.doIt.call(MyVjoType2.prototype, "test"); (Java) var a=new this.vj$.MyVjoType2(); a.doIt2(); a.doIt2.call(a); a.doIt2.apply(new this.vj$.MyVjoType2(),{‘test’}); this.vj$.MyVjoType2.doIt(“test”); this.vj$.MyVjotype2.doIt.call(this.vj$.MyVjoType2,false); (JS) 47
  • 48. JavaScript Library Integration > External JavaScript Libraries are easily integrated > VJET typing annotation provides non-intrusive way to integrate non-VJET JavaScript libraries > No modifications needed for non-VJET JavaScript > Typed API becomes available for both JavaScript and Java 48
  • 49. Integration of Third Party JS Library - JQuery > Create VJET API definition for existing JS library - jQuery vjo.ctype("vjo.dsf.jqueryx.Jq") .needs('vjo.dsf.jqueryx.Jqueryx') .protos({ //> public Element get(int index) //> public Array get() get:function() {}, //> public Array queue() //> public Array queue(String name) //> public Jq queue(Function callback) //> public Jq queue(String name, Function callback) //> public Jq queue(Array queue) //> public Jq queue(String name, Array queue) queue:function(){},…. (JS) 49
  • 50. Sample jQuery Usage in both Java and JavaScript Jq.$(".slide").slideToggle("slow"); (Java) $(".slide").slideToggle("slow"); (JS) 50
  • 51. VJET Active Programming Model > VJET enhanced scripting service supports interoperability between Java and JavaScript, and blurs the boundary between the Java and JavaScript languages > In Active Programming mode, Java types are loaded and executed in their authored forms (Java or JavaScript), while naturally interacting with other JavaScript types and objects > Under Active Programming mode, native JavaScript types can live in the Java space via proxies, and Java objects can live in the script space, with object identity preserved across language boundaries What you write is what you run and debug!! 51
  • 52. Java + JS Runtime Interoperation Java JS Types Types JS Types Script Engine JVM 52
  • 53. Running JavaScript in Active Mode Order of Execution 1 var lion = new this.vj$.Lion('Leo', 450, true); calling to Lion.js 2 var tigress = new this.vj$.Tiger('Tigris', 350, false); calling to Tiger.js 3 var son = new this.vj$.Liger(lion, tigress, 'Hercules', true); calling to Liger.java public Liger(Lion father, Tiger mother, String name, boolean isMale) { m_father = father; m_mother = mother; 4 m_gene = father.getGene()|mother.getGene(); calling to Cat.js } 5 getGene:function(){return this.m_gene;} 6 var hasMarriedParents = son.areParentsMarried(); calling to Liger.java public boolean areParentsMarried() { 7 return m_father.getSpouse() == m_mother; calling to Cat.js } 53
  • 54. End-to-End Web Application Development > VJET’s Browser Emulation and Communication Services enables live execution, debugging, and updates of a client-side JavaScript application from a single IDE > Render applications in a modern web browser while executing and debugging JavaScript in VJET’s Virtual Browser > Enables a productive development process 54
  • 55. VJET Virtual Browser > Provides browser based scripting environment > Enables vendor specific browser behavior > Supports “single-threaded” JS execution model with proper timer events 55
  • 56. VJET Duplex Live Connect (DLC) Virtual to External Browser Connection > Combining the VJET Virtual Browser with VJET DLC enables: Native browser binding for graphical rendering and user interaction Auto-DOM-sync between virtual and native browsers Capture and replay for interactive browser session Auto-generation of JUnit tests with window events, user interactions and AJAX operations 56
  • 57. Run JavaScript in VJET Virtual Browser Page Request/Response User Action/Browser Event Event Msg (DOM sync) DOM 57
  • 58. The Best of JavaTM Libraries and TM JavaScript Libraries Web Browser Server VJET java.util jquery VJET java.lang Js libs VJET VJET VJET VJET Browser Java’s Script Engine Script Engine 58
  • 59. Recap Java developers JS developers Larger pool of talent Difficult to find talent Increasing need for client side Established patterns interactive behavior Sophisticated tools ++ Managing complexity is difficult Browser incompatibilities hamper Standardized technologies quality Large collection of commonly used libraries Multiple library use is problematic 59
  • 60. Benefits > JavaScript developers can enjoy Java-like modeling and tooling > Break down language barriers and enable Java developers to develop interactive web applications > Write, Run, Debug, all in one IDE > Leverage existing Java and JavaScript skill sets between both programming environments > Enable large scale, enterprise level JavaScript application development 60
  • 61. Today @ eBay > Java developers also work on JavaScript > JavaScript developers also work on Java > Tooling has blurred the line between Java and JS Languages Browsers JavaScript and Java Libraries The Gap is Gone! 61
  • 62. One More Thing… > Announcement from eBay Leaders Mark Palaima - Chief Architect & eBay Fellow James Barrese - VP, Systems Dev (Architecture) 62
  • 63. Q&A 63