Your SlideShare is downloading. ×

Developing Modern Java Web Applications with Java EE 7 and AngularJS

9,921

Published on

Developing Modern Java Web Applications with Java EE 7 and AngularJS

Developing Modern Java Web Applications with Java EE 7 and AngularJS

Published in: Technology
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,921
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
211
Comments
0
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. OPENSHIFT Workshop PRESENTED BY Shekhar Gulati Developing Modern Java Web Applications with Java EE 7 and AngularJS
  • 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/
  • 4. CODE DU JOUR https://github.com/shekhargulati/hackerpins- drdobbsindia-conference
  • 5. Modern  Web  Applica*on  
  • 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
  • 15. LETS  LOOK  AT  FEW  JAVA  EE  7  SPECS  
  • 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. 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. 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.  
  • 38. OpenShift OPENSHIFT  OVERVIEW  
  • 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?
  • 41. OUR STACK
  • 42. origin Public Cloud Service On- premise or Private Cloud Software Open Source Project FLAVORS OF OPENSHIFT
  • 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  
  • 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. Demo  :  Code  walkthrough  REST  backend   $  git  checkout  remotes/origin/backend   •  JAX-­‐RS  resources   •  Async  JAX-­‐RS   •  JPA  layer   •  CDI  usage   •  Bean  valida+on  
  • 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.  
  • 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. 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. 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. Demo  :  Code  walkthrough  Angular  frontend   $  git  checkout  remotes/origin/frontend   •  Controllers  
  • 55. Deploy  to  OpenShi9         $  git  push  
  • 56. QUESTIONS?
  • 57. DONE!

×