Frontend Operations

1. FRONT END OPERATIONS
Industrialisez et fluidifiez le développement de vos
applications web
@PhilippeAntoine

2. Front-End Ops ? Au dela des
fonctionnalités / Automate everything /
Industrialiser
1. Design
2. Build
3. Test
4. Document
5. Deploy
Présentation des outils AUTOUR
d'Angular 2 ou React. Épisode 2 de la
présentation devoxx 2015 (tout a
changé)
Un point sur la JS Fatigue
FRONTEND OPERATIONS

3. PHASE 1

4. DESIGN
S'appuyer sur une vision et des personas pour définir
votre cible et expérimenter avec des prototypes
VISION BOX PERSONNASBOARD

5. DESIGN: PERSONAS
Outils utilisés:
Surge.sh / Bootstrap v4 / Emmet / Live-server
ADOPT

6. DESIGN: BROWSERLAB ADOPT

7. PHASE 2

8. BUILD: KICKOFF
Choix des libs et Frameworks: MoSCoW Rating
Construction d'un inventaire de composants (Styleguide)
ADOPT
Outils utilisés:
Styleguide.io / SASS / Pesticide.io / Nativeifer

9. BUILD: API
Une couche API légère
Outils utilisés:
Postman / Mockbin / Firebase.com / Nodal.js / Lambdas
ADOPT

10. BUILD: FRIGO
HOLD
Plus de polyfills pour les anciens navigateurs (Respond.
js et SVG): Passage aux Browsers Evergreen

11. PHASE 3

12. TESTS: UNITAIRES
Couvrir la logique metier avec des tests unitaires
Outils utilisés:
Mocha.js / Tape ? / AVA ? / Dredd
ADOPT

13. TESTS: END TO END TRIAL
Smoke Tests: Couvrir le MVP en utilisant
les personas comme jeu de donnée
Outils utilisés:
CodeceptJS / Nightwatch.js / Browserstack

14. TESTS: QUALITÉ
1. Web perf avec Sitespeed.io , Webpagetest, Yellow labs
2. Qualité de code ou audit avec Plato.js
3. Couverture de code avec Codecov.io
4. Regles de nommage avec Hound (ESLint, JSCS, Stylelint)
5. Vulnérabilités avec nsp check ou snyk.io
6. Tests unitaires de CSS quixote ou csste.st ?
7. Accessibilité avec Tota11y (?)
TRIAL

15. TEST: FRIGO
HOLD

16. PHASE 4

17. DOCUMENT
Exemple de documentation d'API générée
TRIAL

18. PHASE 5 DEPLOY

19. DEPLOY & RUN
Checklists, Release notes, Morning checks
ADOPT