Le document traite des évolutions récentes et des outils du développement web, incluant HTML5, CSS, JavaScript et divers frameworks comme AngularJS et ReactJS. Il souligne l'importance de normes d'accessibilité et présente des préprocesseurs CSS tels que Sass et Less pour améliorer la gestion des styles. Enfin, il mentionne des outils d'automatisation comme Grunt et Gulp, ainsi que des frameworks pour le développement d'applications mobiles hybrides.

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 ?