2015 nouveaux outilsdevweb devoxxfr

1. @YourTwitterHandle#YourSessionHashtag
Les nouveaux Outils du
Développeur Web
@PhilippeAntoine
Xebia
Agile Fullstack Developer

2. @PhilippeAntoine#WebToolbox
Slides disponibles:
http://www.slideshare.net/philippeantoine
Checklist
• Warmup & prototypes
• Editeurs et extensions
• Styleguide
• Strategie de tests
• Outiller le build
• Performance

3. @PhilippeAntoine#WebToolbox
1. Elevator Pitch / Vision Box
Papier & crayon
2. Personas
Google Presentation
3. Métriques de succès
Pirate Metrics
Warmup du Projet

4. @PhilippeAntoine#WebToolbox
• Un éditeur rapide
• Scaffolder avec Emmet
• live-server
• Github Pages
• Communiquer
Prototyper en 10’

5. @PhilippeAntoine#WebToolbox
1. git-plus
2. linter-jscs
3. emmet
4. js-refactor
5. atom-grunt-configs
6. autocomplete-plus
7. Seti theme
8. atom-beautify
9. git-control
10. merge-conflicts
Atom.io

6. @PhilippeAntoine#WebToolbox
Postman
Tester son API

7. @PhilippeAntoine#WebToolbox
• uifaces.com & randomuser.me
• <img src="http://placehold.it/350x150">
• blokkfont.com & loripsum.net
• fontello.com & svgicons.sparkk.fr
•
• json-generator.com
Tricher sur le contenu
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed
in rebus apertissimis nimium
longi sumus. Quid iudicant
sensus? Duo Reges: constructio
interrete. Traditur, inquit, ab
Epicuro ratio neglegendi
doloris.

8. @PhilippeAntoine#WebToolbox
• codyhouse.co & tympanus.net/codrops
• Google Web Starter Kit
Labo: Fast UX

9. @PhilippeAntoine#WebToolbox
RWD: Les Breakpoints

10. @PhilippeAntoine#WebToolbox
Preprocesseur: Sass

11. @PhilippeAntoine#WebToolbox
• viewport resizer
• loadtime breakdown
• CSS Layout Debugger
• Perfmap
Bookmarklets

12. @PhilippeAntoine#WebToolbox
Scorecard: librairies
• packagequality.com
• libscore.com
• javascripting.com
• cssdb.co
Scorecard

13. @PhilippeAntoine#WebToolbox
• BuiltWith Technology Profiler
• Requirify
•Web Developer Checklist
• Screencastify
• Pesticide.io
Chrome Devtools
• Edit this cookie
• Pixel Perfect
• Junkfill
• SEOQuake
• Bootstrap Grid

14. @PhilippeAntoine#WebToolbox
Browser trends: les bonnes cibles
Statcounter global stats ou depuis vos logs

15. @PhilippeAntoine#WebToolbox
Browser lab
whichbrowser.net

16. @PhilippeAntoine#WebToolbox
Versus
Strategie de tests
Next: Smoke Tests & tests delta

17. @PhilippeAntoine#WebToolbox
http://codyhouse.co/demo/style-guide-template/index.html
Styleguide

18. @PhilippeAntoine#WebToolbox
http://blog.vanamco.com/ghostlab-2-is-here/
http://www.wearejh.com/news/browsersync-2-0/
http://localtunnel.me/
https://ngrok.com/
Live Reload / Browser Sync

19. @PhilippeAntoine#WebToolbox
• Phantom.css
• StyleStats.com
• Critical / Penthouse
• galenframework.com
• helium CSS
• JSCS
Asset Pipeline
Webpack + Amok.js ?

20. @PhilippeAntoine#WebToolbox
Tests Cross-browser
http://modern.ie
browserstack.com

21. @PhilippeAntoine#WebToolbox
“Chez moi ca marche”

22. @PhilippeAntoine#WebToolbox
Demo Product Owner

23. @PhilippeAntoine#WebToolbox
Bonnes Pratiques de Perf
http://blog.xebia.fr/2015/01/12/mesurer-la-performance-de-vos-pages-web-avec-sitespeed-io/

24. @PhilippeAntoine#WebToolbox
Qualite de code
• Plato.js
• moniteur
• css-perf

25. @PhilippeAntoine#WebToolbox
• http://validator.w3.org/mobile/
• http://ready.mobi/
• https://securityheaders.io/
• https://www.ssllabs.com/
• cssstats.com
• csslint.net
Outils en ligne

26. @PhilippeAntoine#WebToolbox
Scenarios: BAU / Reportage Capital / Stanley
https://github.com/jsebfranck/gatling-bootstrap
Pre-Prod: Stress Tests
Autres outils: vegeta ou wbench

27. @PhilippeAntoine#WebToolbox
Optimizing Performance
Audit Perf: 1000/100/6 Performance Model
Paul Irish Audit Exemple

28. @PhilippeAntoine#WebToolbox
Chrome DevTools
Yellow labs (phantomas)
Analyse de performance
Speedcurve

29. @PhilippeAntoine#WebToolbox
Web Page Test

30. @PhilippeAntoine#WebToolbox
• Network filter: domain: *.addthis.com
• Event Listener: scroll
• Audit Unused CSS
• mime-type:*
• Hard reload
Exemple: devoxx.fr

31. @PhilippeAntoine#WebToolbox
Conclusion
Slides disponibles:
http://www.slideshare.net/philippeantoine
• Warmup & prototypes
• Editeurs et extensions
• Styleguide
• Strategie de tests
• Outiller le build
• Performance

32. @PhilippeAntoine#WebToolbox
Steve Souders @Souders
Paul Irish @paul_irish
Addy Osmani @addyosmani
Ilya Grigorik @igrigorik
Paul Lewis @aerotwist
Boris Smus @borismus
Philippe Antoine @PhilippeAntoine
Follow Friday