Un workflow agile et efficace pour le développement front-end par Kévin Pardo

A travers la création de la WebTV Bizeo, je vous propose de découvrir les nouveaux outils disponibles pour les intégrateurs et les développeurs front-end, qui ont pour but de donner une nouvelle dimension à des languages et des processus utilisés par tous. Au programme : frameworks front-end, compilateurs CSS, gestionnaires de librairies, automatisation de tâches, outils de codage, de débuggage, de déploiement et bien d’autres encore !

Transcript

1. Un workflow agile et efficace pour le développement front-end Kevin Pardo • dev/var 9 • 16 avril 2015
2. Introduction bizeo.net
3. Introduction Le terminal
4. Les outils
5. Les outils IDE vs EDITOR
6. Les outils Les frameworks front-end
7. Les outils • Style de base pour tous les éléments HTML • Utilisation de pré-processeurs CSS • Nativement responsive • Installation via CLI Les frameworks front-end
8. Les outils
9. Automatisation
10. Automatisation Gestionnaire de dépendances
11. Automatisation Bower
12. Automatisation • Télécharge automatiquement les fichiers JS et CSS • Génère un fichier bower.json qui liste les dépendances • Facilite le partage de projets • Facilite la mise à jour des dépendances Bower
13. Automatisation Task runner
14. Automatisation Grunt
15. Automatisation • Automatise l’”⁹execution de tâches comme : • Vérification de la synthaxe des fichiers SCSS et JS • Compilation des fichiers SCSS via compass • Concataination des fichiers CSS et JS • Minification des fichiers CSS et JS • Export dans un dossier de distribution • Upload FTP • Notification • Rafraichissement du navigateur… Grunt
16. Workflow • Choisir un éditeur adapté • Utiliser le terminal • Utiliser un framework front-end • Utiliser un gestionnaire de dépendances • Utiliser un task-runner qui : • Vérifie la synthaxe • Donne des infos pour le débuggage • Mimise le code • Concataine les fichiers • Exporte vers un dossier de distribution • Rafraichis le navigateur • Prépare le café ! (beta)
17. @kevinpardo