Using JavaScript on Client and Server with Project Phobos

Size: px

Start display at page:

Download "Using JavaScript on Client and Server with Project Phobos"

Marshall Shelton
5 years ago
Views:

1 Using JavaScript on Client and Server with Project Phobos Roberto Chinnici Senior Staff Engineer Sun Microsystems, Inc. July 27, 2007

2 JavaScript in the browser 2

3 JavaScript 1.x Browser quirks JavaScript libraries Widget toolkits Google Gears 3

4 JavaScript in the browser JavaScript on the server 4

5 JavaScript in the browser JSON on the wire JavaScript on the server 5

6 JavaScript in the browser JSON on the wire + cross-tier JavaScript code JavaScript on the server 6

7 How similar are the two environments? 7

8 Which one is the tail and which one the dog? 8

9 Project Phobos 9

10 What is Phobos? Lightweight web application framework Running on the Java platform All application logic is JavaScript Most of the framework itself is in JavaScript Deploy to any servlet container 10

11 Core Phobos Functionality URL mapping/dispatching JSR-223 scripting engine integration Request/session/application contexts Asynchronous script execution Container independence Debugging support in NetBeans 11

12 Server Architecture JAVASCRIPTAPPLICATION CODE JAVASCRIPT/ AJAX LIBRARIES PHOBOS JAVASCRIPT LIBRARIES MOZILLA RHINO PHOBOS RUNTIME JAVA LIBRARIES JAVA PLATFORM APACHE DERBY (DB) 12

13 Client Architecture JAVASCRIPTAPPLICATION CODE JAVASCRIPT/ AJAX LIBRARIES BROWSER GOOGLE GEARS 13

14 Development Process 1. Start NetBeans 2. Create skeleton application using wizard 3. Run it in debug mode 4. Map out the URLs for pages, services, Ajax 5. Attach logic to them 6. Test out interactively 7. Go back to step 4, repeat 8. Stop the application, you're done 14

15 Tool Support Phobos ships as NetBeans plugins Project and component wizards jmaki widget palette Multithreaded debugger Breakpoints, inspectors, watches,... Server runs embedded in the IDE 15

16 URL Design Plain scripts /dosomething.js Controller/action /store/display_cart Resource /book/isbn/ User-defined any regexp 16

17 Defining New Patterns Add new rules at startup or on the fly application.mapping.rules.push({ }); url: factory: "module.atom.createfeedresource", fn: "library.mapping.mayberest" Named functions in yellow 17

18 Application Layout /application /controller test.js /dynamic sample.ejsp /module application.js /script index.js /template /view test.ejs /static /resources...jmaki... /css main.css faq.html release_notes.html /environment development.js startup-webapp.js 18

19 Plain Scripts Servlet-like request/response objects bound in context response.status = 200; response.contenttype = text/html ; var writer = response.writer; writer.println( <html><head>...</body></html> ); writer.flush(); /sample.js /application/script/sample.js 19

20 Controllers JavaScript classes with methods // package library.common.define(controller, "main", function() { function Main() { } // class Main.prototype.show = function() { // method library.view.render( show.ejs ); } this.main = Main; // export }); /@controller/@action /main/show 20

21 Minimal Requirements Basic contract is onrequest method Freedom to structure controller code any way you want plain JavaScript OO facilities from Prototype, Dojo, YUI TrimPath Junction ActiveController port (maybe in the future...) 21

22 Using JavaScript Libraries No special treatment for built-in libraries Dojo 0.9, Prototype, YUI all usable Load them in a controller (or using an event handler) library.dojo.load( /application/dojo0.9 ); library.scripting.run( prototype.js ); Be careful in modifying Object.prototype and friends in the presence of pooling Other globals OK 22

23 Scripting Engine Integration Optional compilation to bytecode Compiled scripts are cached Engines are pooled Works with any JSR-223 engine JavaScript engine hooked to debugger API 23

24 Mozilla Rhino + Extensions Dynamic objects via JSAdapter E4X property get/set coming in Rhino 1.6R6 Lots of constructs become possible: autoloaded modules builders multiple inheritance missing_method / doesnotunderstand: 24

25 E4X ECMA 357 XML support at the language level literals, namespaces, interpolation XPath like syntax for each construct Powerful, not entirely intuitive 25

26 E4X - Examples // HTML var doc = <html/>; doc.head.title = Hello, world! ; doc.body.@bgcolor = # ; doc.body.p = What's up, doc? ; // ATOM var nsatom = new Namespace("atom", " default xml namespace = nsatom; var doc = <entry><title>{args.title}</title><summary>{args.summary} /summary></entry>; 26

27 Views / Templating with EJS PHP / ASP / RHTML-like syntax <html> <head> <title><%= model.title %></title> </head> <body> <% generatebody() %> </body> </html> 27

28 Response Post-Processing Capture view output Process the response headers/body Use DOM/E4X to parse the page HTML parser would be nice Browser-like stage? e.g. could use <script> tag for server-side too 28

29 jmaki Lightweight JavaScript framework Spans multiple widget libraries Unified interface to widgets Event-based component glueing CSS-based layouts Server-agnostic: JSP, JSF, Phobos, PHP 29

30 jmaki Support in Phobos Built-in library.jmaki Configured with JSON Use common resource layout Widget palette in NetBeans Small footprint Widget libraries added on first use 30

31 REST Support Not controller-based Resources are classes Methods are HTTP methods Code deals with HTTP entities Framework takes care of HTTP details.e.g. Etags, conditional operations, etc. Sample APP server 31

32 Asynchronous Tasks Multithreaded runtime Schedule scripts for execution in the background Pass arguments in JSON format library.lang.invokeasync calls a named function in a new thread Actor abstraction possible Port XMLHttpRequest? 32

33 Persistence Options JavaScript wrapper for Java Persistence Native JavaScript DB API on top of JDBC ActiveRecord port to JavaScript* Port of low-level Gears API* * in progress 33

34 Persistence Gotchas Cross-platform DB abstraction? SQL dialect difference hell SQLLite vs Apache Derby vs... Higher level APIs much more promising GearsORM would be ideal 34

35 Soft Scripting Engines Non-embedded DSL facility Translate to favorite target language Plug new languages Implemented by one JavaScript function Inherit debugging support from lower layer Example: Narrative JavaScript (.njs files) 35

36 Narrative JavaScript New yield operator (->) for async calls Implemented as a preprocessor Separate browser/server runtime End goals: Painless asynchronous processing Continuation-like behavior without the cost Just last week: Strands 36

37 COMET Supported via Grizzly HTTP connector Asynchronous Request Processing (ARP) CometContext.notify exposed to the application CometHandler.onEvent implemented by the application Use regular comet libraries on the client 37

38 Other Features Multiple environments Multiple platforms embedded in a war file on GlassFish V3 standalone from the command line Extension framework System apps 38

39 JavaScript Everywhere 39

40 Emulating the Browser Maybe good idea for development, but... Hard to do for production code Ugly environment Do you really want to use DOM everywhere? Multithreading issues XmlHttpRequest poor abstraction Gears full of SQLLite idiosyncrasies 40

41 A Better Approach Strive to write code than runs everywhere Isolate server-only code Use JSON data format consistently Named functions with JSON arguments message-passing model Keep it simple 41

42 Writing Neutral Code Use same foundation everywhere e.g. Prototype, or Dojo, or... Keep it simple / YAGNI plain controllers, plain templates stick to core JavaScript language Define data layer abstraction Use good, high-level, cross-tier libraries jquery, GearsORM, Strands 42

43 Plea To Library Writers We need more environment-neutral JavaScript libraries E.g. Dojo hostenv abstraction, profiles Establish pattern for abstraction layer Unfortunately, may worsen performance Maybe preprocessing will help? 43

44 JavaScript in the browser JavaScript on the server 44

45 The tail / dog metaphor is wrong 45

46 They are twins separated at birth 46

47 Using JavaScript on Client and Server with Project Phobos Roberto Chinnici 47

Tooling for Ajax-Based Development. Craig R. McClanahan Senior Staff Engineer Sun Microsystems, Inc.

Tooling for Ajax-Based Development Craig R. McClanahan Senior Staff Engineer Sun Microsystems, Inc. 1 Agenda In The Beginning Frameworks Tooling Architectural Approaches Resources 2 In The Beginning 3