Three Days with Juzu: Write a Killer App

One of the reasons I love working for eXo Platform is the chance to work with some very talented people. Julien Viet is one of them. So when he said to me last year that he was finally designing a new web framework, I was very excited and impatient to get my hands on it.

Why? Because I love designing apps but don’t really enjoy writing code with frameworks like Spring, JSF, Struts, etc. I spend too much time fighting against them – time I would prefer to spending thinking about my app’s logic.

Of course, there are some cool frameworks to be found, such as Play Framework, to name just one. But once again, Play is fine for writing a standalone app but I also live in a portal world where I write portlets (you know, the JSR-286 thing). Also, as they say, Play! is not Java EE, and this is a place where I live.

Thus, on one side, you have Play!; it’s cool but it doesn’t support portlets and is not JEE friendly (and with the Scala thing on Play2, I’m not even sure it will continue to support Java in the future… but that’s another story). And on the other side, you have powerful frameworks with Spring or JSF; but damn, they’re so slow because they’re too heavy, and I also feel like they limit my creativity (but once again, that’s just my opinion)

So if you’re like me, I think you will love Juzu! Juzu has the simplicity of Play, and it also has some little gems that make development a pleasure, and of course, it lives in Java EE.

Recently, I’ve been working on a Chat application, and I think it’s a good example of how you can use Juzu to create an app. If you want to know more about it, I invite you to read the blog posts I’ve already written on it:

eXo Platform Add-Ons: Chat in Space
Chat Application: Why MongoDB?
Chat in the Cloud with MongoHQ

I set out here to write a short blog post on Juzu but since there is so much cool stuff inside, I’ve ended up with quite a long story. Thus, I split my original post into three posts for the next three days.

As a disclaimer, Juzu’s latest version is 0.6-beta8. So, it’s not a v1.0 release yet. Julien still has a lot of ideas he wants to add to it before releasing v1.0 (Juzu Roadmap). Still, it’s already very stable and full of coolness.

So, be prepared, take a cup of coffee, make yourself comfortable, we’ll learn a lot today!

Be Clever, Develop Faster

I started developing in a world of JSPs/taglibs a long time ago and it was great. Then came JSF and all the other usual suspects (hell on Earth for me). But today, if you take a look out there, you can leverage very nice libraries to ease your app development. I personally love the combination of:

jQuery
Twitter Bootstrap
Less

And guess what, Juzu makes them very easy to use:

jQuery is embedded in Juzu for @Ajax methods – we will see that later, it’s clean and elegant;
there’s a @Less annotation to build your css file;
and because @Less is there, you can easily use your own Twitter Bootstrap.

So, no more talking on the usual suspects, they are already in the past. Let’s instead take a look at what the future of development entails.

But before I delve more deeply into this, let’s start with the fundamentals.

Portlet Application

Advantage

The biggest advantage I see when I develop a portlet is that it’s part of a platform that will allow a lot of things at a minimal cost. So, when you develop a portlet inside eXo Platform, you get for free:

Page management: just focus on the app, the page layout is taken care of on the portal side;
User management: call the services, you have your user, its profile, roles, etc., no need to manage it;
Social enablement: add social features for free in your app;
And a lot more services I don’t use in the Chat app but on others, like Document Management for example (see Documents Application for example).

Create a portlet

Well, with Juzu, it’s very simple, just follow the white rabbit.

The generated app itself is very standard: it declares the portlet.xml file, uses portlet modes, can leverage portlet preferences, etc. So, what’s more? Its application declaration! app:package-info.java

@Application(defaultController = ChatApplication.class)
@Portlet(name="ChatPortlet")
@Bindings(
        {
                @Binding(value = org.exoplatform.services.organization.OrganizationService.class),
                @Binding(value = org.exoplatform.social.core.space.spi.SpaceService.class)
        }
)

@Assets(
        location = AssetLocation.SERVER,
        scripts = {
                @Script(src = "js/jquery-1.7.1.min.js", id = "jquery"),
                @Script(src = "js/jquery-juzu-utils-0.1.0.js", depends = "jquery"),
                @Script(src = "js/chat.js", depends = "jquery"),
                @Script(src = "js/sh_main.min.js"),
                @Script(src = "js/sh_html.min.js"),
                @Script(src = "js/sh_java.min.js"),
                @Script(src = "js/sh_javascript.min.js"),
                @Script(src = "js/sh_css.min.js")
        },
        stylesheets = {
                @Stylesheet(src = "/org/benjp/assets/bootstrap/assets/bootstrap.css", location = AssetLocation.CLASSPATH),
                @Stylesheet(src = "/org/benjp/portlet/chat/assets/chat.css", location = AssetLocation.CLASSPATH),
                @Stylesheet(src = "/org/benjp/portlet/notification/assets/notif.css", location = AssetLocation.CLASSPATH),
                @Stylesheet(src = "css/sh_style.css")
        }
)

@Less(value = "chat.less", minify = true)


package org.benjp.portlet.chat;

We will go deeply into this part tomorrow. As you can see on the example, Juzu is using a lot of Annotations to make your code simpler and neat.

Twitter Bootstrap Inside

I love Twitter Bootstrap because I can write a standard html application and it will take care of styling it. You don’t have to learn many new things, it’s just a very smart CSS (plus some JavaScript for advanced stuff). Thanks to Less integration, it’s very easy to setup bootstrap once you download the Bootstrap Less files

Bootstrap

Using the same package-info.java class, you will generate Bootstrap with Juzu. So, now you can write views, call resources and use Bootstrap for the web design of your app. Here is what my application looks like:

Injection

The same way Juzu uses annotations for assets, it uses a simple @Inject annotation for Injection. We will see tomorrow some examples on @Inject.

Servlet Mode

In my Chat application, one of my prerequisites was zero-impact on eXo Platform. It means that if I add the Chat on a page, it cannot slow down eXo Platform, and it cannot jeopardize the Intranet performance because it would require too much CPU. This is where Servlet mode is great because you can develop a Web App the same way you do with Play! and you can deploy it on your existing JEE infrastructure (standard Tomcat 7 in my case).
The great thing with Juzu is if you know how to write a portlet, you know how to write a web application (the opposite is also almost true since you just have to know what Portlet Preferences are, but nothing more). The only difference is routes.

Routes will be declared using annotations to keep your code easy to read, easy to understand. No separate routes file like on Play! (one of the things I really dislike in Play!).

Tomorrow, I will give more details on this. For now, let’s introduce the Coolness of Juzu.

All the Coolness

We know how to write an app, but do we know how to write something cool, something you say “it’s fucking great, man!” when you look at it? Of course, there are a number of other gems in Juzu.

Well, you will be disappointed because you have to wait another day or two to learn about this cool stuff. Let’s just name some of them that I will explain over the next days:

Ajax + jQuery : we will see how Ajax calls are made easy with Juzu;
Less : its integration is like everything else with Juzu, easy and well done.
Responsive Design : or how we leverage Juzu coolness?.

What’s Next?

So, that’s all for today but don’t miss tomorrow’s and thursday’s post. We will delve more deeply into Juzu. Before these, if you want to learn more about Juzu, go on its official website: http://juzuweb.org/.

If you have questions about Juzu, you can go to the Google group to ask them: http://groups.google.com/group/juzu

And if you want to contribute, it’s on GitHub: https://github.com/juzu/juzu

A thousand kudos to Julien and his great work on Juzu! ChaaaBoook, Man! (Yes, only he will understand this part.)

« Again, thanks for watching and stay tuned – more things are coming, Benjamin. »

UPDATE: A follow-up post, Juzu Day 2: Real Web Apps as Well, has been published. A second day with Juzu, to dive deeper in how to leverage this new web framework for developing webapps or portlets.

UPDATE 2: The last post of the serie, Juzu Day 3: The Coolness, has been published. It shows you all the coolness of Juzu like Responsive designs, jQuery and Less developments. Fluid App packaging is also there as a bonus.

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.