Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OPENSHIFT
Workshop
PRESENTED
BY
Shekhar
Gulati
Developing Modern Java Web
Applications with Java EE 7 and
AngularJS
WHO AM I?
•  Shekhar	
  Gula+	
  -­‐-­‐	
  OpenShi1	
  Developer	
  Evangelist	
  
	
  
•  Java	
  /	
  JavaScript	
  /	
 ...
l  Define	
  Modern	
  Web	
  Applica+on	
  
l  Introduce	
  Java	
  EE	
  7	
  
l  GeRng	
  Started	
  with	
  Java	
  ...
CODE DU JOUR
https://github.com/shekhargulati/hackerpins-
drdobbsindia-conference
Modern	
  Web	
  Applica*on	
  
 What	
  make’s	
  a	
  modern	
  web	
  applica*on?	
  
•  Exposes	
  REST	
  JSON	
  web	
  services	
  
•  Single	
  ba...
CAN	
  WE	
  BUILD	
  MODERN	
  WEB	
  
APPLICATIONS	
  USING	
  JAVA	
  EE?	
  
Short	
  answer	
  is…	
  
	
  
Yes	
  
This	
  session	
  will	
  try	
  to	
  convince	
  you	
  to	
  use	
  Java	
  
E...
Choose	
  Session	
  Delivery	
  Mode	
  
1.  Hands-­‐on	
  coding	
  –	
  No	
  slides	
  –	
  J	
  
2.  Slides	
  with	...
Java	
  EE	
  *meline	
  
0	
  
10	
  
12	
  
18	
  
24	
  
30	
  
38	
  
JPE	
  (1998)	
   J2EE	
  1.2	
  
(1999)	
  
J2E...
Java	
  EE	
  6	
  changed	
  the	
  game…	
  It	
  was	
  lightweight	
  
•  Introduc+on	
  of	
  web	
  profile	
  
•  EJ...
Java	
  EE	
  7	
  –	
  Produc*vity	
  and	
  HTML	
  5	
  Focused	
  
•  Builds	
  on	
  top	
  of	
  Java	
  EE	
  6	
  ...
The	
  Java	
  EE	
  7	
  Pla]orm	
  
Java EE 7 Platform
CDI1.1
BEANVALIDATION1.1
INTERCEPTORS1.2
CONCURRENCY1.0
JPA 2.1
J...
Our	
  modern	
  Java	
  EE	
  7	
  stack	
  
Java EE 7 Platform
CDI1.1
BEANVALIDATION1.1
INTERCEPTORS1.2
CONCURRENCY1.0
J...
LETS	
  LOOK	
  AT	
  FEW	
  JAVA	
  EE	
  7	
  SPECS	
  
CDI	
  1.1-­‐-­‐	
  Context	
  and	
  Dependency	
  Injec*on	
  
	
  •  Allows	
  you	
  to	
  use	
  dependency	
  injec+...
Enable	
  CDI	
  –	
  beans.xml	
  
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>	
  
<beans	
  
	
  	
  	
  	
  	
  	
  ...
CDI	
  Example	
  
Simple CDI Bean Injecting a bean
	
  public	
  class	
  LowercaseBeau+fier	
  implements	
  
MessageBeau...
CDI	
  	
  -­‐-­‐	
  Two	
  implementa*ons	
  MessageBeau*fier	
  
public	
  class	
  UppercaseBeau+fier	
  
implements	
  M...
CDI	
  –	
  Use	
  @Qualifier	
  
@Qualifier	
  
@Reten+on(Reten+onPolicy.RUNTIME)	
  
@Target({ElementType.METHOD,	
  Eleme...
CDI	
  -­‐-­‐	
  @Qualifier	
  usage	
  
	
  @Beau+fier(type	
  =	
  
Beau+fierType.LOWERCASE)	
  
	
  public	
  class	
  Low...
CDI	
  –	
  Loose	
  Coupling	
  and	
  Sta*c	
  Typing	
  
@Applica+onScoped	
  
public	
  class	
  StatusService	
  {	
 ...
CDI	
  1.1:	
  What’s	
  new	
  in	
  Java	
  EE	
  7?	
  
•  Finer	
  scanning	
  control	
  in	
  beans.xml	
  
•  bean-...
Bean	
  Valida*on	
  
•  Specifies	
  common	
  valida+on	
  concept	
  for	
  
JavaBeans.	
  
•  Allow	
  you	
  to	
  put...
Bean	
  Valida*on	
  Example	
  
public	
  class	
  Status{	
  
	
  	
  	
  	
  @NotNull	
  	
  	
  @Size(max	
  =	
  140)...
Bean	
  Valida*on	
  1.1	
  –	
  	
  What’s	
  new	
  in	
  Java	
  EE	
  7?	
  
•  You	
  can	
  validate	
  method	
  pa...
Interceptors	
  
•  Allows	
  you	
  to	
  add	
  cross	
  cuRng	
  concerns	
  to	
  
your	
  beans.	
  
•  Lightweight	
...
Interceptors	
  in	
  ac*on	
  
	
  @Interceptor	
  
	
  @Loggable	
  
	
  public	
  class	
  LoggingInterceptor	
  {	
  
...
Interceptors	
  1.2	
  –	
  What’s	
  new	
  in	
  Java	
  EE	
  7?	
  	
  
•  You	
  can	
  now	
  intercept	
  construct...
JPA	
  	
  
•  Describes	
  the	
  management	
  of	
  rela+onal	
  data	
  in	
  applica+ons.	
  
•  JPA	
  implementa+on...
JPA	
  in	
  ac*on	
  
	
  @En+ty	
  
	
  public	
  class	
  Status	
  {	
  
	
  	
  	
  	
  @Id	
  
	
  	
  	
  	
  @Gene...
JPA	
  2.1	
  –	
  What’s	
  new	
  in	
  Java	
  EE	
  7?	
  
•  Schema	
  genera+on	
  using	
  standard	
  proper+es.	
...
Web	
  Socket	
  1.0	
  	
  -­‐-­‐	
  New	
  in	
  Java	
  EE	
  7	
  
•  Bidirec+onal	
  full	
  duplex	
  messaging	
  
...
Web	
  Sockets	
  in	
  Ac*on	
  
@ServerEndpoint("/reverse")	
  
public	
  class	
  ReverseEchoWebSocketServerEndpoint	
 ...
JSON-­‐P	
  1.0	
  
•  API	
  to	
  read	
  or	
  write	
  JSON	
  
•  Two	
  API’s	
  
•  Streaming	
  API	
  
•  Low	
  ...
JsonReader	
  and	
  JsonWriter	
  Example	
  
JsonReader	
  jsonReader	
  =	
  Json.createReader(new	
  
StringReader(res...
Gefng	
  Started	
  with	
  Java	
  EE	
  7	
  	
  
Three	
  ways:	
  
1.  Use	
  Maven	
  archetype	
  
1.  Use	
  com.ai...
OpenShift
OPENSHIFT	
  OVERVIEW	
  
OpenShift
is
PaaS by Red Hat
Multi-language,
Auto-Scaling,
Self-service,
Elastic,
Cloud Application Platform
l  Focus	
  on	
  code,	
  not	
  on	
  configura+on	
  
l  Speeds	
  up	
  deployment	
  
l  Scales	
  your	
  app	
  
...
OUR STACK
origin
Public
Cloud
Service
On-
premise
or Private
Cloud
Software
Open
Source
Project
FLAVORS OF OPENSHIFT
l  	
  Scalable	
  Java	
  EE	
  6	
  supported	
  stack	
  via	
  JBoss	
  AS7	
  and	
  JBoss	
  EAP	
  6.	
  
l  	
  ...
Demo	
  -­‐	
  Crea*ng	
  OpenShi9	
  WildFly	
  Applica*on	
  
•  Go	
  to	
  hEps://www.openshi1.com/	
  and	
  sign	
  ...
Demo	
  :	
  Add	
  MySQL	
  Cartridge	
  
	
  
	
  
	
  
Add	
  MySQL	
  5.5	
  cartridge	
  from	
  web	
  console	
  
Demo	
  :	
  Import	
  applica*on	
  in	
  Eclipse	
  
	
  
	
  
	
  
Use	
  OpenShi1	
  Eclipse	
  plugin	
  
Demo	
  :	
  Pull	
  the	
  Code	
  from	
  Github	
  Repository	
  
$	
  git	
  rm	
  -­‐rf	
  src/	
  pom.xml	
  
$	
  g...
Demo	
  :	
  Code	
  walkthrough	
  REST	
  backend	
  
$	
  git	
  checkout	
  remotes/origin/backend	
  
•  JAX-­‐RS	
  ...
AngularJS	
  –	
  in	
  one	
  slide	
  
•  Extending	
  HTML	
  to	
  add	
  dynamic	
  nature	
  so	
  that	
  we	
  can...
AngularJS	
  –	
  Main	
  Components	
  
•  Services	
  :	
  Objects	
  or	
  func+ons	
  to	
  carry	
  out	
  specific	
 ...
Angular	
  in	
  Ac*on	
  
<!DOCTYPE	
  html>	
  
<html	
  ng-­‐app>	
  
<head></head>	
  
<body>	
  
<div	
  ng-­‐init=”f...
AngularJS:	
  Controller	
  and	
  Scope	
  in	
  Ac*on	
  
<!DOCTYPE	
  html>	
  
<html	
  ng-­‐app>	
  
<head></head>	
 ...
AngularJS:	
  Adding	
  func*ons	
  to	
  controllers	
  
<div	
  ng-­‐controller="FriendsCtrl”>	
  
	
  	
  	
  	
  <ul>	...
Demo	
  :	
  Code	
  walkthrough	
  Angular	
  frontend	
  
$	
  git	
  checkout	
  remotes/origin/frontend	
  
•  Control...
Deploy	
  to	
  OpenShi9	
  
	
  
	
  
	
  
$	
  git	
  push	
  
QUESTIONS?
DONE!
Upcoming SlideShare
Loading in …5
×

Developing Modern Java Web Applications with Java EE 7 and AngularJS

Developing Modern Java Web Applications with Java EE 7 and AngularJS

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Developing Modern Java Web Applications with Java EE 7 and AngularJS

  1. 1. OPENSHIFT Workshop PRESENTED BY Shekhar Gulati Developing Modern Java Web Applications with Java EE 7 and AngularJS
  2. 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. 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/
  4. 4. CODE DU JOUR https://github.com/shekhargulati/hackerpins- drdobbsindia-conference
  5. 5. Modern  Web  Applica*on  
  6. 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. 7. CAN  WE  BUILD  MODERN  WEB   APPLICATIONS  USING  JAVA  EE?  
  8. 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. 9. Choose  Session  Delivery  Mode   1.  Hands-­‐on  coding  –  No  slides  –  J   2.  Slides  with  code  fragments  –  L  
  10. 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. 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. 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. 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. 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
  15. 15. LETS  LOOK  AT  FEW  JAVA  EE  7  SPECS  
  16. 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  
  17. 17. Enable  CDI  –  beans.xml   <?xml  version="1.0"  encoding="UTF-­‐8"?>   <beans                  xmlns="hEp://xmlns.jcp.org/xml/ns/javaee"                  xmlns:xsi="hEp://www.w3.org/2001/XMLSchema-­‐instance"                  xsi:schemaLoca+on="hEp://xmlns.jcp.org/xml/ns/javaee                                                hEp://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"                  bean-­‐discovery-­‐mode="all">   </beans>  
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.  
  38. 38. OpenShift OPENSHIFT  OVERVIEW  
  39. 39. OpenShift is PaaS by Red Hat Multi-language, Auto-Scaling, Self-service, Elastic, Cloud Application Platform
  40. 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?
  41. 41. OUR STACK
  42. 42. origin Public Cloud Service On- premise or Private Cloud Software Open Source Project FLAVORS OF OPENSHIFT
  43. 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. 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. 45. Demo  :  Add  MySQL  Cartridge         Add  MySQL  5.5  cartridge  from  web  console  
  46. 46. Demo  :  Import  applica*on  in  Eclipse         Use  OpenShi1  Eclipse  plugin  
  47. 47. Demo  :  Pull  the  Code  from  Github  Repository   $  git  rm  -­‐rf  src/  pom.xml   $  git  commit  -­‐am  “deleted  template  sourcecode”   $  git  remote  add  upstream  -­‐m  master  hEps:// github.com/shekhargula+/hackerpins-­‐ drdobbsindia-­‐conference   $  git  pull  -­‐s  recursive  -­‐X  theirs  upstream  master    
  48. 48. Demo  :  Code  walkthrough  REST  backend   $  git  checkout  remotes/origin/backend   •  JAX-­‐RS  resources   •  Async  JAX-­‐RS   •  JPA  layer   •  CDI  usage   •  Bean  valida+on  
  49. 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. 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.  
  51. 51. Angular  in  Ac*on   <!DOCTYPE  html>   <html  ng-­‐app>   <head></head>   <body>   <div  ng-­‐init=”friends=  [{name:’karan'},{name:'rahul'},{name:'sameer'}]”>          <ul>          <li  ng-­‐repeat=”friend  in  friends">                    {{friend.name}}          </li>          </ul>   </div>   <script  src="hEp://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>   </body>   </html>   http://plnkr.co/edit/NU9wjQppgLMWujpH4bGU?p=preview
  52. 52. AngularJS:  Controller  and  Scope  in  Ac*on   <!DOCTYPE  html>   <html  ng-­‐app>   <head></head>   <body>   <div  ng-­‐controller="FriendsCtrl”>          <ul>                <li  ng-­‐repeat="friend  in  friends”>{{friend.name}}  </li></ul>   </div>   <script  src="hEp://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>   <script>          func+on  FriendsCtrl($scope)  {                  $scope.friends  =  [{name:  'karan'},{name:  'rahul'},{name:  'sameer'}]          }   </script>   </body>   </html>   http://plnkr.co/edit/1txkaBnZhy5vZuTU6W4S?p=preview
  53. 53. AngularJS:  Adding  func*ons  to  controllers   <div  ng-­‐controller="FriendsCtrl”>          <ul>                  <li  ng-­‐repeat="friend  in  friends">                          <a  ng-­‐click=hello(friend.name)>{{friend.name}}</a>                  </li>        </ul></div>   <script  src="hEp://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>   <script>          func+on  FriendsCtrl($scope)  {                  $scope.friends  =  [{name:  'karan'},{name:  'rahul'},{name:  'sameer'}]                  $scope.hello  =  func+on(name){                          alert("Hello,  "+name)                  }          }   </script>   http://plnkr.co/edit/hjGbzeo3QNBeWpVE7H03?p=preview
  54. 54. Demo  :  Code  walkthrough  Angular  frontend   $  git  checkout  remotes/origin/frontend   •  Controllers  
  55. 55. Deploy  to  OpenShi9         $  git  push  
  56. 56. QUESTIONS?
  57. 57. DONE!

×