@YourTwitterHandle#YourSessionHashtag

Les nouveaux Outils du Développeur Web

@PhilippeAntoine

Xebia

Agile Fullstack Developer

@PhilippeAntoine#WebToolbox

Slides disponibles:

http://www.slideshare.net/philippeantoine

Checklist• Warmup & prototypes

• Editeurs et extensions

• Styleguide

• Strategie de tests

• Outiller le build

• Performance

@PhilippeAntoine#WebToolbox

1. Elevator Pitch / Vision Box Papier & crayon

2. PersonasGoogle Presentation

3. Métriques de succès Pirate Metrics

Warmup du Projet

@PhilippeAntoine#WebToolbox

• Un éditeur rapide

• Scaffolder avec Emmet

• live-server

• Github Pages

• Communiquer

Prototyper en 10’

@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

@PhilippeAntoine#WebToolbox

Postman

Tester son API

@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.

@PhilippeAntoine#WebToolbox

• codyhouse.co & tympanus.net/codrops

• Google Web Starter Kit

Labo: Fast UX

@PhilippeAntoine#WebToolbox

RWD: Les Breakpoints

@PhilippeAntoine#WebToolbox

Preprocesseur: Sass

@PhilippeAntoine#WebToolbox

• viewport resizer

• loadtime breakdown

• CSS Layout Debugger

• Perfmap

Bookmarklets

@PhilippeAntoine#WebToolbox

Scorecard: librairies• packagequality.com

• libscore.com

• javascripting.com

• cssdb.co

Scorecard

@PhilippeAntoine#WebToolbox

• BuiltWith Technology Profiler

• Requirify

• Web Developer Checklist

• Screencastify

• Pesticide.io

Chrome Devtools• Edit this cookie

• Pixel Perfect

• Junkfill

• SEOQuake

• Bootstrap Grid

@PhilippeAntoine#WebToolbox

Browser trends: les bonnes cibles

Statcounter global stats ou depuis vos logs

@PhilippeAntoine#WebToolbox

Browser lab

whichbrowser.net

@PhilippeAntoine#WebToolbox

Versus

Strategie de tests

Next: Smoke Tests & tests delta

@PhilippeAntoine#WebToolbox

http://codyhouse.co/demo/style-guide-template/index.html

Styleguide

@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

@PhilippeAntoine#WebToolbox

• Phantom.css

• StyleStats.com

• Critical / Penthouse

• galenframework.com

• helium CSS

• JSCS

Asset Pipeline

Webpack + Amok.js ?

@PhilippeAntoine#WebToolbox

Tests Cross-browserhttp://modern.ie

browserstack.com

@PhilippeAntoine#WebToolbox

“Chez moi ca marche”

@PhilippeAntoine#WebToolbox

Demo Product Owner

@PhilippeAntoine#WebToolbox

Bonnes Pratiques de Perf

http://blog.xebia.fr/2015/01/12/mesurer-la-performance-de-vos-pages-web-avec-sitespeed-io/

@PhilippeAntoine#WebToolbox

Qualite de code

• Plato.js

• moniteur

• css-perf

@PhilippeAntoine#WebToolbox

• http://validator.w3.org/mobile/

• http://ready.mobi/

• https://securityheaders.io/

• https://www.ssllabs.com/

• cssstats.com

• csslint.net

Outils en ligne

@PhilippeAntoine#WebToolbox

Scenarios: BAU / Reportage Capital / Stanley

https://github.com/jsebfranck/gatling-bootstrap

Pre-Prod: Stress Tests

Autres outils: vegeta ou wbench

@PhilippeAntoine#WebToolbox

Optimizing Performance

Audit Perf: 1000/100/6 Performance Model

Paul Irish Audit Exemple

@PhilippeAntoine#WebToolbox

Chrome DevTools

Yellow labs (phantomas)

Analyse de performance

Speedcurve

@PhilippeAntoine#WebToolbox

Web Page Test

@PhilippeAntoine#WebToolbox

• Network filter: domain: *.addthis.com

• Event Listener: scroll

• Audit Unused CSS

• mime-type:*

• Hard reload

Exemple: devoxx.fr

@PhilippeAntoine#WebToolbox

Conclusion

Slides disponibles:

http://www.slideshare.net/philippeantoine

• Warmup & prototypes

• Editeurs et extensions

• Styleguide

• Strategie de tests

• Outiller le build

• Performance

@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