SlideShare une entreprise Scribd logo
Nouveau look pour une
     nouvelle vie
HTML5+Spring+NoSQL+Mobile
         Julien Dubois
         @juliendubois




                            1
Objectif :
 réaliser une application
   Java moderne, sans
 (trop) céder à la mode
Pas de framework inconnu ou propriétaire
Des technologies standards ou largement
répandues
Pas de langage alternatif que personne ne
comprend
Du code simple et performant
Le XML, ce n’est pas sale


                                            2
Speaker
                                           • Développeur Java depuis 13 ans
                                            • A commencé avec les EJB 1.0
                                            • Code toujours chez les clients
      Julien Dubois                        • Connait bien Spring
Directeur du Conseil et du Développement    • Co-auteur de «Spring par la pratique»
Ippon Technologies                          • Ancien directeur de SpringSource France
      http://www.ippon.fr
                                           • Aujourd’hui chez Ippon Technologies
                                            • RDV sur notre stand
                                            • On recrute !
                                             Suivez-moi sur Twitter : @juliendubois


                                                                                        3
Nous allons nous baser sur Tatami, une
application HTML5+Spring+NoSQL+Mobile




                                           4
5
L’ensemble du code
 est disponible sur
      GitHub
https://github.com/ippontech/tatami




                                      6
L 5             g      Q L         le
 T M         r   in      oS        b i
H         S p           N        Mo



                                            7
Que propose HTML5 ?

                         Attention : cette
                      conférence est orientée
                       «entreprise», pas «jeu
                              vidéo»



                                                8
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" />

                                                 9
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

                                          10
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...
                                                           11
12
3. CSS 3
                              n 2D et en 3D
              ions de texte e
• Transformat

• Transitions et animations
• Web Fonts
• Bords arrondis, ombres, opacité ...

                                              13
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...


                                              14
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

                                              15
6. Pour les amateurs de jeux vidéos


         • 3D avec WebGL
         • Canvas
         • Audio et vidéo


                                      16
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                17
Le fait d'avoir intégré toutes ces
nouveautés résulte dans des sites plus
   performants côté client et plus
       agréables visuellement

              (moins de hacks pour réaliser le
                 même rendu graphique)




                                                 18
Quelques outils pour réussir votre
          application


           • jQuery
           • Twitter Bootstrap
           • LESS CSS

                                     19
L 5          g        L         le
   M       p rin      oSQ       b i
HT        S          N         o
                              M



                                         20
Fini le MVC et le Struts «à
          papa»



Une application = une page HTML qui fait des
             appels REST/JSON

                                               21
Comment coder une application REST/JSON ?

               En Java EE avec l’API JAX-RS
                     Standard, nombreuses implémentations :
                     Jersey ou CXF

               Ou en Spring MVC REST + Jackson
                     Simple à intégrer et à utiliser avec Spring MVC




                                                                       22
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)

                                                   23
Codons la partie REST...




                           24
Exemple 1 : GET sur une entité




             {
                  1: $.ajax({
                  2:     type: "GET",
                  3:     url: "rest/users/" + login + "/",
JavaScript


                  4:     dataType: "json",
                  5:     success: function(data) {
                  6:          userPicture.attr('src', 'http://www.gravatar.com/avatar/' +
                  7:              data.gravatar + '?s=64');
                  8:          //...
                  9:          userTab.tab(SHOW_EFFECT);
                 10:     }
                 11: });




             {
                 1:   @RequestMapping(value = "/rest/users/{login}",
                 2:           method = RequestMethod.GET,
                 3:           produces = "application/json")
     Java




                 4:   @ResponseBody
                 5:   public User getUser(@PathVariable("login") String login) {
                 6:       return userService.getUserProfileByLogin(login);
                 7:   }
                                                                                            25
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")
Java




                 4:   @ResponseBody
                 5:   public Collection<Tweet> listTweets(@PathVariable("login") String login) {
                 6:       return timelineService.getUserline(login, 20);
                 7:   }


                                                                                                   26
Exemple 3 : POST sur une entité




             {
                  1: $.ajax({
                  2:     type: 'POST',
JavaScript
                  3:     url: "rest/users/" + login,
                  4:     contentType: "application/json",
                  5:     data: JSON.stringify($("#updateUserForm").serializeObject()),
                  6:     dataType: "json",
                  7:     success: function() {
                  8:          $('#defaultTab').tab('show');
                  9:     }
                 10: });




             {
                  1:   @RequestMapping(value = "/rest/users/{login}",
                  2:           method = RequestMethod.POST,
                  3:           consumes = "application/json")
Java




                  4:   @ResponseBody
                  5:   public void updateUser(@PathVariable("login") String login,
                  6:           @RequestBody User user) {
                  7:       user.setLogin(login);
                  8:       userService.updateUser(user);
                  9:   }
                                                                                         27
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...
                                                             28
L 5          g      Q L         le
 T M         rin      oS        b i
H         Sp         N        Mo



                                         29
Comment tenir la charge au niveau de la couche
              de persistance ?




                                                 30
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", key="#tweet.tweetId")
 7:   public void removeTweet(Tweet tweet) {
 8:       tweet.setRemoved(true);
 9:       em.persist(tweet);
10:   }

                                                           31
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 !
                                                               32
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 = createSliceQuery(keyspaceOperator,
 7:           StringSerializer.get(), StringSerializer.get(), StringSerializer.get())
 8:           .setColumnFamily(TIMELINE_CF)
 9:           .setKey(login)
10:           .setRange(null, null, true, size)
11:           .execute()
12:           .get();
13:
14:       Collection<String> tweetIds = new ArrayList<String>();
15:       for (HColumn<String, String> column : result.getColumns()) {
16:           tweetIds.add(column.getValue());
17:       }
18:       return tweetIds;
19:   }
                                                                                        33
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)

•   Sur Tatami nous avons un gain de performance
    d’environ 20%

                                                                34
Les problèmes causés par le NoSQL
      • Non consistance de données
      • L’absence de session peut être gênante :
            1: setTimeout(function() {
            2:     $('#defaultTab').tab('show');
            3: }, 1000) //wait for Cassandra


      • Problèmes de réplication de cache
      • Retour de la couche «DAO»

                                                   35
Testons la montée en charge
Un 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

                                                           36
L 5          g      Q L         le
  TM         rin      oS        b i
H         S p        N        Mo



                                         37
Pourquoi faire une application
     mobile spécifique ?

  «Good mobile user experience requires a different
  design than what's needed to satisfy desktop users.
  Two designs, two sites, and cross-linking to make it
              all work.» -- Jakob Nielsen


http://www.useit.com/alertbox/mobile-vs-full-sites.html



                                                          38
Comment faire une application mobile ?


                  Aucun problème grâce à
                   Spring MVC et à notre
                    architecture REST !


                                           39
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

                                                    40
Il suffit de faire une vue spécialisée qui utilise les
                mêmes services REST
                 Req
                     uêtes
Vue «standard»               RES
                                 T/JSO
                                         N
                                              Spring MVC REST
                                                      +         Cassandra
                                                   Jackson
                                     /JS ON
                         sR EST
 Vue «mobile»        ête
                 Requ


                                                                            41
jQuery Mobile

• Version de jQuery spécifique pour
 smartphones et tablettes

• HTML5, cross-platform
• jQuery UI et ThemeRoller
• Intégration PhoneGap / Apache Cordova
                                          42
Exemples d’écrans iPad et iPhone




                                   43
En conclusion...

L'interface graphique
La mobilité
Les performances
La productivité
                        44
Merci !

    Rendez-vous sur le stand
      Ippon Technologies !


    Tatami est disponible sur GitHub :
 https://github.com/ippontech/tatami


                                         45

Contenu connexe

Tendances

Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Ippon
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
Ippon
 
Spring Batch - concepts de base
Spring Batch - concepts de baseSpring Batch - concepts de base
Spring Batch - concepts de base
Spring User Group France
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Ippon
 
Agilité, n’oublions pas les valeurs
Agilité, n’oublions pas les valeursAgilité, n’oublions pas les valeurs
Agilité, n’oublions pas les valeurs
Ippon
 
Seminaire Portail Open Source
Seminaire Portail Open SourceSeminaire Portail Open Source
Seminaire Portail Open Source
Ippon
 
Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011
Montreal JUG
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
Ippon
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Julien Jakubowski
 
Breizhjug spring batch 2011
Breizhjug spring batch 2011Breizhjug spring batch 2011
Breizhjug spring batch 2011
Olivier BAZOUD
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
Marouan MOHAMED
 
Démystifions le machine learning avec spark par David Martin pour le Salon B...
Démystifions le machine learning avec spark par David Martin pour le Salon B...Démystifions le machine learning avec spark par David Martin pour le Salon B...
Démystifions le machine learning avec spark par David Martin pour le Salon B...
Ippon
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
Stéphane Traumat
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2
Laurent Guérin
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Soufiene Bouzid
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancés
Lilia Sfaxi
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 

Tendances (20)

Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
 
Présentation Rex GWT 2.0
Présentation Rex GWT 2.0Présentation Rex GWT 2.0
Présentation Rex GWT 2.0
 
Spring Batch - concepts de base
Spring Batch - concepts de baseSpring Batch - concepts de base
Spring Batch - concepts de base
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
 
Agilité, n’oublions pas les valeurs
Agilité, n’oublions pas les valeursAgilité, n’oublions pas les valeurs
Agilité, n’oublions pas les valeurs
 
Seminaire Portail Open Source
Seminaire Portail Open SourceSeminaire Portail Open Source
Seminaire Portail Open Source
 
Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011Gwt présentation-jug-14avr2011
Gwt présentation-jug-14avr2011
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
 
Breizhjug spring batch 2011
Breizhjug spring batch 2011Breizhjug spring batch 2011
Breizhjug spring batch 2011
 
Spring & SpringBatch FR
Spring & SpringBatch FRSpring & SpringBatch FR
Spring & SpringBatch FR
 
Spring Batch ParisJUG
Spring Batch ParisJUG Spring Batch ParisJUG
Spring Batch ParisJUG
 
Démystifions le machine learning avec spark par David Martin pour le Salon B...
Démystifions le machine learning avec spark par David Martin pour le Salon B...Démystifions le machine learning avec spark par David Martin pour le Salon B...
Démystifions le machine learning avec spark par David Martin pour le Salon B...
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2Telosys tools jug-nantes-2014-v1.2
Telosys tools jug-nantes-2014-v1.2
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancés
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 

En vedette

De Devoxx au CAC40
De Devoxx au CAC40De Devoxx au CAC40
De Devoxx au CAC40
Julien Dubois
 
Spring Security - TeeJUG 2008
Spring Security - TeeJUG 2008Spring Security - TeeJUG 2008
Spring Security - TeeJUG 2008teejug
 
Développer et déployer dans le cloud
Développer et déployer dans le cloudDévelopper et déployer dans le cloud
Développer et déployer dans le cloud
Julien Dubois
 
Malakocktail 72 (été 2013)
Malakocktail 72 (été 2013)Malakocktail 72 (été 2013)
Malakocktail 72 (été 2013)Malakocktail
 
Accessibilité & e-recrutement
Accessibilité & e-recrutementAccessibilité & e-recrutement
Accessibilité & e-recrutement
Sébastien Delorme
 
DevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - SpinnakerDevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - Spinnaker
Stephan Lagraulet
 
JHipster à Devoxx 2015
JHipster à Devoxx 2015JHipster à Devoxx 2015
JHipster à Devoxx 2015
Julien Dubois
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
Geoffray Gruel
 
Introduction à Cassandra
Introduction à CassandraIntroduction à Cassandra
Introduction à Cassandra
VMware Tanzu
 
Requêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraRequêtes multi-critères avec Cassandra
Requêtes multi-critères avec Cassandra
Julien Dubois
 
Spark, ou comment traiter des données à la vitesse de l'éclair
Spark, ou comment traiter des données à la vitesse de l'éclairSpark, ou comment traiter des données à la vitesse de l'éclair
Spark, ou comment traiter des données à la vitesse de l'éclair
Alexis Seigneurin
 
JHipster overview
JHipster overviewJHipster overview
JHipster overview
Julien Dubois
 
JHipster for Spring Boot webinar
JHipster for Spring Boot webinarJHipster for Spring Boot webinar
JHipster for Spring Boot webinar
Julien Dubois
 
Devoxx : being productive with JHipster
Devoxx : being productive with JHipsterDevoxx : being productive with JHipster
Devoxx : being productive with JHipster
Julien Dubois
 
L'atelier e-Recrutement 2.0 (3eme partie)
L'atelier e-Recrutement 2.0 (3eme partie)L'atelier e-Recrutement 2.0 (3eme partie)
L'atelier e-Recrutement 2.0 (3eme partie)
Patrice Malaurie
 
L'atelier e-Recrutement 2.0 (1ère partie)
L'atelier e-Recrutement 2.0 (1ère partie)L'atelier e-Recrutement 2.0 (1ère partie)
L'atelier e-Recrutement 2.0 (1ère partie)
Patrice Malaurie
 
AngularJS
AngularJSAngularJS
AngularJS
Ouadie LAHDIOUI
 
Annonces du french scrum user group v1.2
Annonces du french scrum user group   v1.2Annonces du french scrum user group   v1.2
Annonces du french scrum user group v1.2Xavier Warzee
 
Agile Tour Nantes 2011 - Bertrand pinel les projets au forfait - scrum but....
Agile Tour Nantes 2011 - Bertrand pinel   les projets au forfait - scrum but....Agile Tour Nantes 2011 - Bertrand pinel   les projets au forfait - scrum but....
Agile Tour Nantes 2011 - Bertrand pinel les projets au forfait - scrum but....
Association Agile Nantes
 

En vedette (20)

De Devoxx au CAC40
De Devoxx au CAC40De Devoxx au CAC40
De Devoxx au CAC40
 
Spring Security - TeeJUG 2008
Spring Security - TeeJUG 2008Spring Security - TeeJUG 2008
Spring Security - TeeJUG 2008
 
Pierre et Alexandre
Pierre et AlexandrePierre et Alexandre
Pierre et Alexandre
 
Développer et déployer dans le cloud
Développer et déployer dans le cloudDévelopper et déployer dans le cloud
Développer et déployer dans le cloud
 
Malakocktail 72 (été 2013)
Malakocktail 72 (été 2013)Malakocktail 72 (été 2013)
Malakocktail 72 (été 2013)
 
Accessibilité & e-recrutement
Accessibilité & e-recrutementAccessibilité & e-recrutement
Accessibilité & e-recrutement
 
DevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - SpinnakerDevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - Spinnaker
 
JHipster à Devoxx 2015
JHipster à Devoxx 2015JHipster à Devoxx 2015
JHipster à Devoxx 2015
 
20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready20100225 Ippon Osgi Are You Ready
20100225 Ippon Osgi Are You Ready
 
Introduction à Cassandra
Introduction à CassandraIntroduction à Cassandra
Introduction à Cassandra
 
Requêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraRequêtes multi-critères avec Cassandra
Requêtes multi-critères avec Cassandra
 
Spark, ou comment traiter des données à la vitesse de l'éclair
Spark, ou comment traiter des données à la vitesse de l'éclairSpark, ou comment traiter des données à la vitesse de l'éclair
Spark, ou comment traiter des données à la vitesse de l'éclair
 
JHipster overview
JHipster overviewJHipster overview
JHipster overview
 
JHipster for Spring Boot webinar
JHipster for Spring Boot webinarJHipster for Spring Boot webinar
JHipster for Spring Boot webinar
 
Devoxx : being productive with JHipster
Devoxx : being productive with JHipsterDevoxx : being productive with JHipster
Devoxx : being productive with JHipster
 
L'atelier e-Recrutement 2.0 (3eme partie)
L'atelier e-Recrutement 2.0 (3eme partie)L'atelier e-Recrutement 2.0 (3eme partie)
L'atelier e-Recrutement 2.0 (3eme partie)
 
L'atelier e-Recrutement 2.0 (1ère partie)
L'atelier e-Recrutement 2.0 (1ère partie)L'atelier e-Recrutement 2.0 (1ère partie)
L'atelier e-Recrutement 2.0 (1ère partie)
 
AngularJS
AngularJSAngularJS
AngularJS
 
Annonces du french scrum user group v1.2
Annonces du french scrum user group   v1.2Annonces du french scrum user group   v1.2
Annonces du french scrum user group v1.2
 
Agile Tour Nantes 2011 - Bertrand pinel les projets au forfait - scrum but....
Agile Tour Nantes 2011 - Bertrand pinel   les projets au forfait - scrum but....Agile Tour Nantes 2011 - Bertrand pinel   les projets au forfait - scrum but....
Agile Tour Nantes 2011 - Bertrand pinel les projets au forfait - scrum but....
 

Similaire à Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité

Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
Khalid Jebbari
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
DNG Consulting
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
Microsoft
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 
Devoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le CloudDevoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le Cloud
Tugdual Grall
 
Web 2.0 generalités, enjeux, et technologies
Web 2.0 generalités, enjeux, et technologiesWeb 2.0 generalités, enjeux, et technologies
Web 2.0 generalités, enjeux, et technologies
Foued Benoumhani
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)
Restlet
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
Chamseddine Ouerhani
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
jwajsberg
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
Cédric Leblond
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
Guillaume Sautereau
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
Content Square
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGJUG Toulouse
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
Slim Soussi
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014 JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014
telosys
 

Similaire à Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité (20)

Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Devoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le CloudDevoxx: Tribulation d'un développeur sur le Cloud
Devoxx: Tribulation d'un développeur sur le Cloud
 
Web 2.0 generalités, enjeux, et technologies
Web 2.0 generalités, enjeux, et technologiesWeb 2.0 generalités, enjeux, et technologies
Web 2.0 generalités, enjeux, et technologies
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)De l'Open Source à l'Open API (in French)
De l'Open Source à l'Open API (in French)
 
Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !Ma stack d'outils agiles, tout un programme !
Ma stack d'outils agiles, tout un programme !
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Html5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUGHtml5 par Florent Garin, au Toulouse JUG
Html5 par Florent Garin, au Toulouse JUG
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014 JUG Nantes - Telosys Tools - Avril 2014
JUG Nantes - Telosys Tools - Avril 2014
 

Plus de Julien Dubois

Accessibility in the UK
Accessibility in the UKAccessibility in the UK
Accessibility in the UK
Julien Dubois
 
Java on Azure "Back to Basics" series - databases introduction
Java on Azure "Back to Basics" series - databases introductionJava on Azure "Back to Basics" series - databases introduction
Java on Azure "Back to Basics" series - databases introduction
Julien Dubois
 
JHipster Code 2020 keynote
JHipster Code 2020 keynoteJHipster Code 2020 keynote
JHipster Code 2020 keynote
Julien Dubois
 
Running Spring Boot microservices in the cloud
Running Spring Boot microservices in the cloudRunning Spring Boot microservices in the cloud
Running Spring Boot microservices in the cloud
Julien Dubois
 
Spring on Azure
Spring on AzureSpring on Azure
Spring on Azure
Julien Dubois
 
JHipster Conf 2019 English keynote
JHipster Conf 2019 English keynoteJHipster Conf 2019 English keynote
JHipster Conf 2019 English keynote
Julien Dubois
 
JHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJHipster Conf 2019 French keynote
JHipster Conf 2019 French keynote
Julien Dubois
 
Créer et développer une communauté Open Source
Créer et développer une communauté Open SourceCréer et développer une communauté Open Source
Créer et développer une communauté Open Source
Julien Dubois
 
JHipster Conf 2018 Quiz
JHipster Conf 2018 QuizJHipster Conf 2018 Quiz
JHipster Conf 2018 Quiz
Julien Dubois
 
Devoxx Belgium 2017 - easy microservices with JHipster
Devoxx Belgium 2017 - easy microservices with JHipsterDevoxx Belgium 2017 - easy microservices with JHipster
Devoxx Belgium 2017 - easy microservices with JHipster
Julien Dubois
 
JHipster overview and roadmap (August 2017)
JHipster overview and roadmap (August 2017)JHipster overview and roadmap (August 2017)
JHipster overview and roadmap (August 2017)
Julien Dubois
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
Julien Dubois
 
Gérer son environnement de développement avec Docker
Gérer son environnement de développement avec DockerGérer son environnement de développement avec Docker
Gérer son environnement de développement avec Docker
Julien Dubois
 
Performance tuning the Spring Pet Clinic sample application
Performance tuning the Spring Pet Clinic sample applicationPerformance tuning the Spring Pet Clinic sample application
Performance tuning the Spring Pet Clinic sample application
Julien Dubois
 
Developing modular Java applications
Developing modular Java applicationsDeveloping modular Java applications
Developing modular Java applications
Julien Dubois
 

Plus de Julien Dubois (15)

Accessibility in the UK
Accessibility in the UKAccessibility in the UK
Accessibility in the UK
 
Java on Azure "Back to Basics" series - databases introduction
Java on Azure "Back to Basics" series - databases introductionJava on Azure "Back to Basics" series - databases introduction
Java on Azure "Back to Basics" series - databases introduction
 
JHipster Code 2020 keynote
JHipster Code 2020 keynoteJHipster Code 2020 keynote
JHipster Code 2020 keynote
 
Running Spring Boot microservices in the cloud
Running Spring Boot microservices in the cloudRunning Spring Boot microservices in the cloud
Running Spring Boot microservices in the cloud
 
Spring on Azure
Spring on AzureSpring on Azure
Spring on Azure
 
JHipster Conf 2019 English keynote
JHipster Conf 2019 English keynoteJHipster Conf 2019 English keynote
JHipster Conf 2019 English keynote
 
JHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJHipster Conf 2019 French keynote
JHipster Conf 2019 French keynote
 
Créer et développer une communauté Open Source
Créer et développer une communauté Open SourceCréer et développer une communauté Open Source
Créer et développer une communauté Open Source
 
JHipster Conf 2018 Quiz
JHipster Conf 2018 QuizJHipster Conf 2018 Quiz
JHipster Conf 2018 Quiz
 
Devoxx Belgium 2017 - easy microservices with JHipster
Devoxx Belgium 2017 - easy microservices with JHipsterDevoxx Belgium 2017 - easy microservices with JHipster
Devoxx Belgium 2017 - easy microservices with JHipster
 
JHipster overview and roadmap (August 2017)
JHipster overview and roadmap (August 2017)JHipster overview and roadmap (August 2017)
JHipster overview and roadmap (August 2017)
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
Gérer son environnement de développement avec Docker
Gérer son environnement de développement avec DockerGérer son environnement de développement avec Docker
Gérer son environnement de développement avec Docker
 
Performance tuning the Spring Pet Clinic sample application
Performance tuning the Spring Pet Clinic sample applicationPerformance tuning the Spring Pet Clinic sample application
Performance tuning the Spring Pet Clinic sample application
 
Developing modular Java applications
Developing modular Java applicationsDeveloping modular Java applications
Developing modular Java applications
 

Dernier

Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité

  • 1. Nouveau look pour une nouvelle vie HTML5+Spring+NoSQL+Mobile Julien Dubois @juliendubois 1
  • 2. Objectif : réaliser une application Java moderne, sans (trop) céder à la mode Pas de framework inconnu ou propriétaire Des technologies standards ou largement répandues Pas de langage alternatif que personne ne comprend Du code simple et performant Le XML, ce n’est pas sale 2
  • 3. Speaker • Développeur Java depuis 13 ans • A commencé avec les EJB 1.0 • Code toujours chez les clients Julien Dubois • Connait bien Spring Directeur du Conseil et du Développement • Co-auteur de «Spring par la pratique» Ippon Technologies • Ancien directeur de SpringSource France http://www.ippon.fr • Aujourd’hui chez Ippon Technologies • RDV sur notre stand • On recrute ! Suivez-moi sur Twitter : @juliendubois 3
  • 4. Nous allons nous baser sur Tatami, une application HTML5+Spring+NoSQL+Mobile 4
  • 5. 5
  • 6. L’ensemble du code est disponible sur GitHub https://github.com/ippontech/tatami 6
  • 7. L 5 g Q L le T M r in oS b i H S p N Mo 7
  • 8. Que propose HTML5 ? Attention : cette conférence est orientée «entreprise», pas «jeu vidéo» 8
  • 9. 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" /> 9
  • 10. 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 10
  • 11. 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... 11
  • 12. 12
  • 13. 3. CSS 3 n 2D et en 3D ions de texte e • Transformat • Transitions et animations • Web Fonts • Bords arrondis, ombres, opacité ... 13
  • 14. 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... 14
  • 15. 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 15
  • 16. 6. Pour les amateurs de jeux vidéos • 3D avec WebGL • Canvas • Audio et vidéo 16
  • 17. 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 17
  • 18. Le fait d'avoir intégré toutes ces nouveautés résulte dans des sites plus performants côté client et plus agréables visuellement (moins de hacks pour réaliser le même rendu graphique) 18
  • 19. Quelques outils pour réussir votre application • jQuery • Twitter Bootstrap • LESS CSS 19
  • 20. L 5 g L le M p rin oSQ b i HT S N o M 20
  • 21. Fini le MVC et le Struts «à papa» Une application = une page HTML qui fait des appels REST/JSON 21
  • 22. Comment coder une application REST/JSON ? En Java EE avec l’API JAX-RS Standard, nombreuses implémentations : Jersey ou CXF Ou en Spring MVC REST + Jackson Simple à intégrer et à utiliser avec Spring MVC 22
  • 23. 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) 23
  • 24. Codons la partie REST... 24
  • 25. Exemple 1 : GET sur une entité { 1: $.ajax({ 2: type: "GET", 3: url: "rest/users/" + login + "/", JavaScript 4: dataType: "json", 5: success: function(data) { 6: userPicture.attr('src', 'http://www.gravatar.com/avatar/' + 7: data.gravatar + '?s=64'); 8: //... 9: userTab.tab(SHOW_EFFECT); 10: } 11: }); { 1: @RequestMapping(value = "/rest/users/{login}", 2: method = RequestMethod.GET, 3: produces = "application/json") Java 4: @ResponseBody 5: public User getUser(@PathVariable("login") String login) { 6: return userService.getUserProfileByLogin(login); 7: } 25
  • 26. 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") Java 4: @ResponseBody 5: public Collection<Tweet> listTweets(@PathVariable("login") String login) { 6: return timelineService.getUserline(login, 20); 7: } 26
  • 27. Exemple 3 : POST sur une entité { 1: $.ajax({ 2: type: 'POST', JavaScript 3: url: "rest/users/" + login, 4: contentType: "application/json", 5: data: JSON.stringify($("#updateUserForm").serializeObject()), 6: dataType: "json", 7: success: function() { 8: $('#defaultTab').tab('show'); 9: } 10: }); { 1: @RequestMapping(value = "/rest/users/{login}", 2: method = RequestMethod.POST, 3: consumes = "application/json") Java 4: @ResponseBody 5: public void updateUser(@PathVariable("login") String login, 6: @RequestBody User user) { 7: user.setLogin(login); 8: userService.updateUser(user); 9: } 27
  • 28. 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... 28
  • 29. L 5 g Q L le T M rin oS b i H Sp N Mo 29
  • 30. Comment tenir la charge au niveau de la couche de persistance ? 30
  • 31. 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", key="#tweet.tweetId") 7: public void removeTweet(Tweet tweet) { 8: tweet.setRemoved(true); 9: em.persist(tweet); 10: } 31
  • 32. 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 ! 32
  • 33. 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 = createSliceQuery(keyspaceOperator, 7: StringSerializer.get(), StringSerializer.get(), StringSerializer.get()) 8: .setColumnFamily(TIMELINE_CF) 9: .setKey(login) 10: .setRange(null, null, true, size) 11: .execute() 12: .get(); 13: 14: Collection<String> tweetIds = new ArrayList<String>(); 15: for (HColumn<String, String> column : result.getColumns()) { 16: tweetIds.add(column.getValue()); 17: } 18: return tweetIds; 19: } 33
  • 34. 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) • Sur Tatami nous avons un gain de performance d’environ 20% 34
  • 35. Les problèmes causés par le NoSQL • Non consistance de données • L’absence de session peut être gênante : 1: setTimeout(function() { 2: $('#defaultTab').tab('show'); 3: }, 1000) //wait for Cassandra • Problèmes de réplication de cache • Retour de la couche «DAO» 35
  • 36. Testons la montée en charge Un 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 36
  • 37. L 5 g Q L le TM rin oS b i H S p N Mo 37
  • 38. Pourquoi faire une application mobile spécifique ? «Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.» -- Jakob Nielsen http://www.useit.com/alertbox/mobile-vs-full-sites.html 38
  • 39. Comment faire une application mobile ? Aucun problème grâce à Spring MVC et à notre architecture REST ! 39
  • 40. 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 40
  • 41. Il suffit de faire une vue spécialisée qui utilise les mêmes services REST Req uêtes Vue «standard» RES T/JSO N Spring MVC REST + Cassandra Jackson /JS ON sR EST Vue «mobile» ête Requ 41
  • 42. jQuery Mobile • Version de jQuery spécifique pour smartphones et tablettes • HTML5, cross-platform • jQuery UI et ThemeRoller • Intégration PhoneGap / Apache Cordova 42
  • 44. En conclusion... L'interface graphique La mobilité Les performances La productivité 44
  • 45. Merci ! Rendez-vous sur le stand Ippon Technologies ! Tatami est disponible sur GitHub : https://github.com/ippontech/tatami 45