JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 1        HTML5          +        Spring          +        NoSQL   ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 2                    Objectif :          réaliser une application ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 3                                    Speaker• Développeur Java dep...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 4  Nous allons nous baser sur Tatami, uneapplication HTML5+Spring+...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 5
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 6
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 7Technologies utilisées dans Tatami• HTML5 :  Twitter Bootstrap, B...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 8L’ensemble du code est disponible sur      GitHubhttps://github.c...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» -Partie I : le HTML5
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 10Que propose HTML5 ?                  Attention : cette          ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 11       1. De nouveaux types de champs (1/2) 1: <input id="emailI...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 12       1. De nouveaux types de champs (2/2)• Ces champs sont ens...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 13                       2. Le SVG• Permet de faire du dessin vect...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 14
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 15                    3. CSS 3                               een 2...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 16                   4. Les WebSockets      Trop jeune pour être u...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 17                  5. Le «storage»• Web Storage : simples paires ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 186. Pour les amateurs de jeux vidéos         • 3D avec WebGL     ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 19       Nous devons sauter un trou technologique• Le HTML5 reste ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 20Quelques outils pour réussir     votre application   • jQuery   ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 21Twitter Bootstrap • Framework CSS/JavaScript • Open Source, déve...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 22                        Backbone.js• Framework MVC JavaScript• O...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 23Partie II : Spring
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 24Fini le MVC et le Struts        «à papa» Une application = une p...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 25  Comment coder uneapplication REST/JSON ?     En Java EE avec l...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 26                    Pourquoi choisir Spring ?• Performances : ép...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 27Codons la partie REST...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 28                         Exemple 1 : Affichage d’un utilisateur  ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 29                            Exemple 2 : Mise à jour du status   ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 30                  Quel résultat ?• Séparation du travail entre l...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» -Partie III : NoSQL
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 32Comment tenir la charge au  niveau de la couche de       persist...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 33           Nouvelle abstraction «cache» de                      ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 34                Le NoSQL avec Cassandra• Cassandra : une base de...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 35                 Exemple de code Cassandra/Hector 1:   public vo...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 36Les problèmes causés par       Cassandra     • Complexe à héberg...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 37                     Cassandra + le cache ?•   Combiner les deux...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 38                  Le moteur de recherche•   Un des problèmes de ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 39               ElasticSearch vs Lucene• ElasticSearch           ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 40           Abstraction «async» de Spring                    avec...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 41Partie IV : Mobilité
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 42• LA question à se poser : une  application spécifique ou du  «re...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 43            Pourquoi faire une application                 mobil...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 44           Utilisation de Spring Mobile avec          Spring MVC...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 45             Il suffit de faire une vue spécialisée qui          ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 46                     jQuery Mobile•   Version de jQuery spécifiqu...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 47 Problèmes rencontrés• L’application mobile est toujours en  ret...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 48           Pourquoi faire du         «responsive design» ?• Une ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 49                 Le résultat• Etonnamment simple à réaliser avec...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 50               Problèmes rencontrés• Pas de support «natif», par...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 51          En conclusion...• HTML5 : capacités impressionnantes, ...
JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 52           Merci !   Tatami est hébergé sur :      https://tatam...
Upcoming SlideShare
Loading in...5
×

HTML5, Spring, NoSQL et mobilité

3,941

Published on

Slides de ma conférence "HTML5, Spring, NoSQL et mobilité" réalisée au JUGSummerCamp le 14/09/2012

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

No Downloads
Views
Total Views
3,941
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5, Spring, NoSQL et mobilité

  1. 1. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 1 HTML5 + Spring + NoSQL + MobilitéJulien Dubois@juliendubois
  2. 2. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 2 Objectif : réaliser une application Java moderne, sans (trop) céder à la mode Pas de framework inconnu oupropriétaire Des technologies standards oulargement répandues Pas de langage alternatif quepersonne ne comprend Du code simple et performant Le XML, ce n’est pas sale
  3. 3. JugSummerCamp 2012 «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. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 4 Nous allons nous baser sur Tatami, uneapplication HTML5+Spring+NoSQL+Mobile
  5. 5. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 5
  6. 6. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 6
  7. 7. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 7Technologies utilisées dans Tatami• HTML5 : Twitter Bootstrap, Backbone.JS, jQuery• Spring 3.1: Spring MVC Rest, configuration Java• NoSQL : Cassandra, Hector, Elastic Search• Mobilité : rien :-)
  8. 8. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 8L’ensemble du code est disponible sur GitHubhttps://github.com/ippontech/tatami
  9. 9. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» -Partie I : le HTML5
  10. 10. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 10Que propose HTML5 ? Attention : cette conférence est orientée «entreprise», pas «jeu vidéo»
  11. 11. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 11 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" />
  12. 12. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 12 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
  13. 13. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 13 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...)
  14. 14. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 14
  15. 15. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 15 3. CSS 3 een 2D e t en 3D tions de text• Tran sforma• Transitions et animations• Web Fonts• Bords arrondis, ombres, opacité ...
  16. 16. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 16 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...
  17. 17. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 17 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
  18. 18. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 186. Pour les amateurs de jeux vidéos • 3D avec WebGL • Canvas • Audio et vidéo
  19. 19. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 19 Nous devons sauter un trou technologique• Le HTML5 reste 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
  20. 20. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 20Quelques outils pour réussir votre application • jQuery • Twitter Bootstrap • Backbone.js • Underscore.js • LESS CSS • Mustache.js
  21. 21. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 21Twitter Bootstrap • Framework CSS/JavaScript • Open Source, développé par Twitter • Fourni des grilles de présentation, des composants, des plugins JavaScript • Permet de faire du «responsive design»
  22. 22. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 22 Backbone.js• Framework MVC JavaScript• Open Source, développé par DocumentCloud• Modèles avec des paires clef/valeur, collections évoluées• Se connecte facilement à un back-end REST• Nécessite l’utilisateur d’un moteur de template pour rendre les vues (underscore.js)
  23. 23. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 23Partie II : Spring
  24. 24. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 24Fini le MVC et le Struts «à papa» Une application = une page HTML qui fait des appels REST/JSON
  25. 25. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 25 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
  26. 26. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 26 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)
  27. 27. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 27Codons la partie REST...
  28. 28. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 28 Exemple 1 : Affichage d’un utilisateur { 1: app.Model.ProfileModel = Backbone.Model.extend({ 2: defaults: { 3: firstName: , 4: lastName: JavaScript 5: }, 6: url : function(){ 7: return /rest/users/show?screen_name= + username; 8: } 9: }); 10: var profileView = new app.View.ProfileView({ 11: model:new app.Model.ProfileModel() 12: }); 13: $(#profileContent).html(profileView.render()); { 1: @RequestMapping(value = "/rest/users/show", 2: method = RequestMethod.GET, 3: produces = "application/json")Java 4: @ResponseBody 5: public User getUser( 6: @RequestParam("screen_name") String username) { 7: return userService.getUserProfileByUsername(username); 8: }
  29. 29. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 29 Exemple 2 : Mise à jour du status { 1: app.Model.StatusUpdateModel = Backbone.Model.extend({ 2: url : /tatami/rest/statuses/update 3: });JavaScript 4: 5: var status = new app.Model.StatusUpdateModel(); 6: 7: status.set("content", ${"#statusContent"}); 8: 9: status.save(null,{ 10: success: function(model, response) { 11: app.trigger(refreshTimeline); 12: }, 13: }); { 1: @RequestMapping(value = "/rest/statuses/update", 2: method = RequestMethod.POST)Java 3: public void postStatus(@RequestBody Status status) { 4: statusUpdateService.postStatus(status); 5: }
  30. 30. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 30 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...
  31. 31. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» -Partie III : NoSQL
  32. 32. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 32Comment tenir la charge au niveau de la couche de persistance ?
  33. 33. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 33 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: }
  34. 34. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 34 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 de grosses limites)• Mais pas de foreign keys, de transactions ou de sessions !
  35. 35. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 35 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: }
  36. 36. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 36Les problèmes causés par Cassandra • Complexe à héberger • Non consistance des données • Pas de transaction • Retour de la couche «DAO»
  37. 37. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 37 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%
  38. 38. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 38 Le moteur de recherche• 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• Deux implémentations de moteur de recherche dans Tatami • ElasticSearch (prod «avancée») ou Lucene (dév ou prod «normale») • Simple à mettre en place grâce à Spring (implémentations différentes du même service)
  39. 39. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 39 ElasticSearch vs Lucene• ElasticSearch • Lucene • Basé sur Lucene • Impossible à • Architecture distribuer distribuée • Simple à mettre • Compliqué à en place héberger
  40. 40. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 40 Abstraction «async» de Spring avec Lucene 1: @Async Insertion dans 2: public void addStatus(Status status) { 3: Document document = new Document(); une thread 4: 5: document.add(new Field("content", status.getContent(), séparée 6: Field.Store.NO, 7: Field.Index.ANALYZED)); 8: 9: indexWriter.addDocument(document);10: indexWriter.commit();11: }1: @Scheduled(fixedDelay = 10000) Index mis à jour en2: public void reloadIndexReader() { «quasi temps réél»3: searcherManager.maybeRefresh();4: }
  41. 41. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 41Partie IV : Mobilité
  42. 42. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 42• LA question à se poser : une application spécifique ou du «responsive design» ? • Nous avons fait les deux sur Tatami...
  43. 43. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 43 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
  44. 44. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 44 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
  45. 45. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 45 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
  46. 46. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 46 jQuery Mobile• Version de jQuery spécifique pour smartphones et tablettes• HTML5, cross-platform• jQuery UI et ThemeRoller
  47. 47. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 47 Problèmes rencontrés• L’application mobile est toujours en retard fonctionnellement• Compliqué à tester et à maintenir• Arrivée des tablettes : il faut faire une 3ème version ??• Gestion des thèmes impossible à gérer entre toutes ces versions
  48. 48. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 48 Pourquoi faire du «responsive design» ?• Une application unique • S’adapte «automatiquement» au support • Plus de problème de maintenance, de gestion des thèmes, etc... • Site «complet» pour tout le monde
  49. 49. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 49 Le résultat• Etonnamment simple à réaliser avec Twitter Bootstrap• Tatami fonctionne sur desktop, mobile (iPhone, Android, Blackberry, Windows Phone) ou tablette (iPad, Android)...
  50. 50. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 50 Problèmes rencontrés• Pas de support «natif», par exemple les notifications• Quelques contraintes à connaitre • Fini les «onmouseover» (ne fonctionnent pas en mode «touch»)
  51. 51. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 51 En conclusion...• HTML5 : capacités impressionnantes, nous ne sommes qu’au début• Spring 3.1: performance et simplicité de développement• NoSQL : ouvre un monde de possibilités, encore complexe à utiliser• Mobilité : application native vs. responsive design
  52. 52. JugSummerCamp 2012 «HTML5, Spring, NoSQL et mobilité» - 52 Merci ! Tatami est hébergé sur : https://tatami.ippon.frLe code source est disponible sur GitHub :https://github.com/ippontech/tatami

×