Slide 1

Slide 1 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 1

Slide 2

Slide 2 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 2 How Wicket, Scala, and Java EE Can Improve Web Development Bruno Borges Oracle Product Manager for Latin America Java EE, GlassFish, WebLogic, Coherence

Slide 3

Slide 3 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 3 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

Slide 4

Slide 4 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 4 Agenda  All about Web Development  Apache Wicket Overview  Introducing Scala and the Gamboa Wicket DSL  Java EE for everything  The Gamboa Project

Slide 5

Slide 5 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 5 All About Web Development

Slide 6

Slide 6 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 6

Slide 7

Slide 7 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 7 Web designing process and tools Mock, draw, code

Slide 8

Slide 8 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 8 PREVIEW IN THE BROWSER

Slide 9

Slide 9 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 9 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?

Slide 10

Slide 10 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 10 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?

Slide 11

Slide 11 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 11 What about functional websites?  Java Server Faces  GWT, Vaadin  Apache Wicket  others  Better use the bottom up design strategy Component-based frameworks work better

Slide 12

Slide 12 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 12 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

Slide 13

Slide 13 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 13 What if we could have a framework that doesn’t force us to totally modify the work of a Web Designer for prototype?

Slide 14

Slide 14 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 14 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?

Slide 15

Slide 15 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 15 Before After, using Apache Struts Imperative Markup

Slide 16

Slide 16 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 16 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…

Slide 17

Slide 17 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 17 Before After, using Apache Wicket Declarative Markup

Slide 18

Slide 18 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 18 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…

Slide 19

Slide 19 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 19 Apache Wicket Quick overview

Slide 20

Slide 20 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 20 HTML Prototype /MyHomePage.html Apache Wicket some message Name: Email: The final product from the Web Designer

Slide 21

Slide 21 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 21 HTML Prototype /MyHomePage.html Apache Wicket some message Name: Email: The final product from the Web Designer

Slide 22

Slide 22 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 22 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

Slide 23

Slide 23 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 23 Gmap2 gmap = new Gmap2(“map”); page.add(gmap);
Google Maps
Easily Extensible  Just add the JAR with extra components to the classpath

Slide 24

Slide 24 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 24 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

Slide 25

Slide 25 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 25 Scala Language

Slide 26

Slide 26 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 26 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

Slide 27

Slide 27 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 27 Scala Language  They are objects as well val func = () ⇒ println(“functional programming”) def callF(paramF: () ⇒ Unit) = paramF() callF(func) Functions

Slide 28

Slide 28 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 28 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

Slide 29

Slide 29 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 29 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) Very smart constructions

Slide 30

Slide 30 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 30 Scala Language val map = new HashMap[Int, String] map += 1 → "Number 1" map += 2 → "Number 2" map += 3 → "Number 3" 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" Very smart constructions

Slide 31

Slide 31 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 31 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

Slide 32

Slide 32 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 32 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

Slide 33

Slide 33 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 33 Wicket + Scala: perfect combination /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

Slide 34

Slide 34 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 34 Wicket + Scala: perfect combination /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

Slide 35

Slide 35 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 35 Java EE for everything else

Slide 36

Slide 36 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 36 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

Slide 37

Slide 37 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 37 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…

Slide 38

Slide 38 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 38 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

Slide 39

Slide 39 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 39 Getters/Setters generated 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

Slide 40

Slide 40 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 40 Getters/Setters generated 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

Slide 41

Slide 41 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 41 Gamboa Project Great architecture, written an archetype must be! Apache Wicket + Java EE 6 + Scala Gamboa Project www.gamboa-project.org

Slide 42

Slide 42 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 42 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

Slide 43

Slide 43 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 43 Gamboa Project myproject $> tree |-- src --> .scala files | `-- code | |-- web | |-- services | `-- email |-- config --> configuration files | `-- email |-- layout --> .html files and presentation | |-- css | `-- js | `-- libs `-- pom.xml Directory Structure: simplified for Web development

Slide 44

Slide 44 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 44 Gamboa Demo Group Birthday

Slide 45

Slide 45 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 45 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.

Slide 46

Slide 46 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 46 QUESTIONS?

Slide 47

Slide 47 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 47 THANK YOU! @brunoborges blogs.oracle.com/brunoborges

Slide 48

Slide 48 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 48 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.

Slide 49

Slide 49 text

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. 49