Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Industrialisation front-end: introduction

Jean-François Lépine
February 19, 2014
Programming
0
230

Industrialisation front-end: introduction

Un introduction aux pratiques d'industrialisation front-end, à l'occasion d'un Meetup JavaScript

Jean-François Lépine

February 19, 2014
Tweet

More Decks by Jean-François Lépine

See All by Jean-François Lépine
Concevoir une architecture pilotée par le métier
halleck
0
460
Outils et pratiques : tester une application web moderne
halleck
1
430
Quand le besoin métier pilote l'architecture applicative
halleck
0
290
Symfony2 : un framework orienté Domain Driven Design ?
halleck
2
940
Développer un projet fonctionnellement complexe
halleck
0
280
Le Mutation Testing
halleck
0
210
Introduction au développement piloté par le comportement avec Behat
halleck
1
300
Industrialiser le contrat en PHP
halleck
2
210

Other Decks in Programming

See All in Programming
RubyLSPのマルチバイト文字対応
notfounds
0
120
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
Jakarta EE meets AI
ivargrimstad
0
260
イマのCSSでできる
インタラクション最前線 + CSS最新情報
clockmaker
3
350
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
Remix on Hono on Cloudflare Workers
yusukebe
1
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
260
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
CSC509 Lecture 11
javiergs
PRO
0
180
最新TCAキャッチアップ
0si43
0
200

Featured

See All Featured
A better future with KSS
kneath
238
17k
What's in a price? How to price your products and services
michaelherold
243
12k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
How to Ace a Technical Interview
jacobian
276
23k
Building Adaptive Systems
keathley
38
2.3k
Adopting Sorbet at Scale
ufuk
73
9.1k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building Applications with DynamoDB
mza
90
6.1k
Bash Introduction
62gerente
608
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Ruby is Unlike a Banana
tanoku
97
11k

Transcript

  1. Industrialisation Front-end ? Encore un gros mot ! @Halleck45

  2. Développez CSS JavaScript HTML IDE Browser

  3. IDE FileWatchers, extension navigateur, relecteurs...

  4. Réduisez La quantité de code à écrire

  5. Préprocesseurs CSS Programmation CSS : variables, mixins...

  6. Qui a encore besoin d'ouvrir des balises ? #page>div.logo+ul#navigation>li*5>a{Item $}

    <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>

  7. Limitez Vos actions

  8. Live reload Ctrl + S

  9. Autrefois Aller sur le site de jQuery Télécharger la librairie

    Copier les fichiers Coller dans le projet Mettre à jour le tag HTML

  10. Aujourd'hui > npm install bower grunt­bower­install > bower install jquery#1.11

    ­­save > grunt bower install

  11. grunt Automatise les tâches répétitives

  12. grunt-responsive-image Crée automatiquement plusieurs résolutions de chaque image À utiliser

    avec srcset-polyfill, Imager.js...

  13. grunt-contrib-imagemin Compresse chaque image (JPG, PNG, GIF...)

  14. Générez Votre code

  15. > yo [?] What would you like to do ?

    >run the angular generator >run the Mocha generator >run the Node generator >run the webapp generator >run the bog generator >run the jquery generator ...

  16. 473 générateurs !

  17. Yeoman Web app generator

  18. Utilisez Un framework

  19. Faites votre marché

  20. Implémentations TodoMVC

  21. Passez au web déclaratif <body> <h1>My tasks</h1> <sorters> <sort key="name">by

    name</sort> <sort key="date">by date</sort> </sorters> <tasks /> </body>

  22. Publiez Et optimisez vos ressources

  23. Créée une version de production de votre projet > grunt

    build

  24. grunt-uncss Supprime le CSS inutilisé Twitter Bootstrap + jquery-ui +

    plugins jQuery + css de l'application = 168 Ko

  25. grunt-contrib-uglify Minifie le JavaScript

  26. grunt-contrib-concat Fusionne les fichiers JavaScript

  27. Testez Votre projet

  28. Détectez Les anomalies

  29. var assert = require("assert") describe('Array', function(){ describe('#indexOf()', function(){ it('should return

    ­1 when the value is not present', function(){ assert.equal(­1, [1,2,3].indexOf(5)); assert.equal(­1, [1,2,3].indexOf(0)); }) }) }) Une syntaxe de tests... Pour tous !

  30. Multi supports Navigation synchronisée Clics et scrolls synchronisés Captures d'écran

    Live reload Adobe edge inspect Grunt live reload Ghostlab Saucelabs ...

  31. Visualisez Font des captures d'écran, vous indiquent les différences PhantomCSS,

    Huxley, Wraith...

  32. En bref... 1. L'écosystème JavaScript est riche 2. Un bon

    développeur boit un café pendant que ses robots travaillent ! 3. Un bon manager industrialise son workflow de production

  33. Merci Des questions ? @Halleck45