Front end, une île qui mérite d'être visitée
Télécharger en tant que PPTX, PDF•2 j'aime•1,531 vues
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.
Front end, une île qui mérite d'être visitée
- 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 :
- 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 ?