how scala, wicket, and java ee can improve web development


How Wicket, Scala, and Java EE Can Improve Web Development

Bruno Borges

Oracle Product Manager for Latin America

Java EE, GlassFish, WebLogic, Coherence


Who am I?

Java developer since 2000

Speaker at Conferences

– JustJava, JavaOne Brazil, The Developers Conference, ApacheCon

Evangelized Apache Camel and Apache Wicket in Brazil

Joined Oracle on July 2012

– Product Manager for Java EE, GlassFish and WebLogic

Married, lives in Sao Paulo, has a Golden Retriever, hiker and gamer

Bruno Borges


Agenda

All about Web Development

Apache Wicket Overview

Introducing Scala and the Gamboa Wicket DSL

Java EE for everything

The Gamboa Project


All About Web Development


Web designing process and tools

Mock, draw, code


PREVIEW IN THE

BROWSER


All about Web Development

There are two ways to build web applications

– bottom-up

Mock up interfaces, develop using a web framework, apply design

– top-down

Design pixel-perfect prototype, adapt prototype to a web framework,

There’s no web framework able to do both… productively speaking

Pixel-perfect websites vs functional websites

How do we build web sites and applications?


Outside the Java Web Framework Land

Ruby on Rails

PHP

Python

– Django Framework

JavaScript + REST

– ExtJS

– jQuery

What are the technologies people use to build pixel-perfect sites?


What about functional websites?

Java Server Faces

GWT, Vaadin

Apache Wicket

others

Better use the bottom up design strategy

Component-based frameworks work better


Java Frameworks for Pixel Perfect Websites

JSP / Servlets

Struts 2, Tapestry, Wicket

Java Server Faces, specifically Facelets

Play!, Lift

others

Better use the top down design strategy

Frameworks that are good for pixel-perfect websites


What if we could have a framework that doesn’t force us to totally modify the work of a Web Designer for prototype?


Imperative vs Declarative HTML Markup

Pixel-perfect websites are always top-down

– A lot of work to add server-side code to the prototype

– And it would be good for web designers to continue to have a functional

prototype after server-side code is added

Imperative

– Must change from raw HTML markup to specific web framework markup

Declarative

– Annotates markup to be accessed, and modified, later by the framework

What is the best HTML markup for pixel-perfect websites?


Before

<form action=”save”>

<input type=”text” name=”name” />

<input type=”submit” value=”Save” />

</form>

After, using Apache Struts

<s:form action=”save”>

<s:input property=”name” />

<s:submit value=”Save” />

</s:form>

Imperative Markup


Does it run on the browser?

Imperative frameworks that modify the prototype

– Web designers loose ability to preview in the browser

– They must install, configure and run

Servlet containers, Ruby, or PHP servers

You really don’t want web designers touching server-side code

Specially programmers modifying HTML or CSS elements to fix things

Not really…


Before

<form action=”save”>

<input type=”text” name=”name” />

<input type=”submit” value=”Save” />

</form>

After, using Apache Wicket

<form wicket:id=”form”>

<input type=”text” wicket:id=”name” />

<input type=”submit” value=”Save” wicket:id=”save” />

</form>

Declarative Markup


Programmers and Developers

Programmers focused on server-side programming

Web Designers able to modify client-side without messing server-side

Preview in the browser

Customer happy to see (statically) how the application is progressing

– Open Firefox, go to file:///home/customer/project/web/index.html

Happily Ever After…


Apache Wicket

Quick overview


HTML Prototype

/MyHomePage.html <html> <head><title>Apache Wicket</title></head> <body> <span>some message</span> <form> Name: <input type=”text” /> Email: <input type=”text” /> <input type=”submit” value=”Send” /> </form> </body> </html>

The final product from the Web Designer


HTML Prototype

/MyHomePage.html <html> <head><title>Apache Wicket</title></head> <body> <span wicket:id=”msg”>some message</span> <form wicket:id=”form”> Name: <input type=”text” wicket:id=”name” /> Email: <input type=”text” wicket:id=”email” /> <input type=”submit” value=”Send” /> </form> </body> </html>

The final product from the Web Designer


Java side

/MyHomePage.java

public class MyHomePage extends WebPage {

public HomePage() {

add(new Label(“msg”, “JavaOne”));

Form form = new Form(“form”) {

public void onSubmit() { usrBean.salvar(getModelObject());

}};

form.add(new TextField(“name”));

form.add(new TextField(“email”));

form.setModel(new CompoundPropertyModel(new User()));

add(form);

}

}

Where all the magic happens, object oriented


Gmap2 gmap = new Gmap2(“map”); page.add(gmap); <div wicket:id=”map”> Google Maps </div>

Easily Extensible

Just add the JAR with extra

components to the classpath


Apache Wicket

jQuery as its client-side engine for

– Core components

– Ajax

– WebSockets

Page composition by: Inheritance, Borders and Panels

Integration with CDI

Back button support

Several components, and also the WicketStuff Community

And so many other features


Scala Language


Scala Language

Object Oriented and Functional Language

Runs on JVM

Statically typed

Compiles to Java byte code (sweeeet)

Extensible

Easy to define custom DSLs

Quick introduction

var foo = 8

foo = “bar”

Type mismatch;

found: String(“bar”)

required: Int


Scala Language

They are objects as well

val func = () ⇒ println(“functional programming”)

def callF(paramF: () ⇒ Unit) = paramF()

callF(func)

Functions


Scala Language

They may seem complex, but you get used to them

val list1to9 = 1 to 9 toList

for (i ← list1to9) {

print(i)

}

list1to9.foreach(i ⇒ print(i))

Very smart constructions


Scala Language

val listA = List(1, 2)

val listB = List(3, 4)

val listC = listA :: listB

// listC is a new List object

val listD = listC :: 5

print(listD)

// output: List(1,2,3,4,5)



Scala Language

val map = new HashMap[Int, String]

map += 1 → "Number 1"



println(map(2))

// '2' is the key, not the index!

val romans = Map(1 → "I", 2 → "II", 3 → "III", 4 →

"IV", 5 → "V")

println(romanNumeral(4)) // outputs: "IV"



Back to Wicket

Wicket programming model resembles Swing

Pushes developers to use anonymous, inner classes

Functional programming fits quite well into this model

Less code, less verbosity

Scala #win

Strong use of anonymous classes


Wicket + Scala: perfect combination

/MyHomePage.java

public class MyHomePage extends WebPage {

@Inject private MyService service;

public MyHomePage() {

add(new Label(“msg”, “JavaOne”));

Form form = new Form(“form”, new CompoudPropertyModel(new User())){

public void onSubmit() {

service.update(getModelObject());

}

};

form.add(new TextField(“name”));

form.add(new TextField(“email”));

add(form);

}

}

Before, in Java



/MyHomePage.scala class MyHomePage extends WebPage { @Inject var service: MyService = _ add(new Label(“msg”, “JavaOne”)) object form extends Form(“form”, new CompoundPropertyModel(new User())) { add(new TextField(“name”)) add(new TextField(“email”)) override def onSubmit() = { service.update(getModelObject()) } } add(form) }

Now, with Scala



/MyHomePage.scala class MyHomePage extends WebPage with DSLWicket { @Inject var service: MyService = _ label(“msg”, “JavaOne”) val f = form(“form”, () ⇒ service.update(f.mobject)) f.scmodel(new User()) f.textField[String](“name”) f.textField[String](“email”) }

Now with specific Scala DSL for Wicket


Java EE for everything else


Java EE 6

Enterprise Java Beans

Contexts and Dependency Injection

Java Persistent API

Java Transaction API

Bean Validation

JAX-RS

Filling the necessary gaps, extraordinarily well


And more stuff

GlassFish Maven Embedded Plugin

Derby DB

No more web.xml

– Servlet 3.0 is awesome

Getters/Setters generated

– Scala’s @BeanProperty annotation

Like…


No more web.xml

package code.webapp

import javax.servlet.annotation.{ WebFilter, WebInitParam }

import org.apache.wicket.protocol.http.WicketFilter

@WebFilter(value = Array("/*"), initParams = Array(

new WebInitParam(name="applicationClassName", value="code.webapp.Application"),

new WebInitParam(name="filterMappingUrlPattern", value = "/*“)

))

class GamboaApplication extends WicketFilter

Servlet 3 and Scala



package code.data

import scala.reflect.BeanProperty

import javax.persistence.{ Id, GeneratedValue }

trait Identifiable extends Serializable {

@Id @GeneratedValue @BeanProperty var id: String = _

}

Scala’s @BeanProperty annotation



package code.data

import scala.reflect.BeanProperty

import javax.persistence.{ Entity, Table }

@Entity

@Table(name = “USERS”)

class User extends Identifiable {

@BeanProperty var name: String = _

@BeanProperty var email: String = _

}

Scala’s @BeanProperty annotation


Gamboa Project Great architecture, written an archetype must be!

Apache Wicket + Java EE 6

+ Scala

Gamboa Project www.gamboa-project.org


Gamboa Project

Scala DSL for Wicket

3 archetypes

– Java EE archetype

JPA, CDI, EJB3, GlassFish Maven Plugin integrated

– Spring with CouchDB

– Spring with MongoDB

Both integrated with Jetty plugin

Directory structure simplified for Web development

– Not really “Maven convention”, for good reason

Maven archetypes


Gamboa Demo Group Birthday


Next time you choose a web framework, think not only about features, but also about the web development process and the type of website you are going to build.


QUESTIONS?


THANK YOU! @brunoborges blogs.oracle.com/brunoborges


The preceding is intended to outline our general product direction. It is intended

for information purposes only, and may not be incorporated into any contract.

It is not a commitment to deliver any material, code, or functionality, and should

not be relied upon in making purchasing decisions. The development, release,

and timing of any features or functionality described for Oracle’s products

remains at the sole discretion of Oracle.

how scala, wicket, and java ee can improve web development

Documents