Yeoman

50 %
50 %
Information about Yeoman
Technology

Published on February 19, 2014

Author: arif_iq

Source: slideshare.net

Description

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. https://github.com/mdarif https://twitter.com/#!/arif_iq http://in.linkedin.com/in/mohdarif www.mohammedarif.com 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

NEW WAY? 7

YEOMAN 8

9

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” http://yeoman.io/whyyeoman.html 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

14

GRUNT - Build, preview and test with Grunt Grunt is a task-based command line build tool for JavaScript projects. http://www.slideshare.net/arif_iq/grunt-22465541 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. https://github.com/addyosmani/grunt-uncss 17

GRUNT TIPS Build directly from DevTools grunt-devtools extension https://github.com/vladikoff/grunt-devtools 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 https://egghead.io/lessons/bower-introduction-and-setup 23

SHOWTIME 24

Q&A

Thank You! 26

Add a comment

Related presentations

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

YeoMen

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

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