IppEvent «HTML5, Spring, NoSQL et mobilité» - 1Nouveau look pour une    nouvelle vie HTML5+Spring+NoSQL+Mobile         Jul...
Formation Spring - 2                             Objectif :           réaliser une application Java moderne, sans         ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 3                                    Speaker• Développeur Java depuis 13 ans...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 4  Nous allons nous baser sur Tatami, uneapplication HTML5+Spring+NoSQL+Mobile
IppEvent «HTML5, Spring, NoSQL et mobilité» - 5
IppEvent «HTML5, Spring, NoSQL et mobilité» - 6              Technologies utilisées dans Tatami• HTML5 :    Twitter Bootst...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 7L’ensemble du code est disponible sur      GitHubhttps://github.com/ipponte...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 8    L 5             g         Q L                  le T M         r   in   ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 9Que propose HTML5 ?            Attention : cette         conférence est ori...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 10       1. De nouveaux types de champs (1/2) 1: <input id="emailInput" 2:  ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 11       1. De nouveaux types de champs (2/2)• Ces champs sont ensuite  auto...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 12                       2. Le SVG• Permet de faire du dessin vectoriel• Sup...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 13
IppEvent «HTML5, Spring, NoSQL et mobilité» - 14                    3. CSS 3                          een 2D e t en 3D    ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 15                   4. Les WebSockets      Trop jeune pour être utilisé    ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 16                  5. Le «storage»• Web Storage : simples paires clef/valeu...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 176. Pour les amateurs de jeux vidéos         • 3D avec WebGL         • Canv...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 18       Nous devons sauter un trou technologique• Le HTML5 reste très jeune...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 19  Le fait davoir intégré toutes ces nouveautés résulte dans des sitesplus ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 20Quelques outils pour réussir     votre application       • jQuery       • ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 21    L 5             g         Q L                  le T M         r   in  ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 22Fini le MVC et le Struts        «à papa» Une application = une page HTML  ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 23  Comment coder uneapplication REST/JSON ?     En Java EE avec l’API JAX-R...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 24                    Pourquoi choisir Spring ?• Performances : éprouvé depu...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 25Codons la partie REST...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 26                         Exemple 1 : GET sur une entité             {     ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 27                             Exemple 2 : GET sur une collection           ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 28                          Exemple 3 : POST sur une entité                {...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 29                  Quel résultat ?• Séparation du travail entre le designer...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 30    L 5             g         Q L                  le T M         r   in  ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 31Comment tenir la charge au  niveau de la couche de       persistance ?
IppEvent «HTML5, Spring, NoSQL et mobilité» - 32           Nouvelle abstraction «cache» de                      Spring 3.1...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 33                Le NoSQL avec Cassandra• Cassandra : une base de données o...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 34                 Exemple de code Cassandra/Hector 1:   public void createU...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 35                     Cassandra + le cache ?•   Combiner les deux solutions...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 36Les problèmes causés par le          NoSQL       • Non consistance des    ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 37         La recherche avec Elastic Search• Un des problèmes de Cassandra :...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 38               Nous avons donc nos données à 3                           n...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 39Testons la montée en chargeUn test imparfait...     • Avec JMeter sur la m...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 40    L 5             g         Q L                          li té T M      ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 41            Pourquoi faire une application                 mobile spécifiqu...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 42Comment faire une application         mobile ?             Aucun problème ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 43           Utilisation de Spring Mobile avec          Spring MVC pour choi...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 44             Il suffit de faire une vue spécialisée qui                 uti...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 45                  jQuery Mobile• Version de jQuery spécifique pour smartpho...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 46Exemples d’écrans iPad et iPhone
IppEvent «HTML5, Spring, NoSQL et mobilité» - 47   En conclusion...Linterface graphiqueLa mobilitéLes performancesLa produ...
IppEvent «HTML5, Spring, NoSQL et mobilité» - 48           Merci !   Tatami est disponible sur           GitHub :https://g...
Prochain SlideShare
Chargement dans…5
×

Nouveau look pour une nouvelle vie, version spéciale Ippon

1 569 vues

Publié le

Support de ma présentation lors de l'Ippevent HTML5, Spring, NoSQL et mobilité le 28 Juin. CF. http://blog.ippon.fr/2012/06/14/ippevent-html5-spring-nosql-et-mobilite-le-28-juin/

Publié dans : Technologie
1 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 569
Sur SlideShare
0
Issues des intégrations
0
Intégrations
44
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Nouveau look pour une nouvelle vie, version spéciale Ippon

  1. 1. IppEvent «HTML5, Spring, NoSQL et mobilité» - 1Nouveau look pour une nouvelle vie HTML5+Spring+NoSQL+Mobile Julien Dubois @juliendubois
  2. 2. Formation Spring - 2 Objectif : réaliser une application Java moderne, sans (trop) céder à la mode Pas de frameworkinconnu ou propriétaire Des technologiesstandards ou largementrépandues Pas de langage alternatif quepersonne ne comprend Du code simple et performant Le XML, ce n’est pas sale
  3. 3. IppEvent «HTML5, Spring, NoSQL et mobilité» - 3 Speaker• Développeur Java depuis 13 ans • A commencé avec les EJB 1.0 • Code toujours chez les clients• Connait bien Spring Julien Dubois • Co-auteur de «Spring par Directeur du Conseil et du Développement la pratique» Ippon Technologies http://www.ippon.fr • Ancien directeur de SpringSource France• Directeur du pôle conseil chez Ippon Technologies Suivez-moi sur Twitter : @juliendubois
  4. 4. IppEvent «HTML5, Spring, NoSQL et mobilité» - 4 Nous allons nous baser sur Tatami, uneapplication HTML5+Spring+NoSQL+Mobile
  5. 5. IppEvent «HTML5, Spring, NoSQL et mobilité» - 5
  6. 6. IppEvent «HTML5, Spring, NoSQL et mobilité» - 6 Technologies utilisées dans Tatami• HTML5 : Twitter Bootstrap, Less, jQuery• Spring 3.1: Spring MVC Rest, configuration Java, Spring Mobile• NoSQL : Cassandra, Hector, Elastic Search• Mobilité : JQuery Mobile
  7. 7. IppEvent «HTML5, Spring, NoSQL et mobilité» - 7L’ensemble du code est disponible sur GitHubhttps://github.com/ippontech/tatami
  8. 8. IppEvent «HTML5, Spring, NoSQL et mobilité» - 8 L 5 g Q L le T M r in oS b iH S p N Mo
  9. 9. IppEvent «HTML5, Spring, NoSQL et mobilité» - 9Que propose HTML5 ? Attention : cette conférence est orientée «entreprise», pas «jeu vidéo»
  10. 10. IppEvent «HTML5, Spring, NoSQL et mobilité» - 10 1. De nouveaux types de champs (1/2) 1: <input id="emailInput" 2: name="email" 3: type="email" 4: required="required" 5: placeholder="Enter e-mail..."/> 6: 7: <input id="quantityInput" 8: name="quantity" 9: type="number"10: min="1"11: max="5" />
  11. 11. IppEvent «HTML5, Spring, NoSQL et mobilité» - 11 1. De nouveaux types de champs (2/2)• Ces champs sont ensuite automatiquement validés par le navigateur• Sur mobile/tablette, le clavier correspondant au champ est activé• Attention, le support est inégal en fonction des navigateurs
  12. 12. IppEvent «HTML5, Spring, NoSQL et mobilité» - 12 2. Le SVG• Permet de faire du dessin vectoriel• Supporte les événements JavaScript !!!• Ne fonctionne pas sous IE (utilisation de VML)• Nombreuses libraires (raphael.js, Google Chart Tools, HighCharts...)
  13. 13. IppEvent «HTML5, Spring, NoSQL et mobilité» - 13
  14. 14. IppEvent «HTML5, Spring, NoSQL et mobilité» - 14 3. CSS 3 een 2D e t en 3D tions de text• Tran sforma• Transitions et animations• Web Fonts• Bords arrondis, ombres, opacité ...
  15. 15. IppEvent «HTML5, Spring, NoSQL et mobilité» - 15 4. Les WebSockets Trop jeune pour être utilisé concrètement :• Support inégal des navigateurs,• Support récent et non standard des serveurs d’applications• Mauvais support des proxys• Compliqué à débugger• Contesté au sein même de l’IETF...
  16. 16. IppEvent «HTML5, Spring, NoSQL et mobilité» - 16 5. Le «storage»• Web Storage : simples paires clef/valeur, fonctionne à peu près partout• Indexed Database : ajoute des index, ressemble à du NoSQL• Web SQL Database : vraie base de données, non supportée par Firefox et IE, en «pause» au W3C
  17. 17. IppEvent «HTML5, Spring, NoSQL et mobilité» - 176. Pour les amateurs de jeux vidéos • 3D avec WebGL • Canvas • Audio et vidéo
  18. 18. IppEvent «HTML5, Spring, NoSQL et mobilité» - 18 Nous devons sauter un trou technologique• Le HTML5 reste très jeune : nombreux bugs et incompatibilités entre navigateurs• Coder le HTML/CSS/JavaScript à la main est de plus en plus compliqué• 2 à 3 ans pour que HTML5 mûrisse
  19. 19. IppEvent «HTML5, Spring, NoSQL et mobilité» - 19 Le fait davoir intégré toutes ces nouveautés résulte dans des sitesplus performants côté client et plus agréables visuellement (moins de hacks pour réaliser le même rendu graphique)
  20. 20. IppEvent «HTML5, Spring, NoSQL et mobilité» - 20Quelques outils pour réussir votre application • jQuery • Twitter Bootstrap • LESS CSS • Mustache.js
  21. 21. IppEvent «HTML5, Spring, NoSQL et mobilité» - 21 L 5 g Q L le T M r in oS b iH S p N Mo
  22. 22. IppEvent «HTML5, Spring, NoSQL et mobilité» - 22Fini le MVC et le Struts «à papa» Une application = une page HTML qui fait des appels REST/JSON
  23. 23. IppEvent «HTML5, Spring, NoSQL et mobilité» - 23 Comment coder uneapplication REST/JSON ? En Java EE avec l’API JAX-RS Standard, plusieurs implémentations : Jersey ou CXF En Spring MVC REST + Jackson Simple à intégrer et à utiliser avec Spring MVC
  24. 24. IppEvent «HTML5, Spring, NoSQL et mobilité» - 24 Pourquoi choisir Spring ?• Performances : éprouvé depuis longtemps (singleton), plus rapide que Java EE• Léger : 15 à 30 Mo de RAM• Support de nombreuses bases NoSQL• Cycle de développement rapide : Jetty + Hotspot• Les abstractions et sous-projets : MVC, cache, sécurité, mobile, social...• Simple et peu cher à héberger (8 Euros/mois)
  25. 25. IppEvent «HTML5, Spring, NoSQL et mobilité» - 25Codons la partie REST...
  26. 26. IppEvent «HTML5, Spring, NoSQL et mobilité» - 26 Exemple 1 : GET sur une entité { 1: 1: $.ajax({ 2: type: "GET", 3: url: "rest/users/" + login + "/",JavaScript 4: dataType: "json", 5: success: function(data) { 6: userPicture.attr(src, 7: http://www.gravatar.com/avatar/ + 8: data.gravatar + ?s=64); 9: //... 10: userTab.tab(SHOW_EFFECT); 11: } 12: }); { 1: @RequestMapping(value = "/rest/users/{login}", 2: method = RequestMethod.GET,Java 3: produces = "application/json") 4: @ResponseBody 5: public User getUser(@PathVariable("login") String login) { 6: return userService.getUserProfileByLogin(login); 7: }
  27. 27. IppEvent «HTML5, Spring, NoSQL et mobilité» - 27 Exemple 2 : GET sur une collection { 1: $.ajax({ 2: type: "GET",JavaScript 3: url: "rest/users/" + login + "/tweets", 4: dataType: "json", 5: success: function(data) { 6: makeTweetsList(data); 7: mainTab.tab(SHOW_EFFECT); 8: } 9: }); { 1: @RequestMapping(value = "/rest/users/{login}/tweets", 2: method = RequestMethod.GET, 3: produces = "application/json") 4: @ResponseBodyJava 5: public Collection<Tweet> listTweets( 6: @PathVariable("login") String login) { 7: 8: return timelineService.getUserline(login, 20); 9: }
  28. 28. IppEvent «HTML5, Spring, NoSQL et mobilité» - 28 Exemple 3 : POST sur une entité { 1: 1: $.ajax({ 2: type: POST, 3: url: "rest/users/" + login, JavaScript 4: contentType: "application/json", 5: data: JSON.stringify($("#updateUserForm") 6: .serializeObject()), 7: 8: dataType: "json", 9: success: function() { 10: $(#defaultTab).tab(show); 11: } 12: }); { 1: @RequestMapping(value = "/rest/users/{login}", 2: method = RequestMethod.POST, 3: consumes = "application/json") 4: @ResponseBodyJava 5: public void updateUser( 6: @PathVariable("login") String login, 7: @RequestBody User user) { 8: user.setLogin(login); 9: userService.updateUser(user); 10: }
  29. 29. IppEvent «HTML5, Spring, NoSQL et mobilité» - 29 Quel résultat ?• Séparation du travail entre le designer et le développer• Notre back-end va avoir un très grand nombre de requêtes REST...
  30. 30. IppEvent «HTML5, Spring, NoSQL et mobilité» - 30 L 5 g Q L le T M r in oS b iH S p N Mo
  31. 31. IppEvent «HTML5, Spring, NoSQL et mobilité» - 31Comment tenir la charge au niveau de la couche de persistance ?
  32. 32. IppEvent «HTML5, Spring, NoSQL et mobilité» - 32 Nouvelle abstraction «cache» de Spring 3.1 1: @Cacheable("tweet-cache") 2: public Tweet findTweetById(String tweetId) { 3: return em.find(Tweet.class, tweetId); 4: } 5: 6: @CacheEvict(value="tweet-cache", 7: key="#tweet.tweetId") 8: public void removeTweet(Tweet tweet) { 9: tweet.setRemoved(true);10: em.persist(tweet);11: }
  33. 33. IppEvent «HTML5, Spring, NoSQL et mobilité» - 33 Le NoSQL avec Cassandra• Cassandra : une base de données orientée colonne, très performante en lecture/écriture• Pas de Single Point of Failure• Montée en charge «élastique» sans effort• Possibilité d’utiliser JPA (avec des limites)• Mais pas de foreign keys, de transactions ou de sessions !
  34. 34. IppEvent «HTML5, Spring, NoSQL et mobilité» - 34 Exemple de code Cassandra/Hector 1: public void createUser(User user){ 2: em.persist(user); 3: } 4: 5: public Collection<String> getTimeline(String login, int size) { 6: ColumnSlice<String, String> result = 7: createSliceQuery(keyspaceOperator, 8: StringSerializer.get(), StringSerializer.get(), 9: StringSerializer.get())10: .setColumnFamily(TIMELINE_CF)11: .setKey(login)12: .setRange(null, null, true, size)13: .execute()14: .get();15:16: Collection<String> tweetIds = new ArrayList<String>();17: for (HColumn<String, String> column :18: result.getColumns()) {19:20: tweetIds.add(column.getValue());21: }22: return tweetIds;23: }
  35. 35. IppEvent «HTML5, Spring, NoSQL et mobilité» - 35 Cassandra + le cache ?• Combiner les deux solutions précédentes est-il la solution ultime ?• Cassandra propose son propre système de cache interne : très performant et automatiquement distribué• Dans certains cas, l’utilisation d’un cache mémoire local en plus est intéressant : pas d’accès distant, plus de maîtrise• Sur Tatami nous avons un gain de performance d’environ 20%
  36. 36. IppEvent «HTML5, Spring, NoSQL et mobilité» - 36Les problèmes causés par le NoSQL • Non consistance des données • Pas de transaction • Problèmes de réplication de cache • Retour de la couche «DAO»
  37. 37. IppEvent «HTML5, Spring, NoSQL et mobilité» - 37 La recherche avec Elastic Search• Un des problèmes de Cassandra : pas de recherche plein texte (dans la version Open Source)• Problème récurrent en bases de données SQL également : les «like» sont très lents • Elastic Search • Basé sur Lucene • Architecture distribuée
  38. 38. IppEvent «HTML5, Spring, NoSQL et mobilité» - 38 Nous avons donc nos données à 3 niveaux Ehcache Application Java CassandraJetty+Spring Hector RE ST /JS O N Elastic Search
  39. 39. IppEvent «HTML5, Spring, NoSQL et mobilité» - 39Testons la montée en chargeUn test imparfait... • Avec JMeter sur la même machine que Jetty et Cassandra • Avec un disque dur 5400 rpm cryptéUn très bon résultat... • 1000 utilisateurs concurrents : 750 requêtes/sec • Faible utilisation mémoire • 50 à 100 Mo en fonction des GC • Grossit à cause du cache
  40. 40. IppEvent «HTML5, Spring, NoSQL et mobilité» - 40 L 5 g Q L li té T M r in oS b iH S p N Mo
  41. 41. IppEvent «HTML5, Spring, NoSQL et mobilité» - 41 Pourquoi faire une application mobile spécifique ? «Good mobile user experience requires a different design than whats needed to satisfy desktop users. Two designs, two sites, andcross-linking to make it all work.» -- Jakob Nielsen http://www.useit.com/ alertbox/mobile-vs-full- sites.html
  42. 42. IppEvent «HTML5, Spring, NoSQL et mobilité» - 42Comment faire une application mobile ? Aucun problème grâce à Spring MVC et à notre architecture REST !
  43. 43. IppEvent «HTML5, Spring, NoSQL et mobilité» - 43 Utilisation de Spring Mobile avec Spring MVC pour choisir quelle vue renvoyer Vue «standard»Requête HTTP DispatcherServlet Spring MVC Vue «mobile» DeviceResolver Spring Mobile
  44. 44. IppEvent «HTML5, Spring, NoSQL et mobilité» - 44 Il suffit de faire une vue spécialisée qui utilise les mêmes services REST Req RES uête Vue T/JS s ON«standard» Spring MVC REST Cassandra + Jackson Vue«mobile» uê Ntes R eq O ST /JS RE
  45. 45. IppEvent «HTML5, Spring, NoSQL et mobilité» - 45 jQuery Mobile• Version de jQuery spécifique pour smartphones et tablettes• HTML5, cross-platform• jQuery UI et ThemeRoller• Intégration PhoneGap / Apache Cordova
  46. 46. IppEvent «HTML5, Spring, NoSQL et mobilité» - 46Exemples d’écrans iPad et iPhone
  47. 47. IppEvent «HTML5, Spring, NoSQL et mobilité» - 47 En conclusion...Linterface graphiqueLa mobilitéLes performancesLa productivité
  48. 48. IppEvent «HTML5, Spring, NoSQL et mobilité» - 48 Merci ! Tatami est disponible sur GitHub :https://github.com/ippontech/tatami

×