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

IppEvent «HTML5, Spring, NoSQL et mobilité» - 1

Nouveau look pour une
nouvelle vie
HTML5+Spring+NoSQL+Mobile

Julien Dubois
@juliendubois

Formation Spring - 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


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


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


Technologies utilisées dans Tatami

• HTML5 :
Twitter Bootstrap, Less,
jQuery
• Spring 3.1: Spring MVC Rest,
conﬁguration Java,
Spring Mobile
• NoSQL : Cassandra,
Hector, Elastic Search
• Mobilité : JQuery Mobile


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


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


Que propose HTML5 ?

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


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


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


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


3. CSS 3
een 2D e t en 3D
tions de text
• Tran sforma

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


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


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


6. Pour les amateurs de jeux vidéos

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


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


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)


Quelques outils pour réussir
votre application

• jQuery
• Twitter Bootstrap
• LESS CSS
• Mustache.js


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


Fini le MVC et le Struts
«à papa»

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


Comment coder une
application 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


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)


Codons la partie REST...


Exemple 1 : GET sur une entité

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

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

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

3: produces = "application/json")
4: @ResponseBody
5: public User getUser(@PathVariable("login") String login) {
6: return userService.getUserProfileByLogin(login);
7: }


Exemple 2 : GET sur une collection

{
1: $.ajax({
2: type: "GET",
JavaScript

3: url: "rest/users/" + login + "/tweets",
5: success: function(data) {
6: makeTweetsList(data);
7: mainTab.tab(SHOW_EFFECT);
8: }
9: });

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

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


Exemple 3 : POST sur une entité

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

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

5: public void updateUser(
6: @PathVariable("login") String login,
7: @RequestBody User user) {
8: user.setLogin(login);
9: userService.updateUser(user);
10: }


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


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


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


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: }


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 !


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: }


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%


Les problèmes causés par le
NoSQL
• Non consistance des
données
• Pas de transaction
• Problèmes de réplication
de cache
• Retour de la couche
«DAO»


La recherche avec Elastic Search

• Un des problèmes de Cassandra : pas de recherche
plein texte (dans la version Open Source)
• Problème récurrent en bases de données SQL
également : les «like» sont très lents

• Elastic Search
• Basé sur Lucene
• Architecture
distribuée


Nous avons donc nos données à 3
niveaux

Ehcache
Application
Java Cassandra
Jetty+Spring Hector
RE
ST
/JS
O
N

Elastic Search


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


L 5 g Q L li té
T M r in oS b i
H S p N Mo


Pourquoi faire une application
mobile spéciﬁque ?
«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


Comment faire une application
mobile ?

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


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


Il sufﬁt 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


jQuery Mobile

• Version de jQuery spéciﬁque pour
smartphones et
tablettes

• HTML5, cross-platform
• jQuery UI et ThemeRoller
• Intégration PhoneGap / Apache
Cordova


Exemples d’écrans iPad et iPhone


En conclusion...

L'interface graphique
La mobilité
Les performances
La productivité


Merci !

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

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

Similaire à Nouveau look pour une nouvelle vie, version spéciale Ippon (20)

Plus de Julien Dubois

Plus de Julien Dubois (15)

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