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
180

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
410
Outils et pratiques : tester une application web moderne
halleck
1
370
Quand le besoin métier pilote l'architecture applicative
halleck
0
220
Symfony2 : un framework orienté Domain Driven Design ?
halleck
2
860
Développer un projet fonctionnellement complexe
halleck
0
230
Le Mutation Testing
halleck
0
160
Introduction au développement piloté par le comportement avec Behat
halleck
1
250
Industrialiser le contrat en PHP
halleck
2
150

Other Decks in Programming

See All in Programming
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Domain-Driven Transformation
hschwentner
2
1.5k
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
Deep Dive into React Stream/Serialize
mugi_uno
3
740
Open standards for building event-driven applications in the cloud
meteatamel
0
190
Hanami and htmx
bkuhlmann
0
230
AmperとFleetを使ったAndroidアプリ
yoppie
0
270
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
920
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.3k
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
新宿ダンジョンを可視化してみた
satoshi7190
3
420

Featured

See All Featured
The Invisible Customer
myddelton
114
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Done Done
chrislema
178
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Embracing the Ebb and Flow
colly
80
4.2k
Six Lessons from altMBA
skipperchong
22
3k
Building Effective Engineering Teams - LeadDev
addyosmani
32
1.9k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
44k

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