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
HTML 5
3
+ La dernière évolution des standards qui définissent HTML
+ Un format de données pour représenter les pages web ...
HTML 5
4
+ Des nouvelles balises :
2/4 NOUVEAUTÉS
+ Nouveaux types de l'élément input :
+ Les notions de type "en ligne" e...
HTML 5
5
+ Web Sockets
+ Web RTC (web with Real Time Communication)
3/4 NOUVEAUTÉS
+ Évènement online et offline
+ Stockag...
HTML 5
6
+ Utilisation de l'audio et de la video en HTML5
+ Utiliser l'API Camera
4/4 NOUVEAUTÉS
+ XMLHttpRequest Niveau 2...
7
MOTEURS DE TEMPLATES
+ Une technique de programmation qui permet de séparer l’interface graphique du reste de
l'applicat...
HAML
8
+ XHTML Abstraction Markup Language
+ Un langage de balisage léger pour templates
+ HAML, génére du XHTML de manièr...
9
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...
PRÉPROCESSEURS CSS
11
1/3
+ Métalangage qui permet de compiler le code CSS
+ Améliore la syntaxe du langage sans toucher à...
SAAS
12
+ Un langage de génération dynamique de feuilles de style
+ SassScript = langage de script qui est interprété en C...
SAAS
13
+ Les variables : Stocker n'importe quelles informations (couleur, taille, texte, etc.) dans un
objet
2/3 SYNTACTI...
SAAS
14
+ Ciblage CSS
3/3 SYNTACTICALLY AWESOME STYLE SHEETS
+ Héritage
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 C...
16
JQUERY
17
1/1 WRITE LESS, DO MORE
+ Une bibliothèque javascript open-source et cross-browser
+ Elle permet de manipuler l’...
COFFEE SCRIPT
18
1/1
+ Un langage compilé en javascript
+ Il n’est pas interprété nativement, il doit d’abord être convert...
MODERNIZER
19
1/1
+ Une bibliothèque JavaScript pour détecter des fonctionnalités spécifiques de HTML et
CSS dans les navi...
ANGULARJS
20
Source : http://www.journaldunet.com/developpeur/outils/angular-js.shtml
1/1
+ Framework Javascript né dans l...
EMBER JS
21
1/1
+ Framwork qui facilite la réalisation des applications monopage (SPA)
+ Routage
+ Injection de dépendance...
REACTJS
22
1/1
+ Un framwork javaScript développé par Facebook
+ Il ne gère que l'interface de l'application = partie vue ...
AUTRES
23
+ Underscore JS : Une collection de fonctions utilitaires
+ Lodash JS : Une alternative à la librairie utilitair...
HTML + CSS + JAVA SCRIPT
24
HTML5 BOILERPLATE
25
1/1
+ Modèle pour faciliter le démarrage d'un nouveau projet web autour de HTML5
+ Bonnes pratiques
+...
TWITTER BOOTSTRAP
26
1/1
+ Un Framework d'intégration (ou framwork CSS)
+ Bootstrap est un ensemble d'outil HTML, CSS et J...
FRONT END POUR LE MOBILE
27
JQUERY MOBILE
28
1/1
+ jQuery Mobile est un framework UI HTML5 optimisé pour le tactile pour simplifier le
développement d...
NG-CORDOVA
29
1/1
+ Le meilleur d’AngularJS et de Cordova = ngCordova
+ L’idée est d’encapsuler des plugins Phonegap/Cordo...
IONIC
30
1/1
+ Ionic Framework est un mélange d’outils et de technos pour développer des applications
mobiles hybrides
+ I...
AUTOMATISATION FRONT END
31
GRUNT
32
1/1
+ Grunt est un JavaScript Task Runner
+ Il permet de créer des tâches automatisées en JavaScript.
GULP
33
1/1
+ Un outil pour d'automatiser les tâches répétitives : compilation des SCSS ou des Coffee
Scripts, minificatio...
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...
YEOMAN
35
1/1
+ Yeoman est basé sur :
+ Génération du squelette de l’application
+ Gestion des dépendances
+ Automatisatio...
CSS
+ CSS Specification : www.w3.org/Style/CSS/specs
+ SASS : www.sass-lang.com
+ LESS : www.lesscss.org
ALLER PLUS LOIN
©...
MERCI POUR VOTRE ATTENTION
37
Est-ce qu’elle mérite bien d'être visitée par tous les développeurs java ?
Prochain SlideShare
Chargement dans…5
×

Front end, une île qui mérite d'être visitée

1 232 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 232
Sur SlideShare
0
Issues des intégrations
0
Intégrations
397
Actions
Partages
0
Téléchargements
24
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Front end, une île qui mérite d'être visitée

  1. 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. 2
  3. 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. 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. 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. 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. 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. 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. 9
  10. 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. 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. 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. 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. 14. SAAS 14 + Ciblage CSS 3/3 SYNTACTICALLY AWESOME STYLE SHEETS + Héritage
  15. 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. 16
  17. 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. 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. 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. 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. 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. 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. 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. 24. HTML + CSS + JAVA SCRIPT 24
  25. 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. 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. 27. FRONT END POUR LE MOBILE 27
  28. 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. 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. 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. 31. AUTOMATISATION FRONT END 31
  32. 32. GRUNT 32 1/1 + Grunt est un JavaScript Task Runner + Il permet de créer des tâches automatisées en JavaScript.
  33. 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. 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. 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. 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. 37. MERCI POUR VOTRE ATTENTION 37 Est-ce qu’elle mérite bien d'être visitée par tous les développeurs java ?

×