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.

Angular beans

AngularBeans framework presentation

http://bessemhmidi.github.io/AngularBeans

Angular beans

  1. 1. If AngularJS is what should have been HTML, if CDI is what should have been JavaEE, AngularBeans is what should be JSF!
  2. 2. Agenda • “web applications”, new needs (frameworks view) • AngularBeans • Q&A
  3. 3. “web applications”, new needs
  4. 4. Single page web application (SPA) & Thin server concept Real-time & fall back Json & JsonRPC
  5. 5. Client Server Initial Req GET,POST… Classic approach HTML Rendrering Page reloading Sometes req resource (via ajax ) Service Backend HTML Generation UI logic MVC Validations… Sessions care
  6. 6. Client Server Initial Req GET,POST… SPA approach HTML Rendrering Page reloading HTML Rendrering Data updates UI logic Validation Session data Simulated naviguation (via #) Thin Server Backend Rest JsonRPC Wsocket Comet ……
  7. 7. RT –WebAPP : WebSockets
  8. 8. SocketIO /SockJS: • Abstracts WebSocket communications to automatically fall back to flash streaming or long-polling when necessary (on either server or client) • Adds features like heartbeats, timeouts, and disconnection support not provided in WebSocket API
  9. 9. JSON/JSON RPC { { "is": ["compact", "readable"] "web_service": "JS native object" "enough" : "for majority of needs" } }
  10. 10. REST (Representational State Transfer) Restfull HTTP / Restfull Architectures HTTP Methods (GET/POST/DELETE…) as CRUD BookMarking  Stateless By Design  scalability+
  11. 11. JSF
  12. 12. JSF /But Life cycle -> good extentions points but give us a more complex and errors-prone framework Scalability (-) HTML5 (-) even with passthrow. Facelets -> xhtml Server Side validation(-) bookMarking (-) Server Side UI-Logic (-) Performances 
  13. 13. JS framework MVC/MVVM/MV* 2 Ways DataBinding Modules Services Controllers Events
  14. 14. What we need ? Single framework that care about: SPA & Thin Server concepts Pure HTML5 support (not a sever side generated HTML5)  we can use tools as bower, grunt, yeoman generators… Real Time support + fall back when needed “clear and cleans” url’s
  15. 15. JavaEE7 (+)
  16. 16. AngularBeans AngularJS  JavaEE (CDI) Backend Json RPC Bean Validation URL Based File Upload CDI Bean  Angular Services CDI EventsAngular Event Real Time @RealTime & Broadcasting System ModelQuery (server->client) SockJs auto detection and Native support!
  17. 17. AngularBeans : Requirements JDK 7 (or+) JavaEE7 (or+) Web profile or full profile AS. AngularJS lib -------------------- First production-ready release: 1.0.1  sept 2015
  18. 18. AngularBeans: principle @AngularBean 1 @AngularBean 2 NG Service 1 NG Service 2 NG ctrl NG ctrl NG ctrl @ Other CDI Bean « Singleton » « Singleton » Dependency injectionDependency injection
  19. 19. AngularBeans CDI scopes : @RequestScoped @ApplicationScoped @NGSesionScoped : classic @SessionScoped is bound only to the classic HTTP session or the websocket session but only one will be active  we cannot open a conversation with the same CDI bean that include a http Get request and after that a websocket call for example. But with @NGSessionScoped  shared context between websocket calls and classic http methods calls. we can have many websockets sessions (if many browser tabs open for example ) + 1 http session  all grouped in a single NG Session)
  20. 20. AngularBeans : HTML head & fallback feature Angulars beans will auto detect that and will use a sockJS server end point to exploit sockJS features/ else it will use a JSR356 raw Websocket for real time interactions (no fall back feature then) angular-beans.js will be generated dynamically
  21. 21. AngularBeans : my first bean (style 1) @AngularBean @RequestScoped public class CalcBean { private int a, b; private int result; @NGModel public int getA() { return a; } @NGModel public int getB() { return b; } @NGModel public int getResult() { return result; } @GET @NGSubmit(backEndModels = { "a", "b" }) @NGReturn(model = "result") public int add() { result = a + b; return result; } public void setA(int a) { this.a = a; } public void setB(int b) { this.b = b; } } Get method (can be @Post, @Put, @Delete or @RealTime If any: dfault->: @Get Array of the server side models to be synchronused with the js proxy state, if «*» all properties marqued @Model will be updated (before method call ofc) Front ent Model to be synchronied with the return of the method Additional attribute -> ,updates=« » : array of other front end models to be updated too
  22. 22. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="bower_components/angularjs/angular.js"></script> <script type="text/javascript" src="angular-beans.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp", [ "angularBeans" ]); myApp.controller('calcCtrl', function($scope, calcBean) { $scope.clacBean = calcBean; }); </script> </head> AngularBeans : my first bean (style 1) :HTML module generated by AngularBeans CalcBean is now an injectable service
  23. 23. <body ng-app="myApp"> <div ng-controller="calcCtrl"> <label>a:</label> <input type="text" ng-model="clacBean.a"> <label>b:</label> <input type="text" ng-model="clacBean.b"> <button ng-click="clacBean.add()">send</button> <br /> <h2>Result: {{clacBean.result}}</h2> </div> </body> </html> AngularBeans : my first bean (style 1) :HTML Diect bean call
  24. 24. AngularBeans : my first bean (style 1) : result
  25. 25. @AngularBean @RequestScoped public class CalcBean { @GET public int add(int a, int b){ return a + b; } } AngularBeans : my first bean (style 2) Args passed via RPC style (can be primitves, objects, arrays or var args)
  26. 26. AngularBeans : my first bean (style 2) :HTML <script type="text/javascript"> var myApp = angular.module("myApp", [ "angularBeans" ]); myApp.controller('calcCtrl', function($scope, calcBean) { $scope.add = function(a,b) { calcBean.add(a,b).then(function(data){ $scope.result=data; } ); } }); </script>
  27. 27. AngularBeans : my first bean (style 2) :HTML <body ng-app="myApp"> <div ng-controller="calcCtrl"> <label>a:</label> <input type="text" ng-model="a"> <label>b:</label> <input type="text" ng-model="b"> <button ng-click="add(a,b)">send</button> <br /> <h2>Result: {{result}}</h2> </div> </body>
  28. 28. AngularBeans : my first bean (with binding) :HTML <script type="text/javascript"> var myApp = angular.module("myApp", [ "angularBeans" ]); myApp.controller('calcCtrl', function($scope, calcBean) { angularBeans.bind($scope,calcBean,["result"]); }); </script> Scope will be auto synchronized with the bean proxy (the service) state, this function take as argument an array of the properties to be bound, in this case « result » is the main return so we must add @NGReturn(model="result") on the add() method of the bean
  29. 29. AngularBeans : my first bean (adding log) import angularBeans.log.NGLogger; import angularBeans.log.NGLogger.Level; @AngularBean @RequestScoped public class CalcBean { @Inject NGLogger logger; @GET @NGReturn(model = "result") public int add(int a, int b) { logger.log(Level.WARN, "a=%s , b=%s , a+b= %s", a, b, a + b); return a + b; } }
  30. 30. AngularBeans : my first bean (adding log)
  31. 31. AngularBeans : my first bean (@NGPostconstruct) @Inject NGLogger logger; @NGPostConstruct public void init(){ logger.log (Level.INFO, "this method will be called at the service creation"); }
  32. 32. AngularBeans : my first bean (ModelQuey) package org.angularbeans.example; public class Message { private String summary; private String detail; public Message(String summary, String detail) { super(); this.summary = summary; this.detail = detail; } }
  33. 33. AngularBeans : my first bean (ModelQuey) @AngularBean @RequestScoped public class CalcBean { @Inject NGLogger logger; @Inject ModelQuery modelQuery; @NGPostConstruct public void init() { logger.log(Level.INFO, "this method will be called at the service creation"); } @GET @NGReturn(model = "result") public int add(int a, int b) { logger.log(Level.WARN, "a=%s , b=%s , a+b= %s", a, b, a + b); modelQuery.pushTo("messages", new Message("attention", "calculation...")).setProperty("ti me", new Date()); ; return a + b; } }
  34. 34. AngularBeans : my first bean (ModelQuey) :HTML myApp.controller('calcCtrl', function($scope, calcBean) { angularBeans.bind($scope,calcBean,["result","messages","time"]) ; }); <h2>Result: {{result}}</h2> <ul ng-repeat="m in messages"> <li>{{m.summary}} - {{m.detail}}</li> </ul> {{time}}
  35. 35. AngularBeans : my first bean (ModelQuey) ModelQuery’s are simply a query’s from back end to front end to update their models
  36. 36. AngularBeans : my first bean real time & events @Inject RealTimeClient client; @RealTime public void notifyOthers(){ RealTimeMessage rtMessage=new RealTimeMessage().set("notification", "someData"); client.broadcast("calculationEvent",rtMessage, false); } This method will be called via websocket (or fall back strategy) Broadcast the message to all connected sessions (can also broadcast a QueryModel) If false the sender will also receive the event
  37. 37. myApp.controller('calcCtrl', function($scope, calcBean) { angularBeans.bind($scope,calcBean,["result","messages" ,"time"]); $scope.$on("calculationEvent",function(event,data){ alert(data.notification); }); }); AngularBeans : my first bean real time & events
  38. 38. AngularBeans : others examples Form validation : https://gist.github.com/bessemHmidi/408438a2eae5 24f0348f Files upload & LobWrapper (binary data like images): https://gist.github.com/bessemHmidi/5d13d6216923 6bc17a32
  39. 39. http://bessemhmidi.github.io/AngularBeans/
  40. 40. THANK YOU!

    Be the first to comment

    Login to see the comments

  • hmidibessem

    Jun. 21, 2015
  • kboussebat

    Jun. 21, 2015
  • houssem110901

    Jun. 22, 2015
  • marwenkhefifi9

    Jun. 22, 2015
  • dorramansouri54

    Jun. 22, 2015
  • benhassinehoussem

    Jun. 23, 2015
  • ZaibiMohammed

    Jun. 24, 2015
  • moncefsalgado

    Jul. 11, 2015
  • ahmontassarbehi

    Oct. 11, 2015
  • daboussiibrahim1

    Oct. 13, 2015
  • NabilLaribi

    Oct. 15, 2015
  • AnisBouhachemDjer

    Oct. 31, 2015
  • NasriNidhal

    Nov. 26, 2015
  • EnriqueGarciaRosales

    Feb. 10, 2016

AngularBeans framework presentation http://bessemhmidi.github.io/AngularBeans

Views

Total views

4,882

On Slideshare

0

From embeds

0

Number of embeds

194

Actions

Downloads

60

Shares

0

Comments

0

Likes

14

×