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

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

43. Exemples d’écrans iPad et iPhone
43

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