Fybit Riatrax4Js: Program YUI in Java

February 2, 2010 at 11:08 am by Erol Koç | In Development, In the Wild, YUI Implementations | 7 Comments

About the Author: Erol Koç is a co-founder of Fybit, a Switzerland based startup company. Before joining Fybit, he worked as a software architect for a security company where he was the tech lead for the product’s web frontend. He has an MS degree in computer science from ETH Zurich. During an internship at IBM, he contributed to the Eclipse project.

Fybit Riatrax4Js: Write YUI in Java

YUI is not only a fantastic JavaScript library, it is also a great community. Developers contribute to YUI and allow others to benefit from it. Now, Fybit joins the YUI community with Riatrax4Js, a toolkit for rich internet applications (RIAs) based on YUI. Riatrax4Js allows you to program RIAs in plain Java and automatically translates your code to JavaScript, using YUI as a foundation layer. With YUI being available from Python, Java and JavaScript, one fourth of all developers get access to YUI. And with 18%, Fybit’s Riatrax4Js covers the largest part, consisting of Java developers.

Riatrax4Js: Java benefits, powerful YUI widgets

We just launched the Riatrax4Js alpha version with the goal of easing development of YUI-based RIAs. Riatrax4Js combines the advantages of Java with the extensive widget set and controls of YUI. Consequently, you get the benefits and comfort of Java programming such as:

Type safety
Inheritance
IDE support (Eclipse, NetBeans, …)
Debugging
Test tools like JUnit
Access to many 3rd party libraries

And you all know how fantastic YUI is:

Many powerful widgets
Compatible with all major browsers
Great performance
Yahoo! experts develop YUI

Add up the advantages of Java and YUI, you get the properties of Riatrax4Js. Riatrax4Js is not a server-side framework. It compiles Java to JavaScript, leveraging the standard Java compiler to give you unlimited scalability and speed. Moreover, Riatrax4Js allows you to connect your YUI frontend to the web server and backend with a simple annotation-based remoting mechanism.

A simple example: Show the server’s time on a button’s label when clicked

This section walks you through a simple example that is available for download from our website. Riatrax4Js apps consist of regular Java classes that can use the Java version of YUI that ships with Riatrax4Js. Here is how simple that is:

@MainPanel(name="index")
public class DemoPanel {
		
	@Services(implementation=TimeServiceImpl.class)
	protected static TimeService service;
	
	public DemoPanel () {
		final Button syncButton = Button.create("syncButton");
		syncButton.addClickListener(new Listener() {
			public void perform () {
				syncButton.setConfLabel("Sync: " + service.getTime());
			}
		});
	}
}

The code starts with a @MainPanel annotation to allow Riatrax4Js to find the entry point to your program. Next, there is a field service that is annotated with the @Services annotation. Thanks to this annotation, the server can be called to get the time (or any other value/object you want to use on the client). It does not have to be explicitly initialized, Riatrax4Js does the dirty work for you and ensures that the client and server parts are connected by injecting an appropriate proxy. A YUI Button is then created by replacing an existing HTML button “syncButton” of your HTML page. A click listener which invokes the time service on the server is attached to the button. This is a synchronous (i.e., blocking) call. Async calls are just as easy: The generated proxies contains an async variant of each method in the interface that can be readily used. Here is the corresponding HTML page for the code:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fybit New</title>
		<script type="text/javascript" src="codebase/app-index.js"></script>
	</head>
	
	<body class="yui-skin-sam">
		<button id="syncButton">Synchronous Call</button>
	</body>
</html>

The most important line is the script tag at the beginning. It includes a single JavaScript file app-index.js where “index” is the name given in the @MainPanel annotation above. In the HTML body, you can find the aforementioned HTML button. Riatrax4Js wraps the YUI Button over this button.

A YUI button with server invocation

When you compile the application, Riatrax4Js analyses the source files and generates the file app-index.js consisting of the Java classes needed in the browser translated to JavaScript as well as the necessary YUI JavaScript code. Unlike with native YUI, you don’t have to care about YUI dependencies or which YUI files to include — Riatrax4Js includes them automatically!

This is just a small excerpt from a larger demo. The full demo also explains how to call the server asynchronously and how to use other YUI widgets (text editors, auto-completion, menus etc.). Apart from generating web application from scratch, using Riatrax4Js you can improve existing web applications easily with interactive features by wrapping ordinary HTML elements with YUI elements.

Beyond demos: “PublicationManager” written with Riatrax4Js

We used Riatrax4Js to develop a user-friendly web application to manage publications for a research group at a university in Switzerland. This application facilitates the process of entering and modifying publication records and it has been put into operation in November 2009. The PublicationManager features YUI dialogs, sortable and resizable tables, paginators and auto-completion. The records entered by the users are stored in a database and can be edited and complemented with files with just a few clicks.

Security

Riatrax4Js is designed to make applications as secure as possible by default. But because Riatrax4Js uses JavaScript, applications are as hard to secure as any other dynamic web app. Fybit offers separate extension to Riatrax4Js, Riatrax Security. It is based on Riatrax4Js’s program code analysis and secures the application by filtering invalid or malicious content and blocking it before it reaches your code and/or application server. Fybit Riatrax Security is also configured with Java annotations.

Want to try?

The alpha version of Riatrax4Js is currently available on our web site to registered users. It’s great to see the user base of Riatrax4Js grow and be used by developers at this stage.

Fybit’s goal is to make Riatrax4Js the best Java RIA toolkit available and support it in the long run. We believe that the YUI community and YUI developers can give us important feedback about Riatrax4Js. We are excited to hear your questions and suggestions, e.g.

How can we improve Riatrax4Js?
For what kind of projects would you consider Riatrax4Js?
What is the best way for us to distribute the product?

As Fybit is a small startup company, we appreciate everyone who wants to contribute to Riatrax4Js to make it the number one RIA framework. Just drop us a line if you are interested or want to know more.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

7 Comments

how about Riatrax4Js’s speed?
in my option,translate the java code into the js file,it my cost a lot both the cpu or time!especially in a larger project!
and i think when using Riatrax4Js,the developer need to be familiar with java and YUI because if a developer do not know the yui widget or utilities,who can not understand what happened in the application such as if you know the Ajax and you can not know how write the server side code between the back and front!
anyway,i’ll try it to sure my assumption!

Comment by janwen — February 3, 2010 #
Good point! It is always difficult to answer questions regarding speed or performance since it depends on your system (hardware, OS, processes running, etc). But to give you an idea: the publication manager we implemented compiles 200 Java classes to 10’000 lines of JavaScript (62’000 if you count the lines from YUI) in 4 seconds on my 3 year old laptop. I think that is quite fast. Don’t forget that you will never have to compile all your code to JavaScript, but only the part you need in the browser.

Regarding your second question: Yes, you have to know Java (obviously) and to some extent YUI. For example YUI’s principle of passing configuration arguments to a widget during creation. However, YUI is extremely well documented – and the documentation is available as Javadoc for the YUI Java classes we provide. Moreover, there are many YUI examples that you can learn from quickly.

I recommend looking at the Fybit Showcase where you can view the code directly in the demo. It’s also a good idea to use the example project as a starting point when you begin to program.

Comment by Erol — February 3, 2010 #
[...] inviting the community to take a look at his new yui4java project. The project, somewhat like Fybit’s Riatrax4JS, allows you to write web applications in Java with JavaScript (leveraging YUI 2’s component [...]

Pingback by yui4java: A New Java-to-JavaScript Translator Using YUI 2 » Yahoo! User Interface Blog (YUIBlog) — April 13, 2010 #
[...] typed, fast, tightly integrated development experience with deployment to rich web applications. As Fybit’s Riatrax4JS and yui4java do for Java developers, WebSharper brings the power of YUI 2 to F# developers, making [...]

Pingback by YUI Theater — Adam Granicz: “Robust and Rapid Web Development with WebSharper” (57 min.) » Yahoo! User Interface Blog (YUIBlog) — April 23, 2010 #
Hi. This project is very similar to my project yui4java.sourceforge.net that contains a YUI 2 java api for the java2script.sourceforge.net java to javascript compiler (an eclipse plugin), a project in which i’m also involved. I think both projects share similar characteristics, I wonder, which java to javascript compiler riatrax4js use?

for a yui demo in 100% writen in java with many examples and java source code available, check http://yui4java.sourceforge.net/yui/org.sgx.j2s.yui.test.yuidemo.Main.html

Comment by Sebastián Gurin — April 24, 2010 #
Thanks Gurin for the post. We did have a look at your project and we think it is indeed very interesting. In fact, we also had a look at the
java2script compiler when starting with our product and then decided on a different design because of the points listed below.

Fybit is using a custom Bytecode-to-JavaScript analyzer/compiler. Here are some of the differences to java2script:

- Fybit apps can use one source base for both client and server parts. The compiler transparently inserts remoting code between browser and web server. This is really useful for browsing in the IDE, automated refactoring etc.

- Fybit focuses on overall performance of the generated JavaScript application: For example, all required code (including native libraries) are merged into a single, minified JavaScript file.

- Fybit does a static analysis to eliminate most of the overhead of the Java runtime (class loading, initialization etc). For that to be effective, we impose limits on what you can do with reflection.

- Fybit translates bytecode. This means: (1) You can use libraries where you don’t have the source code or where you don’t want to integrate the
source code into the build process. (2) You can use whatever toolchain you desire and then run the final package through the compiler (3) The analysis and compilation is relatively fast because bytecode is a binary format.

- We were able to easily add debug mode.

Regards,
Erol

Comment by Erol — April 25, 2010 #
[...] typed, fast, tightly integrated development experience with deployment to rich web applications. As Fybit’s Riatrax4JS and yui4java do for Java developers, WebSharper brings the power of YUI 2 to F# developers, making [...]

Pingback by YUI Theater — Adam Granicz: “Robust and Rapid Web Development with WebSharper” (57 min.) | Sachin Handiekar — September 15, 2010 #

Sorry, the comment form is closed at this time.

Yahoo! User Interface Blog (YUIBlog)