1. FRONT END
1
Ouadie LAHDIOUI
UNE ÎLE QUI MÉRITE D'ÊTRE VISITÉE PAR TOUS LES DÉVELOPPEURS JAVA
Rabat, le13/06/3015

2. 2

3. HTML 5
3
+ La dernière évolution des standards qui définissent HTML
+ Un format de données pour représenter les pages web et écrire de l’hypertexte
+ Il permet de créer des documents interopérables de manière conforme aux exigences de
l’accessibilité du web
+ Le travail sur HTML 5 a commencé fin 2003 par à un groupe de Freelancers « WhatWG »
+ En 2007 le W3C accepte la vision HTML5 en intégrant en son sein ce groupe de travail.
+ HTML 5 = nouveaux éléments + un ensemble plus large de technologies
1/4 HYPERTEXT MARKUP LANGUAGE

4. HTML 5
4
+ Des nouvelles balises :
2/4 NOUVEAUTÉS
+ Nouveaux types de l'élément input :
+ Les notions de type "en ligne" et "bloc" est remplacées par des catégories :

5. HTML 5
5
+ Web Sockets
+ Web RTC (web with Real Time Communication)
3/4 NOUVEAUTÉS
+ Évènement online et offline
+ Stockage de session et persistance côté client du WHATWG (ou DOM Storage)
+ IndexedDB
+ Utilisation de fichiers depuis des applications web

6. HTML 5
6
+ Utilisation de l'audio et de la video en HTML5
+ Utiliser l'API Camera
4/4 NOUVEAUTÉS
+ XMLHttpRequest Niveau 2
+ Moteur JavaScript à compilation JIT (juste à temps)
+ API Historique
+ L'attribut contentEditable
+ Évènements tactiles
+ Utilisation de la Geolocalisation
+ Détection de l'orientation de l'appareil
+ Glisser et déposer
+ API Verrouillage de la souris
+ API Plein écran

7. 7
MOTEURS DE TEMPLATES
+ Une technique de programmation qui permet de séparer l’interface graphique du reste de
l'application
+ Solutions :
1/1

8. HAML
8
+ XHTML Abstraction Markup Language
+ Un langage de balisage léger pour templates
+ HAML, génére du XHTML de manière élégante et minimaliste = donc rapide
+ L’espacement et l’indentation sont importants
+ L’équivalent de HAML pour CSS est le Sass
+ Comme dit son créateur, « HAML paraît bizarre les 20 premières minutes, mais après ça,
vous irez plus vite »
1/1

9. 9

10. CSS
10
+ Il y a trois façons d’insérer des CSS dans une page HTML :
1/4 CASCADING STYLE SHEETS
+ Les styles définissent la façon d’afficher les éléments HTML
+ Une recommandation du World Wide Web Consortium (W3C), au même titre que HTML ou
XML
+ Feuille de style externe
+ Feuille de style interne
+ Style en ligne

11. PRÉPROCESSEURS CSS
11
1/3
+ Métalangage qui permet de compiler le code CSS
+ Améliore la syntaxe du langage sans toucher à ses fondamentaux
+ Il permet d'optimiser le code en amont
+ La principale différence avec CSS est la possibilité de créer des objets et des variables
dans les feuilles de style
+ Principales fonctionnalités :
+ variables
+ fonctions
+ mixins (permettant de réaliser des sorties CSS paramétrables)
+ @import intelligent (pas côté client)
+ nesting (imbrications des sélecteurs pour éviter la répétition)

12. SAAS
12
+ Un langage de génération dynamique de feuilles de style
+ SassScript = langage de script qui est interprété en CSS
+ Sass est le plus mature des pré-processeurs CSS
+ Deux syntaxes existent :
1/3 SYNTACTICALLY AWESOME STYLE SHEETS
+ Syntaxe indentée : proche de Haml
+ SCSS (Sassy CSS) : un formalisme proche de CSS
+ Les fonctionnalités phares : variables, mixins, imbrication, héritage, opérateurs …

13. SAAS
13
+ Les variables : Stocker n'importe quelles informations (couleur, taille, texte, etc.) dans un
objet
2/3 SYNTACTICALLY AWESOME STYLE SHEETS
+ Les mixins : Réutiliser le code CSS

14. SAAS
14
+ Ciblage CSS
3/3 SYNTACTICALLY AWESOME STYLE SHEETS
+ Héritage

15. LEES
15
+ Il peut fonctionner côté serveur (avec Node.js ou Rhino) ou côté client.
1/1
+ Frère jumeau du SASS, il étends CSS avec des comportements dynamiques comme les
variables, mixins, opérations et fonctions …
+ la syntaxe de LESS est plus proche de CSS
+ SimpleLESS : un compilateur du LESS en CSS

16. 16

17. JQUERY
17
1/1 WRITE LESS, DO MORE
+ Une bibliothèque javascript open-source et cross-browser
+ Elle permet de manipuler l’arbre DOM
+ Elle permet aussi de gérer les événements javascript et faire des requêtes AJAX
+ Elle repose sur la fonction : jQuery() ou $()

18. COFFEE SCRIPT
18
1/1
+ Un langage compilé en javascript
+ Il n’est pas interprété nativement, il doit d’abord être converti en javascript
+ Il ajoute du sucre syntaxique inspiré par Python
+ En coffee, pas besoin d’utiliser explicitement le mot clé «var» ni les «;»
+ La syntaxe est beaucoup plus agréable et lisible
+ Des experts JavaScript reconnus, et même le créateur et mainteneur principal de
JavaScript (Brendan Eich, le directeur technique de Mozilla) adorent CoffeeScript

19. MODERNIZER
19
1/1
+ Une bibliothèque JavaScript pour détecter des fonctionnalités spécifiques de HTML et
CSS dans les navigateurs
+ Il communique avec le navigateur de la manière suivante :
+ Demande au navigateur s’il reconnait et supporte la fonctionnalité x
+ Ne fais rien si le navigateur connais et supporte la fonctionnalité x
+ Propose une alternative, code en javascript pour la fonctionnalité x

20. ANGULARJS
20
Source : http://www.journaldunet.com/developpeur/outils/angular-js.shtml
1/1
+ Framework Javascript né dans les locaus de Google pour créer des applications web
riches et interactives
+ Il est construit autour des concepts :
+ Architecture MV* Model-View-Whatever (whatever works for you)
+ Single page application
+ Data-binding bi-directionnel
+ Injection de dépendance
+ Directives, Services, filtres et expressions

21. EMBER JS
21
1/1
+ Framwork qui facilite la réalisation des applications monopage (SPA)
+ Routage
+ Injection de dépendance
+ MVC
+ La philosophie convention plutôt que la configuration (Convention over configuration):

22. REACTJS
22
1/1
+ Un framwork javaScript développé par Facebook
+ Il ne gère que l'interface de l'application = partie vue de l’MVC
+ AngularJS est orienté application de gestion, c'est à dire des écrans de liste/détail pour
faire du CRUD sur des entités métier.
+ React est utilisé dans des projets exigeant à la fois un rendu visuel agréable et un
design performant
+ React n'est pas un framework full-stack, par contre une bibliothèque orientée
Composant

23. AUTRES
23
+ Underscore JS : Une collection de fonctions utilitaires
+ Lodash JS : Une alternative à la librairie utilitaire Underscore, plus performante, plus
consistante et ajoutant quelques fonctionnalités supplémentaires
+ Jshint : un outil qui analyse le code JavaScript afin qu'il soit de qualité

24. HTML + CSS + JAVA SCRIPT
24

25. HTML5 BOILERPLATE
25
1/1
+ Modèle pour faciliter le démarrage d'un nouveau projet web autour de HTML5
+ Bonnes pratiques
+ Des fichiers de configuration pour le serveur
+ Des feuilles de styles de base,
+ Des librairies JavaScript.

26. TWITTER BOOTSTRAP
26
1/1
+ Un Framework d'intégration (ou framwork CSS)
+ Bootstrap est un ensemble d'outil HTML, CSS et Javascript
+ C'est en Twitter, le réseau social qui a développé ce framework et le met librement à la
disposition des développeurs
+ Des boutons, des layouts, des tableaux, des formulaires, des alertes, des popins et
menus pour créer des interfaces visuellement efficaces et ergonomiques
+ Ainsi Bootsrap est un "CSS grid framework"

27. FRONT END POUR LE MOBILE
27

28. JQUERY MOBILE
28
1/1
+ jQuery Mobile est un framework UI HTML5 optimisé pour le tactile pour simplifier le
développement d'applications web multi-plateformes (cross-devices)
+ Ses atouts sont très nombreux, en voici les principaux :
+ Une documentation complète et bien mise à jour
+ Une très grande facilité d'utilisation et d'apprentissage
+ Personnalisable

29. NG-CORDOVA
29
1/1
+ Le meilleur d’AngularJS et de Cordova = ngCordova
+ L’idée est d’encapsuler des plugins Phonegap/Cordova dans des services AngularJS
+ Implémente la plupart des plugins nécessaires (photo, network, vidéo…)

30. IONIC
30
1/1
+ Ionic Framework est un mélange d’outils et de technos pour développer des applications
mobiles hybrides
+ Il s’appuie sur AngularJS pour la partie application web du framework et sur Cordova pour
la partie construction des applications natives
+ L'écosystème ionic :

31. AUTOMATISATION FRONT END
31

32. GRUNT
32
1/1
+ Grunt est un JavaScript Task Runner
+ Il permet de créer des tâches automatisées en JavaScript.

33. GULP
33
1/1
+ Un outil pour d'automatiser les tâches répétitives : compilation des SCSS ou des Coffee
Scripts, minification, compression des fichiers image, ...
+ Configuré via un fichier javascript « gulpfile.js »

34. BOWER
34
1/1
Télécharger un package Bower
Détail d’un package Bower
+ Un outil de gestion des dépendances
+ Il se base sur github pour télécharger les composants grâce à des tables de
correspondances « name » : « url »

35. YEOMAN
35
1/1
+ Yeoman est basé sur :
+ Génération du squelette de l’application
+ Gestion des dépendances
+ Automatisation des tâches
+ Un projet open-source soutenu par Google
+ Il a pour but de faire la :

36. CSS
+ CSS Specification : www.w3.org/Style/CSS/specs
+ SASS : www.sass-lang.com
+ LESS : www.lesscss.org
ALLER PLUS LOIN
© SQLI Enterprise – SQLI GROUP | 2015 36
JAVA SCRIPT
+ AngularJS : www.angularjs.org
+ ReactJS : www.facebook.github.io/react
+ Ng-Cordova : www.ngcordova.com
+ Ionic : www.ionicframework.com
INDUSTRIALISATION FRONT-END
+ Grunt : www.gruntjs.com
+ GulpJS : http://gulpjs.com/
+ Yeoman : www.yeoman.io

37. MERCI POUR VOTRE ATTENTION
37
Est-ce qu’elle mérite bien d'être visitée par tous les développeurs java ?