Frontend Operations

FRONT END OPERATIONSIndustrialisez et fluidifiez le développement de vos

applications web

@PhilippeAntoine

Front-End Ops ? Au dela des fonctionnalités / Automate everything / Industrialiser

1. Design2. Build3. Test4. Document5. 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

PHASE 1

DESIGNS'appuyer sur une vision et des personas pour définir votre cible et expérimenter avec des prototypes

VISION BOX PERSONNASBOARD

DESIGN: PERSONAS

Outils utilisés: Surge.sh / Bootstrap v4 / Emmet / Live-server

ADOPT

DESIGN: BROWSERLABADOPT

PHASE 2

BUILD: KICKOFFChoix des libs et Frameworks: MoSCoW Rating Construction d'un inventaire de composants (Styleguide)

ADOPT

Outils utilisés: Styleguide.io / SASS / Pesticide.io / Nativeifer

BUILD: APIUne couche API légère

Outils utilisés: Postman / Mockbin / Firebase.com / Nodal.js / Lambdas

ADOPT

BUILD: FRIGO HOLD

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

PHASE 3

TESTS: UNITAIRESCouvrir la logique metier avec des tests unitaires

Outils utilisés: Mocha.js / Tape ? / AVA ? / Dredd

ADOPT

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

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

TEST: FRIGO HOLD

PHASE 4

DOCUMENTExemple de documentation d'API générée

TRIAL

PHASE 5 DEPLOY

DEPLOY & RUNChecklists, Release notes, Morning checks

ADOPT