Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend Operations

920 views

Published on

Frontend Operations

Published in: Technology
  • Be the first to comment

Frontend Operations

  1. 1. FRONT END OPERATIONS Industrialisez et fluidifiez le développement de vos applications web @PhilippeAntoine
  2. 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. 3. PHASE 1
  4. 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. 5. DESIGN: PERSONAS Outils utilisés: Surge.sh / Bootstrap v4 / Emmet / Live-server ADOPT
  6. 6. DESIGN: BROWSERLAB ADOPT
  7. 7. PHASE 2
  8. 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. 9. BUILD: API Une couche API légère Outils utilisés: Postman / Mockbin / Firebase.com / Nodal.js / Lambdas ADOPT
  10. 10. BUILD: FRIGO HOLD Plus de polyfills pour les anciens navigateurs (Respond. js et SVG): Passage aux Browsers Evergreen
  11. 11. PHASE 3
  12. 12. TESTS: UNITAIRES Couvrir la logique metier avec des tests unitaires Outils utilisés: Mocha.js / Tape ? / AVA ? / Dredd ADOPT
  13. 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. 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. 15. TEST: FRIGO HOLD
  16. 16. PHASE 4
  17. 17. DOCUMENT Exemple de documentation d'API générée TRIAL
  18. 18. PHASE 5 DEPLOY
  19. 19. DEPLOY & RUN Checklists, Release notes, Morning checks ADOPT

×