Frontend Operations
-
Upload
philippe-antoine -
Category
Technology
-
view
642 -
download
0
Transcript of 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