advertisement

Industrialisation Front-end - introduction

57 %
43 %
advertisement
Information about Industrialisation Front-end - introduction
Technology

Published on February 19, 2014

Author: halleck45

Source: slideshare.net

Description

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

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

CSS JavaScript HTML IDE Browser Développez

FileWatchers, extension navigateur, relecteurs... IDE

Réduisez La quantité de code à écrire

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

#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> Qui a encore besoin d'ouvrir des balises ?

Limitez Vos actions

Ctrl + S Live reload

Aller sur le site de jQuery Télécharger la librairie Copier les fichiers Coller dans le projet Mettre à jour le tag HTML Autrefois

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

grunt Automatise les tâches répétitives

grunt-responsive-image Crée automatiquement plusieurs résolutions de chaque image À utiliser avec srcset-polyfill, Imager.js...

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

Générez Votre code

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

473 générateurs !

Yeoman Web app generator

Utilisez Un framework

Faites votre marché

Implémentations TodoMVC

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> 

Publiez Et optimisez vos ressources

> grunt build Créée une version de production de votre projet

grunt-uncss Supprime le CSS inutilisé Twitter Bootstrap + jquery-ui + plugins jQuery + css de l'application = 168 Ko

grunt-contrib-uglify Minifie le JavaScript

grunt-contrib-concat Fusionne les fichiers JavaScript

Testez Votre projet

Détectez Les anomalies

Une syntaxe de tests... Pour tous ! 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));     })   }) })

Multi supports Navigation synchronisée Clics et scrolls synchronisés Captures d'écran Live reload Adobe edge inspect Grunt live reload Ghostlab Saucelabs ...

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

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

Merci Des questions ? @Halleck45

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Industrialisation front-end: introduction // Speaker Deck

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

Industrialisation Front-end - introduction - Technology

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

Presentations by Jean-François Lépine // Speaker Deck

Industrialisation front-end: introduction. Feb 19, 2014 by Jean-François Lépine. Symfony2 : un framework orienté Domain Driven Design ?
Read more

L’industrialisation du front-end, les frameworks de ...

L’industrialisation du front-end, les frameworks de création d’interfaces CSS JS. ... Pour reprendre la phrase d’introduction sur le site de TB ...
Read more

Industrialisation of Aluminium Foam Technology

Industrialisation of Aluminium Foam Technology ... Introduction Solid metallic foams ... protecting more expensive front end components
Read more

Industrialization in India - scribd.com

Industrialization in India ... 3 Particular Introduction of inclusive growth ... which is also the front end for delivery of services ...
Read more

Perspective: Stage to Process What’s New and NexGen

Perspective: The Stage‐Gate® Idea‐to‐Launch Process ‐ Update, What’s New and NexGen Systems By Robert G. Cooper
Read more

Différence entre le développeur Front-End et le ...

Introduction aux frameworks front-end (Bootstrap, Foundation) fred. WordPress, un Framework PHP ??? alticreation. Effectivement, WordPress n’est pas un ...
Read more

industrialisation - Page 1 - Je Suis Un Blog - Blog d'un ...

... industrialisation [Tuto] ... je vous propose un petit tuto d'introduction à Yeoman. Alors, Yeoman, qu'est ce ... Un développeur Front-end ...
Read more