Slide 1

Slide 1 text

Front-end workflow David Dias – Front-end Architect / @frontenddevfr Proximity BBDO Indian Ocean 10 février 2014

Slide 2

Slide 2 text

Il y a très très longtemps… mais pas si loin que ça

Slide 3

Slide 3 text

Le développement front n’était pas si réjouissant que ça…

Slide 4

Slide 4 text

• HTML statiques • Nombreuses classes CSS • Incohérences graphiques • Beaucoup de bug JS à corriger • Nombreux JavaScripts • Pas de tests : qualité, performance, accessibilité… • Tâches répétitives…

Slide 5

Slide 5 text

… que faire pour que cette situation change ?

Slide 6

Slide 6 text

Appeler le Superdeveloper !

Slide 7

Slide 7 text

HTML = JADE

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Les possibilités offertes par Jade • Block / extends • Include • Mixins • Variables / json • Conditions, boolean • HTML parfaitement indenté

Slide 10

Slide 10 text

CSS = OOCSS, SMACSS et BEM

Slide 11

Slide 11 text

Réutilisable Maintenable « Scalable » Performant

Slide 12

Slide 12 text

OOCSS Object Oriented CSS

Slide 13

Slide 13 text

Séparer structure et skin Séparer container et content

Slide 14

Slide 14 text

#button { width: 200px; height: 50px; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; } #box { width: 350px; overflow: hidden; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; } #widget { width: 250px; min-height: 150px overflow: auto; border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; }

Slide 15

Slide 15 text

.button { width: 200px; height: 50px; } .box { width: 350px; overflow: hidden; } .widget { width: 250px; min-height: 150px overflow: auto; } .skin { border: 1px solid #ccc; box-shadow: #aeaeae 2px 2px 5px; }

Slide 16

Slide 16 text

Séparer structure et skin Séparer container et content

Slide 17

Slide 17 text

Title

Slide 18

Slide 18 text

#main-content section h1 { … }

Slide 19

Slide 19 text

Title

Slide 20

Slide 20 text

.entry-title { … }

Slide 21

Slide 21 text

Title

Slide 22

Slide 22 text

SMACSS Scalable and Modular Architecture for CSS

Slide 23

Slide 23 text

Catégorisation Convention de nommage Séparer le CSS du HTML

Slide 24

Slide 24 text

- base - components - layout - mixins - theme settings

Slide 25

Slide 25 text

BEM

Slide 26

Slide 26 text

BEM = Block – Element - Modifier

Slide 27

Slide 27 text

Title

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Slide 28

Slide 28 text

Title

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

Slide 29

Slide 29 text

CSS = SASS + COMPASS

Slide 30

Slide 30 text

- Mixins - Extends - Variables - Découpage - …

Slide 31

Slide 31 text

Frameworks

Slide 32

Slide 32 text

Ne réinventons pas la roue, faisons la tourner : Les frameworks

Slide 33

Slide 33 text

Twitter Boostrap

Slide 34

Slide 34 text

Foundation zurb

Slide 35

Slide 35 text

Gumby

Slide 36

Slide 36 text

• Ne plus penser page mais modules • Pensez le framework pour répondre à toutes les possibilités • Framework créé, plus besoin de re-créer mais maintenir • Facilité la création de nouvelles pages

Slide 37

Slide 37 text

Vous pensez que les frameworks sont une bonne idée ? Alors pourquoi ne faisons nous pas ça ?

Slide 38

Slide 38 text

Front-end UX Crea Styleguide Modularité Travail d’équipe UX Crea Front-end Aujourd’hui Incohérences graphiques Complexité structure Absence d’équipe Demain…

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Fronts doivent aussi être des UX et les UX des développeurs

Slide 41

Slide 41 text

Fronts doivent aussi être des designers et les designers des développeurs

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

NODE

Slide 44

Slide 44 text

NODE JavaScript Hors du navigateur Avec des fonctions pour serveurs Utilise V8 Evénementiel Asynchrone

Slide 45

Slide 45 text

Ecosystème de nodeJS Est-ce mûr ? • nodejs autosuffisant en serveur web • les NPM • la communauté

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

GRUNT

Slide 48

Slide 48 text

Rafraîchis automatiquement la page du navigateur des appareils grunt-browser_sync

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Mets à jour le FTP grunt-ftpush

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Analyse des erreurs dans le CSS grunt-csslint

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Indente parfaitement tous les fichiers JS grunt-jsbeautifier

Slide 55

Slide 55 text

Analyse des erreurs dans le JS grunt-jshint

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Analyse des erreurs dans le HTML grunt-htmlhint

Slide 58

Slide 58 text

Crée un serveur grunt-server

Slide 59

Slide 59 text

Optimise le poids des images grunt-imagemin

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

MODE DEVELOPEMENT

Slide 62

Slide 62 text

Sync Compass Express Open Browser_sync Notify Watch

Slide 63

Slide 63 text

APERÇU MODE WATCH

Slide 64

Slide 64 text

Fichier modifié Update dossiers Réinjecte dans la page JS modifié Beautifier JSlint SCSS modifié Compass Legacssy

Slide 65

Slide 65 text

MODE BUILD

Slide 66

Slide 66 text

Modernizr Sync Compass image_min jade clean htmlhint ftpush

Slide 67

Slide 67 text

MODE CSS, IMG, INSTALL, TEST…

Slide 68

Slide 68 text

Pas mal !... Mais c’est pas tout

Slide 69

Slide 69 text

BOWER

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

GRUNT + BOWER =

Slide 72

Slide 72 text

C’est pas fini…

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

- app - data - node_modules (pas sur svn) - config - tasks - public - test

Slide 75

Slide 75 text

- app controllers fonts models sass scripts views

Slide 76

Slide 76 text

- public fonts html images scripts styles

Slide 77

Slide 77 text

Base de données noSQL

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

Possibilités • Tester + avant intégration back • Validation des formulaires • Tests ajax (web service) • Se loguer sur le site • Multilangue (+ tests ltr et rtl)

Slide 80

Slide 80 text

Optimisations performance

Slide 81

Slide 81 text

La performance n’est pas seulement un problème backend !

Slide 82

Slide 82 text

• Concaténation • Minification • Nombre de requêtes HTTP • Poids des images, sprites, lazy loading • Asynchrone • Icône sous forme de webfont • Local storage (moins de cookies) • Pas de redirection (problèmes avec les « tags » statistiques) • …

Slide 83

Slide 83 text

Ce que l’on doit faire prochainement…

Slide 84

Slide 84 text

• Documentation front précise et détaillé (tous les projets) • Développer la base de donnée • Mettre en place RequireJS • Système de templating JS (Backbone…)

Slide 85

Slide 85 text

I have a dream… j’espère que vous le partagerez aussi

Slide 86

Slide 86 text

Construire un « frontdesk » (le terminer)

Slide 87

Slide 87 text

- Tasks manager - Chat (websocket) - Checklist fichiers debug - Error list (CSSlint & JSHint) - Génération template - Barre d’outils - ...

Slide 88

Slide 88 text

Développer et automatiser tous les tests

Slide 89

Slide 89 text

Construire notre propre framework adaptable et « autonome »

Slide 90

Slide 90 text

=> Créer des modules automatiquement

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

Développer des portails qui deviennent des références !

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

Rendre tout le monde plus heureux !

Slide 95

Slide 95 text

• Moins de bugs à corriger • Moins de stress et de rushs • Documentation maintenable et évolutive • Plus de temps pour vraiment développer (jeux, nouveaux modules…) • Lancer des plateformes en 3x moins de temps • Gagner plus d’argent ! (pour Prox)  • …

Slide 96

Slide 96 text

Mèsi ! Obrigado ! Thank you ! Merci !