Your SlideShare is downloading. ×
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

2,588
views

Published on

Présentation donnée par Julien Dubois lors de Devoxx France 2012, présentant comment réaliser une application moderne avec les technologies HTML5, Spring, NoSQL (Cassandra) et mobiles.

Présentation donnée par Julien Dubois lors de Devoxx France 2012, présentant comment réaliser une application moderne avec les technologies HTML5, Spring, NoSQL (Cassandra) et mobiles.

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,588
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Nouveau look pour une nouvelle vieHTML5+Spring+NoSQL+Mobile Julien Dubois @juliendubois 1
  • 2. Objectif : réaliser une application Java moderne, sans (trop) céder à la modePas de framework inconnu ou propriétaireDes technologies standards ou largementrépanduesPas de langage alternatif que personne necomprendDu code simple et performantLe 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 SpringDirecteur 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, uneapplication HTML5+Spring+NoSQL+Mobile 4
  • 5. 5
  • 6. L’ensemble du code est disponible sur GitHubhttps://github.com/ippontech/tatami 6
  • 7. L 5 g Q L le T M r in oS b iH 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 WebSocketsTrop 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 davoir intégré toutes cesnouveauté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 iHT 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 iH 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 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 36
  • 37. L 5 g Q L le TM rin oS b iH S p N Mo 37
  • 38. 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, and cross-linking to make it all work.» -- Jakob Nielsenhttp://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êtesVue «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
  • 43. Exemples d’écrans iPad et iPhone 43
  • 44. En conclusion...Linterface graphiqueLa mobilitéLes performancesLa productivité 44
  • 45. Merci ! Rendez-vous sur le stand Ippon Technologies ! Tatami est disponible sur GitHub : https://github.com/ippontech/tatami 45