1

FRONT END

Ouadie LAHDIOUI

UNE ÎLE QUI MÉRITE D'ÊTRE VISITÉE PAR TOUS LES DÉVELOPPEURS JAVA

Rabat, le13/06/3015

2

3

HTML 5

+ 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

+ 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

+ 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

+ 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

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

+ 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

10

CSS

+ 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 CSS1/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

+ 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

+ 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

+ Ciblage CSS

3/3 SYNTACTICALLY AWESOME STYLE SHEETS

+ Héritage

15

LEES

+ 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

17

JQUERY1/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 SCRIPT1/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

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

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

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

+ 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

25

HTML5 BOILERPLATE1/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 BOOTSTRAP1/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

28

JQUERY MOBILE1/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-CORDOVA1/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

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

32

GRUNT1/1

+ Grunt est un JavaScript Task Runner

+ Il permet de créer des tâches automatisées en JavaScript.

33

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

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

YEOMAN1/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 :

© SQLI Enterprise – SQLI GROUP | 2015 36

CSS

+ CSS Specification : www.w3.org/Style/CSS/specs

+ SASS : www.sass-lang.com

+ LESS : www.lesscss.org

ALLER PLUS LOIN

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

Est-ce qu’elle mérite bien d'être visitée par tous les développeurs java ?