44 %
56 %
Information about Yeoman

Published on February 19, 2014

Author: arif_iq



Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications.

Automating Front-End Workflow 1

Mohammed Arif A husband, father and a Front End Specialist at Sapient-Nitro.!/arif_iq 2

AGENDA  What is automation?  Why automation?  Old way of doing things  New way?  Yeoman  Grunt  Grunt Tips  Bower  Showtime  Q&A 3

WHAT IS AUTOMATION? The technique of making a process, or a system operate automatically. 4

WHY AUTOMATION? To stay productive! 5

OLD WAY OF DOING THINGS? • • • • Scaffolding Download libraries Download templates Download frameworks • • • • • Watch Sass / Less / Stylus Watch CoffeeScript Watch Jade / Haml LiveReload JS / CSS Linting… 6




YEOMAN - Scaffold, write less with Yo “Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications” 10

YEOMAN - Scaffold, write less with Yo • scaffolding, write less with Yo • dependency management with Bower • Wiring and integration of a number of commonly used grunt tasks • build, preview and test with Grunt • maintained separately • play well together, all part of the Yeoman workflow 11

YEOMAN - Scaffold, write less with Yo $ npm install -g yo 12

YEOMAN - Scaffold, write less with Yo $ yo webapp • • • • • • • • HTML5 Boilerplate Twitter Bootstrap Project Structure Mocha Tests RequireJS (optional) Modernizr (optional) Build process ... 13


GRUNT - Build, preview and test with Grunt Grunt is a task-based command line build tool for JavaScript projects. 15

TASK-BASED? • • • • • • • Unit testing JS linting Concatenating/minifying Image optimization Replace scripts in html files SASS … 16

GRUNT TIPS grunt-uncss Remove unused CSS across your project at build time. 17

GRUNT TIPS Build directly from DevTools grunt-devtools extension 18

Bower 19

BOWER - Manage dependencies with Bower A package manager for the web. 20

BOWER - Manage dependencies with Bower Runs over: • Git • HTTP(s) • Zip • npm 21

BOWER - Manage dependencies with Bower $ bower list $ bower search $ bower search jquery $ bower install $ bower install jquery –save-dev 22

BOWER - Manage dependencies with Bower • maintained by Twitter and the open-source community • configuration in bower.json 23



Thank You! 26

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

The web's scaffolding tool for modern webapps | Yeoman

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive. To do so, we provide a generator ecosystem. A ...
Read more

Yeoman – Wikipedia

Yeoman ([ˈjoʊmən], Pl. yeomen) ist ein in verschiedenen Bedeutungen gebrauchter Begriff aus dem englischen Ständewesen des Mittelalters und der frühen ...
Read more


Hauptsache Anders! YeoMen, die wohl ungewöhnlichste A-cappella-Band Deutschlands.
Read more

Yeoman Warders – Wikipedia

Die Yeoman Warders, vollständig Yeoman Warders of Her Majesty's Royal Palace and Fortress the Tower of London, oft Yeomen Warders, umgangssprachlich ...
Read more

Getting started with Yeoman | Yeoman

Getting started; Tutorial (codelab) Resources; Deployment; FAQ; Support; Yeoman is a generic scaffolding system allowing the creation of any kind of app.
Read more

Yeoman | Define Yeoman at

Yeoman definition, a petty officer in a navy, having chiefly clerical duties in the U.S. Navy. See more.
Read more

Yeoman: So vereinfachst du deinen Frontend-Workflow | t3n

Yeoman oder Grunt? Yeoman kann Webentwicklern als Allzweckwaffe dienen und bietet gerade bei größeren Projekten oder Web-Apps ein enormes Potenzial.
Read more

Yeoman - Wikipedia

A yeoman / ˈ j oʊ m ə n / was a member of a social class in late medieval to early modern England. In early recorded uses, a yeoman was an attendant in ...
Read more

YEOMAN Baumineralien GmbH - Glensanda / Schottland ...

Splitt Lieferant aus Hamburg, Rostock, Wilhelmshaven und Brunsbüttel. Granit aus unserem Steinbrch in Glensanda.
Read more

Kies, Sand, Schotter und Splitt - Holcim Deutschland

Kies, Sand, Schotter, Splitt und Spezialitäten wie Quarzsand und Gabionen kaufen: Unsere Auswahl an Gesteinskörnungen / mineralischen Rohstoffen
Read more