This document provides an agenda and overview for a workshop on developing modern Java web applications with Java EE 7 and AngularJS. The workshop will introduce Java EE 7, demonstrate how to build a sample HackerPins application using Java EE 7 for the REST backend and AngularJS for the frontend, and deploy the application to OpenShift. Key topics that will be covered include an introduction to Java EE 7 specifications like CDI, JAX-RS, and WebSockets, and how they allow building modern web applications. Code for the sample HackerPins application will be provided on GitHub.
2. WHO AM I?
• Shekhar
Gula+
-‐-‐
OpenShi1
Developer
Evangelist
• Java
/
JavaScript
/
Python
/
NoSQL
/
Cloud
Guy
• TwiEer
Handle
:
shekhargula*
• Github
:
h,ps://github.com/shekhargula*
• Author
of
30
technologies
in
30
days
blog
series
h,ps://www.openshi9.com/blogs/learning-‐30-‐
technologies-‐in-‐30-‐days-‐a-‐developer-‐challenge
3. l Define
Modern
Web
Applica+on
l Introduce
Java
EE
7
l GeRng
Started
with
Java
EE
7
l OpenShi1
for
Java(EE)
Developers
l Write
HackerPins
Applica+on
REST
Backend
l Look
at
AngularJS
l Write
HackerPins
AngularJS
Frontend
l Deploy
to
OpenShi1
AGENDA
http://www.hackerpins.com/
6. What
make’s
a
modern
web
applica*on?
• Exposes
REST
JSON
web
services
• Single
backend
and
mul+ple
front
ends
• Embraces
HTML
5
• GeoLoca+on,
Local
Storage,
Web
Sockets
• Single
page
web
applica+on
• Uses
MV*
JavaScript
framework
• Stateless
so
that
you
can
scale
horizontally
• Uses
OAuth
• Integrates
with
social
pla`orms
like
TwiEer,
Facebook,
Google+
• Embraces
Polyglot
Persistence
• Cloud
aware
7. CAN
WE
BUILD
MODERN
WEB
APPLICATIONS
USING
JAVA
EE?
8. Short
answer
is…
Yes
This
session
will
try
to
convince
you
to
use
Java
EE
7
for
your
next
web
app.
http://www.hackerpins.com/
9. Choose
Session
Delivery
Mode
1. Hands-‐on
coding
–
No
slides
–
J
2. Slides
with
code
fragments
–
L
10. Java
EE
*meline
0
10
12
18
24
30
38
JPE
(1998)
J2EE
1.2
(1999)
J2EE
1.3(2001)
J2EE
1.4(2001)
Java
EE
5(2006)
Java
EE
6(2009)
Java
EE
7(2013)
Java
EE
Timeline
Java
EE
Timeline
11. Java
EE
6
changed
the
game…
It
was
lightweight
• Introduc+on
of
web
profile
• EJBs
can
be
packed
in
WAR
files
• Servlet
3.0
• web.xml
became
op+onal,
@WebServlet,
@WebFilter
• Type
safe
contextual
dependency
injec+on(CDI)
• DI
for
Java
EE,
event
support
• @Asynchronous
and
@Schedule
support
•
RESTFul
web
services
support
with
JAX-‐RS
1.1
12. Java
EE
7
–
Produc*vity
and
HTML
5
Focused
• Builds
on
top
of
Java
EE
6
• Embraces
HTML
5
• 4
new
specs
• 3
major
spec
updates
• 6
minor
spec
updates
• 5
micro
updates
13. The
Java
EE
7
Pla]orm
Java EE 7 Platform
CDI1.1
BEANVALIDATION1.1
INTERCEPTORS1.2
CONCURRENCY1.0
JPA 2.1
JTA 1.2 EJB 3.2 JMS 2.0
WEBSOCKET
1.0
SERVLET 3.1
JSP 2.3 EL 3.0 JSF 2.2
JCA 1.7
MAIL 1.5
BATCH 1.0
JSON-P 1.0
JAX-RS 2.0
New Major updates Minor/macro updates
14. Our
modern
Java
EE
7
stack
Java EE 7 Platform
CDI1.1
BEANVALIDATION1.1
INTERCEPTORS1.2
CONCURRENCY1.0
JPA 2.1
JTA 1.2 EJB 3.2
WEBSOCKET
1.0
JSON-P 1.0
JAX-RS 2.0
16. CDI
1.1-‐-‐
Context
and
Dependency
Injec*on
• Allows
you
to
use
dependency
injec+on
in
Java
EE
environment
without
third
party
libraries.
• Don’t
call
us.
We
will
call
you.
• CDI
container
manages
the
life
cycle
of
components.
• CDI
brings
dependency
injec+on,
context
and
scopes,
interceptors,
loose
coupling
and
strong
typing.
• Injected
bean
lifecycle
depends
on
the
target
bean.
• Turns
nearly
every
Java
class
into
CDI
bean
• It
is
not
a
non
sta+c
inner
class
• It
is
a
concrete
class
or
annotated
with
decorators
• Has
default
constructor
with
no
parameters
or
declares
a
constructor
with
@Inject
18. CDI
Example
Simple CDI Bean Injecting a bean
public
class
LowercaseBeau+fier
implements
MessageBeau+fier
{
@Override
public
String
beau+fy(String
message)
{
return
message
!=
null
?
message.toLowerCase()
:
null;
}
}
public
interface
MessageBeau+fier
{
public
String
beau+fy(String
message);
}
@Applica+onScoped
public
class
StatusService
{
@Inject
private
MessageBeau+fier
messageBeau+fier;
public
Status
postStatus(String
message)
{
Status
status
=
new
Status(messageBeau+fier.beau+fy(message));
return
status;
}
}
19. CDI
-‐-‐
Two
implementa*ons
MessageBeau*fier
public
class
UppercaseBeau+fier
implements
MessageBeau+fier
{
@Override
public
String
beau+fy(String
message)
{
return
message
!=
null
?
message.toUpperCase()
:
null;
}
}
public
class
LowercaseBeau+fier
implements
MessageBeau+fier
{
@Override
public
String
beau+fy(String
message)
{
return
message
!=
null
?
message.toLowerCase()
:
null;
}
}
Code will throw exception-- Ambiguous dependencies for type
MessageBeautifier
20. CDI
–
Use
@Qualifier
@Qualifier
@Reten+on(Reten+onPolicy.RUNTIME)
@Target({ElementType.METHOD,
ElementType.TYPE,
ElementType.FIELD})
public
@interface
Beau+fier
{
Beau+fierType
type();
}
public
enum
Beau+fierType
{
LOWERCASE,
UPPERCASE
}
21. CDI
-‐-‐
@Qualifier
usage
@Beau+fier(type
=
Beau+fierType.LOWERCASE)
public
class
LowercaseBeau+fier
implements
MessageBeau+fier
{
@Override
public
String
beau+fy(String
message)
{
return
message
!=
null
?
message.toLowerCase()
:
null;
}
}
@Beau+fier(type
=
Beau+fierType.UPPERCASE)
public
class
UppercaseBeau+fier
implements
MessageBeau+fier
{
@Override
public
String
beau+fy(String
message)
{
return
message
!=
null
?
message.toUpperCase()
:
null;
}
}
22. CDI
–
Loose
Coupling
and
Sta*c
Typing
@Applica+onScoped
public
class
StatusService
{
@Inject
@Beau+fier(type
=
Beau+fierType.UPPERCASE)
private
MessageBeau+fier
messageBeau+fier;
public
Status
postStatus(String
message)
{
Status
status
=
new
Status(messageBeau+fier.beau+fy(message));
return
status;
}
}
23. CDI
1.1:
What’s
new
in
Java
EE
7?
• Finer
scanning
control
in
beans.xml
• bean-‐discovery-‐mode
aEribute
–
all,
none,
annotated
• @Vetoed
annota+on
to
veto
processing
of
a
package
or
class.
• You
can
use
@Transac+onal
with
CDI
beans.
• You
can
get
away
from
EJBs.
24. Bean
Valida*on
• Specifies
common
valida+on
concept
for
JavaBeans.
• Allow
you
to
put
constraints
on
data
to
make
sure
it
is
valid.
• Annota+on
based
constraints
• Use
constraint
in
any
layer
25. Bean
Valida*on
Example
public
class
Status{
@NotNull
@Size(max
=
140)
private
String
message;
@NotNull
@Past
private
final
Date
postedAt;
@UniqueUrl
private
String
url;
public
Status()
{}
}
26. Bean
Valida*on
1.1
–
What’s
new
in
Java
EE
7?
• You
can
validate
method
parameters
and
return
types.
• Integra+on
with
JAX-‐RS
@Path(“/statuses”)
public class StatusService {
@POST @Produces(“application/json”)
public @NotNull Status postStatus(@Valid @NotNull Status status) {
// persist in database
return status;
}
}
27. Interceptors
• Allows
you
to
add
cross
cuRng
concerns
to
your
beans.
• Lightweight
AOP
• You
can
use
them
to
intercept
method
calls,
constructor
invoca+on,
Method
+meouts.
28. Interceptors
in
ac*on
@Interceptor
@Loggable
public
class
LoggingInterceptor
{
@Inject
private
Logger
logger;
@AroundInvoke
public
Object
logMethodCall(Invoca+onContext
invoca+onContext)
throws
Excep+on
{
logger.trace(String.format("Entering
method
%s",
invoca+onContext.getMethod().getName());
try{
return
invoca+onContext.proceed();
}finally{
logger.trace(String.format("Entering
method
%s",
invoca+onContext.getMethod().getName());
@InterceptorBinding
@Reten+on(Reten+onPolicy.RUNTIME)
@Target({ElementType.TYPE,
ElementType.METHOD})
public
@interface
Loggable
{
}
@Loggable
@Applica+onScoped
public
class
StatusService
{
}
Interceptor
InterceptorBinding and usage
29. Interceptors
1.2
–
What’s
new
in
Java
EE
7?
• You
can
now
intercept
constructor
invoca+ons
using
@AroundConstruct
• You
can
priori+ze
interceptors
using
@Priority.
30. JPA
• Describes
the
management
of
rela+onal
data
in
applica+ons.
• JPA
implementa+ons
provide
ORM
framework
• JPA
provides
an
API
to
perform
CRUD
opera+on
on
en++es.
• An
en+ty
is
a
POJO,
whose
state
is
mapped
to
a
rela+onal
database.
• JPA
also
provides
a
query
language
to
make
queries
against
en++es
stored
in
rela+onal
database.
31. JPA
in
ac*on
@En+ty
public
class
Status
{
@Id
@GeneratedValue(strategy
=
Genera+onType.AUTO)
private
Long
id;
private
String
message;
private
final
Date
postedAt
=
new
Date();
}
@Stateless
public
class
StatusService
{
@Inject
private
En+tyManager
en+tyManager;
public
Status
postStatus(String
message){
Status
status
=
new
Status(message);
en+tyManager.persist(status);
return
status;
}
}
32. JPA
2.1
–
What’s
new
in
Java
EE
7?
• Schema
genera+on
using
standard
proper+es.
• Use
@Index
to
define
addi+onal
indexes
in
schema
genera+on.
• New
En+tyGraph
API
available
in
En+tyManager.
33. Web
Socket
1.0
-‐-‐
New
in
Java
EE
7
• Bidirec+onal
full
duplex
messaging
• Annota+on
based
or
interface
based
programming
model
• Server
and
Client
WebSocket
Endpoint
• Integrated
with
Java
EE
34. Web
Sockets
in
Ac*on
@ServerEndpoint("/reverse")
public
class
ReverseEchoWebSocketServerEndpoint
{
@OnOpen
public
void
onOpen(){
System.out.println("Connec+on
opened");
}
@OnMessage
public
String
onMessage(String
message){
return
StringU+ls.reverse(message);
}
@OnClose
public
void
connec+onClose(){
System.out.println("Closed
connec+on");}
var
wsUrl
=
'hEp://localhost:8080/example/reverse’;
var
ws
=
new
WebSocket(wsUrl);
ws.onopen
=
func+on(event){};
ws.onclose
=
func+on(event){
console.log("Remote
host
closed
or
refused
WebSocket
connec+on");
};
ws.onmessage
=
func+on(event){
$("textarea#outputMessage").val(event.data);
};
$(".btn").on('click',func+on(){
var
message
=
$('textarea#inputMessage').val();
ws.send(message);
});
Server Endpoint JavaScript Web Socket client
35. JSON-‐P
1.0
• API
to
read
or
write
JSON
• Two
API’s
• Streaming
API
• Low
level
API
to
parse
and
generate
JSON
• Similar
to
StAX
API
in
XML
world
• Object
model
API
• High
level
API
• Similar
to
DOM
API
in
XML
world
36. JsonReader
and
JsonWriter
Example
JsonReader
jsonReader
=
Json.createReader(new
StringReader(response));
JsonObject
jsonObject
=
jsonReader.readObject();
String
bannerImage
=
jsonObject.getString("image");
String
descrip+on
=
jsonObject.getString("text");
String
+tle
=
jsonObject.getString("+tle");
Map<String,
String>
fetchedData
=
new
HashMap<>();
fetchedData.put("picUrl",
bannerImage);
fetchedData.put("descrip+on",
descrip+on);
fetchedData.put("+tle",
+tle);
JsonObjectBuilder
builder
=
Json.createObjectBuilder();
builder.add("firstName",
"Shekhar")
.add("lastName",
"Gula+");
JsonObject
result
=
builder.build();
StringWriter
sw
=
new
StringWriter();
try
(JsonWriter
writer
=
Json.createWriter(sw))
{
writer.writeObject(result);
}
sw.toString();
JsonReader Example JsonWriter Example
37. Gefng
Started
with
Java
EE
7
Three
ways:
1. Use
Maven
archetype
1. Use
com.airhacks
JavaEE7
archetype
2. Use
template
Git
repository
3. Use
OpenShi1
to
create
a
publicly
accessible
web
applica+on
in
minutes.
39. OpenShift
is
PaaS by Red Hat
Multi-language,
Auto-Scaling,
Self-service,
Elastic,
Cloud Application Platform
40. l Focus
on
code,
not
on
configura+on
l Speeds
up
deployment
l Scales
your
app
l Efficient
l Embraces
polyglot
programming
and
persistence.
WHY PAAS?
43. l
Scalable
Java
EE
6
supported
stack
via
JBoss
AS7
and
JBoss
EAP
6.
l
Java
EE
7
supported
via
WildFly
community
cartridge.
l
Scalable
Tomcat
6
and
Tomcat
7
support.
l
Hot
deployment.
l
Debugging.
l
Supports
Maven,
Ant,
and
Gradle.
l
Supports
con+nuous
integra+on
via
Jenkins.
l
Eclipse
and
IntelliJ
Idea
support.
l
Can
run
Java
8,
JeEy,
Tomcat
8,
Tom
EE,
etc.
OPENSHIFT JAVA STORY
44. Demo
-‐
Crea*ng
OpenShi9
WildFly
Applica*on
• Go
to
hEps://www.openshi1.com/
and
sign
up
for
OpenShi1
Online.
• Verify
your
email
• Login
into
OpenShi1
web
console
• Search
for
WildFly
applica+on
type
• Give
applica+on
name
and
press
“Create
Applica+on”
buEon.
45. Demo
:
Add
MySQL
Cartridge
Add
MySQL
5.5
cartridge
from
web
console
46. Demo
:
Import
applica*on
in
Eclipse
Use
OpenShi1
Eclipse
plugin
49. AngularJS
–
in
one
slide
• Extending
HTML
to
add
dynamic
nature
so
that
we
can
build
modern
web
applica+ons
with
ease.
• Brings
you
back
to
HTML
• Declara+ve
approach
• Eliminates
DOM
manipula+on
by
two
way
data
binding
• Ideal
for
building
single
page
web
applica+ons
50. AngularJS
–
Main
Components
• Services
:
Objects
or
func+ons
to
carry
out
specific
tasks
common
to
the
whole
web
applica+on.
• Direc+ves
:
allows
you
to
extend
HTML
by
defining
your
own
project
specific
direc+ves.
• Controller
:
constructor
func+ons
that
define
the
app
business
logic.
• Scope
:
contains
model
data.
Glues
controller
and
views.