A brief description of my vision of the Front-End Developer Job through the evolution of the Web

1. Front End Hero Evolution
mbella.georges@gmail.com

2. De Man of Styles
à
Man of Steel
Front End Hero Evolution
mbella.georges@gmail.com

3. 3
De L’intégrateur Html
au
Développeur Front-end
01
Les Pouvoirs du
Développeur Front-end
02
Le Développeur Front-
End dans son nouvel
univers
03

5. 01. Au commencement était l’Intégrateur HTML(/CSS)
Avant j’étais
intégrateur… mais
ça, c’était avant

7. 7
01. Au commencement était l’Intégrateur HTML(/CSS)
Bref Historique
HTML
1991 : 1er vrai site web par Tim Berners-Lee (inventeur du web avec Robert Cailliau)
1994 : Création du W3C, World Wide Web Consortium (T.Berners-Lee)
CSS 1; 1998 : CSS 2 - Révisée en 2002. Publiée officiellement en 2011!
CSS
Web 2.0, Essor des Media Sociaux, Blogs..
Apparition du JavaScript dans Netscape Navigator
XHTML 1 (XML + HTML), et 2002 : Table Less Design
1990
1996
1996
2000 présent dans la plupart des Browsers - IE5 leader
2001
2003

8. 8
Sa mission était de :
• découper des design
• les porter au format html css
Une autre époque, un autre contexte technologique
• parc de périphériques connectés réduit
• fonctionnalités moins complexes
Les compétences requises moins nombreuses
01. Au commencement était l’Intégrateur HTML(/CSS)

9. 9
Plus une activité qu’un métier à part entière
Profil hybride : Montage des pages par
• Développeur ou
• Infographiste
Le principe était :
« Tu sais te servir de Dreamweaver : tu es
intégrateur web. »
01. Au commencement était l’Intégrateur HTML(/CSS)

10. 10
Le (dur) quotidien de l’intégrateur
• Monopole de IE 6
• Layout en tableau
• CSS à ses débuts
• DOM et JavaScript très différents selon le navigateur
01. Au commencement était l’Intégrateur HTML(/CSS)

11. 11
01. Au commencement était l’Intégrateur HTML(/CSS)

12. 12
01. Au commencement était l’Intégrateur HTML(/CSS)
HTML
HyperTexte Markup Language : langage de balise utilisé pour
créer des pages web
Universel et compris de tous les navigateurs. (Cependant n'est pas
à proprement parlé un langage de programmation)
Les balises HTML permettent de
• structurer sémantiquement les pages
• mettre en forme le contenu
• inclure des éléments interactifs (liens, images, formulaires…)
Quelques notions utiles

13. 13
01. Au commencement était l’Intégrateur HTML(/CSS)
Cascading Style Sheets (feuilles de style en cascade) : gère la
présentation d'une page web
CSS
Les styles permettent de définir des règles appliquées à
un ou plusieurs documents HTML
Ces règles portent sur
• le positionnement des éléments,
• les polices de caractères,
• les couleurs,
• les marges et espacements
• les images de fond, etc.
Le but de CSS est séparer la structure d'un document HTML et sa présentation
Quelques notions utiles

14. 14
01. Au commencement était l’Intégrateur HTML(/CSS)
Page Html sans CSS
Quelques notions utiles

15. 15
01. Au commencement était l’Intégrateur HTML(/CSS)
Quelques notions utiles
Page Html avec CSS +

16. 16
01. Au commencement était l’Intégrateur HTML(/CSS)

17. 17
Ce qui a vraiment changé pour nous, les Front’
AJAX
jQuery
véritable naissance du duo HTML5 / CSS3 (CSS3 créé en 1999!)
2007
Responsive Design (Ethan Marcotte)
Progressive Enhancement / Amélioration Progressive
=
Séparation entre Markup - Styles - Comportement
2005
2006
iPhone
2010

18. 18
Quelques notions utiles
Dernière version en date du langage de développement web HTML
De nouvelles balises (plus sémantiques)
<header> ; <section> ; <article> ; <footer> ; <aside> …
Permet désormais d’utiliser et d’échanger avec des fonctionnalités propres
aux smartphones
Dans le langage courant, HTML5 désigne souvent un ensemble de
technologies Web (HTML5, CSS3 et JavaScript) permettant notamment
le développement d'applications
01. Au commencement était l’Intégrateur HTML(/CSS)
(carnet d’adresse, géolocalisation, appareil photo, etc.)
NB :

19. 19
Quelques notions utiles
CSS3 est la dernière évolution du langage css et vise à étendre CSS2.1
01. Au commencement était l’Intégrateur HTML(/CSS)
Beaucoup de nouveautés :
• les Media Queries,
• les angles arrondis,
• les ombres, les dégradés,
• les @font-face
• les transitions et animations,
• nouvelles mises en page (multi-colonnes, les boîtes flexibles ou les mises
en page en grille)

20. 20
Quelques notions utiles
01. Au commencement était l’Intégrateur HTML(/CSS)
Java Script = Langage de programmation exécuté côté client (directement
depuis le navigateur de l’internaute), par opposition aux langages dits côté
serveur (ex PhP)
L’intérêt du JavaScript est d'exécuter un code sans avoir à recharger une
nouvelle fois la page (via AJAX notamment)
Gère l’interaction avec l'utilisateur en fonction de ses actions ("hover" de la souris au
dessus d'un élément, clic dans un champs de formulaire, redimensionnement de la page...)
Permet d'ajouter des animations ou des effets particuliers sur la page HTML

21. 21
Les compétences du Développeur Front End
01. Au commencement était l’Intégrateur HTML(/CSS)

22. 22
This wind of change …

23. 23
It’s a new dawn …
02. L’Avènement du Développeur Front-End
02-1. Les nouveaux outils / pouvoirs
02-2. La Kryptonite du Développeur
Front-End

24. 24
02-1-1. Les Super Pouvoirs !
B. La Super Force
C. La Nouvelle Vision
A. La Super Vitesse
It’s a new day …

25. 25
A. La Super Vitesse : les Frameworks
It’s a new life …

26. 26
A. La Super Vitesse : les Frameworks

27. Encore des frameworks CSS ?
B. La Super Force : les Pré-Processeurs

28. Définition
Langage de script qui étend le CSS natif, et qui est compilé en
syntaxe CSS normale
Intérêt et Philisophie
 Code plus clair, plus facile à organiser et à
maintenir (ex: un fichier par tâche ou rubrique)
 Propriétés et bouts de code réutilisables dans
d’autres projets
 Principe du DRY, Don’t Repeat Yourself
 Code CSS généré valide pour tout navigateur
B. La Super Force : les Pré-Processeurs

29. Cependant, tout le monde n’est pas pour le progrès
B. La Super Force : les Pré-Processeurs

30. Sass = CSS with Super Powers : the Proof
B. La Super Force : les Pré-Processeurs

31. 31
C. New Vision

32. 32
This is a new life …
C. New Vision : X-Ray
Inspecteur de Navigateur (ici Chrome) : notre « X-Ray vision »

33. 33
C. New Vision : X-Ray
les « Playground Css–Js » : ici CodePen (autres JSFiddle, JS Bin…)
->permettent de simuler, tester et partager du code depuis le navigateur)

34. 34
The HOT topics
C. New Vision : UI on Fire
Font-Icons (Font Awesome, Ico Moon…)
SVG (Icons, Animation…)
Web GL (permet d'afficher, de créer et de gérer
dynamiquement des éléments graphiques complexes en 3D pour
les pages et applications HTML5)

35. 35
This is a new world …
02-1-2. The New WorkFLYflow

36. 36
Why run, when you can… fly !
02-1-2 . The New WorkFLYflow

37. 37
02-1-2 . The New WorkFLYflow
Why run, when you can… fly !

38. The Yeoman ‘Super Heroes’ Team
Google I/O
2012

39. Grunt & Gulp
Exécuteurs de Tâches ou Outils de Build
• La minification (compression) de fichiers CSS, JS
• La compilation des fichiers Sass/Less en CSS
• Fonctionnalité de “watch” (= détection de toute modification)
• Livereload/BrowserSync (rafraîchissement automatique du navigateur)
• Test Unitaires
• Réduction de la taille des fichiers images
• Déploiement automatique sur FTP
• …
• Quasiment tout ce qu’on veut!
02-1-2 . The New WorkFLYflow

40. Car on n’est jamais à l’abri du danger …Mais aussi savoir revenir sur TerreSavoir prendre de la hauteurS’éclater

41. 41
Watch out Clark …
02-2. La Kryptonite du Développeur Front-End

42. 42
02-2-1. Les limites techniques / technologiques
Internet
Explorer, que
fais tu ici !?

43. 43
This is a new life …
02-2-1 . Les limites techniques / technologiques
F**k, il est dans le
cahier de charge !
Multiplicité des supports de diffusion
Compatibilité Cross-Browser
Technologie en permanente évolution
Les challenges du responsive : le tactile

44. 44
I can’t help it …
02-2-2. Les contraintes en mode projet
Délais exigeants
Attentes grandissantes : maîtrise multi-disciplinaire
Education des clients : les sensibiliser sur les possibilités
Organiser sa veille technologique
Marge de manoeuvre étroite (initiatives à prendre
en douceur)

45. 45
You are not alone …
03. La place du Super-Héros dans son nouvel univers
03-1. Les autres personnages
03-2. The Future is today …

46. 46
03-1. Les autres personnages

47. 47
03-1. Les autres personnages

48. 48
03-1. Les autres personnages : Développeur Back End
Comment ca
l’inté n’est
pas finie ??!

49. 49
03-1. Les autres personnages : le Directeur Artistique

50. 50
03-1. Les autres personnages : le Chef de Projet
I’m
always
angry

51. 51
S comme STYLES …
03-2. The Future is today
STYLES comme dans GUIDE DE STYLES
Base commune de travail
pour toute l’équipe
Livrable au client
(idéalement)

52. 52
03-2 . The Future is today : les Guides de Styles

53. 53
03-2 . The Future is today : les Guides de Styles

54. Evolution

55. De Man of Styles à…

56. Fly safe
Vos idées ?
MERCI !