front end workflow with yeoman

Frond-end Workflow with

YEOMAN

Hassan Hafez

4th year CSED student

/HassanHafezzz /in/HassanHafezz @HassanHafezz

Designer/ Front-end developer

CAT Reloaded member since 2014

The average front-end workflow .

SETUP DEVELOP BUILD

Setup project structure Watch JS Watch CSS Unit testing

Download template

Abstractions Watch Jade/ Haml

Watch Coffee scriptWatch Sass/ Less/ Stylus

Compile everythings

Download libraries LiveReload changes Minify and concatenateCSS/ JS

Download frameworks JS/ CSS Linting for potential errors.

Optimize imagesTest performance

This process we repeat every time we’re working on a new project

SETUP DEVELOP BUILD

Setup project structure Watch JS Watch CSS Unit testing

Download template

Abstractions Watch Jade/ Haml

Watch Coffee scriptWatch Sass/ Less/ Stylus

Compile everythings

Download libraries LiveReload changes Minify and concatenateCSS/ JS

Download frameworks JS/ CSS Linting for potential errors.

Optimize imagesTest performance

This process we repeat every time we’re working on a new project

So it can be hard to start a project .

As you can get stuck or even waste time in Repetitive tasks like:

• Create your project structure. • Searching for best practice. • Setting up building scripts. • Managing dependencies… etc.

Say hello to YEOMAN !

introduction

Yeoman is an open source client-side development stack, consisting of tools and frameworks intended to help developers quickly kickstart and build high quality web applications.Yeoman runs as a command-line interface written in Node.js.Yeoman was released at Google I/O 2012.

YEOMAN

Yeoman combines several functions into one place, such as : • Generating a starter template • Managing dependencies • Running unit tests • Providing a local development server • Optimizing production code for deployment and much more .

YEOMAN

Yeoman workflow .

The Yeoman workflow consist of three types of tools for improving your productivity and satisfaction when building a web app . All three of these tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective.

Yeoman workflow

Yeoman workflow

The scaffolding tool (yo)

The build tool (Grunt, Gulp, etc)

The package manager (like Bower and npm)

1- YO : Scaffolds out a new application (setup the structure /skeleton for the app).

2- The Build System is used to build, preview and test your project. Grunt and Gulp are two popular options.

3- The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts. Bower and npm are two popular options.

Yeoman workflow

Grunt is a javascript task runner which help you run repetitive tasks like : Linting ,Compiling, Minification, Testing, Documentation and more ..Grunt Has a huge ecosystem with more than 5000 plugins (tasks) now available.

when working with grunt there are 2 files you need to worry about : package.json & gruntfile.js

gruntjs.com

This file is used to store metadata for your project like name, version , description and so on . It also contains a list of Grunt plugins that you use.

package.json

Gruntfile is used to configure or define tasks and load Grunt plugins.

The Gruntfile

Bower is a package manager for the web .

Nowadays websites are made of lots of things like frameworks, libraries, assets, utilities, and so on.

Instead of you going to the site of each package .. download the latest stable version .. copy it to your project.. wire it in with scripts tags, Bower do all these things for you. when working with bower you need to worry about one file : bower.json

Bower

bower.io

Packages are defined by a manifest file bower.json. It contains a list of The packages that are required by your application

bower.json

If you aren't familiar with Grunt or Bower and you feel that there is too much to do, yeoman is your gateway for this magical world.

YO will :

Scaffold out the project

Prescribe helpful grunt tasks depending on the type of app you’re building.

Automatically install dependencies you need.

YO

Let’s install YEOMAN !

installation

To Install Yeoman, you will need to haveNode.js + npm in your system .

Node & npm ?

We all know that Javascript runs in the browser, and it only can access web pages, but this changed in 2009 with the introduce of node.js.

The makers of node.js took javascript and give it an environment that allows javascript to run into our machine, They took google chrome V8 engine (chrome’s javascript engine) and they make it run into your machine. node.js : is a platform or an environment that let us run Javascript in our system/machine rather than the browser.

nodejs.org

Developers intend to use Node.js in2 ways

1- Build Utilities : Utilities that helps you build front-end apps, Utilities like yeoman, gulp ,grunt ,bower and so on .

2- Build Web Server : Back-end (server side) development with node.

npm (node package manager): is bundled and installed automatically with the environment , npm runs through the command line It also allows users to install Node.js applications, packages or utilities that are available on the npm registry.

npmjs.com

To download node.js you go to nodejs.org/download/ download & install it on your system. Once you install it ,you’ll have node & npm in your system. You can make sure that everything is alright, by checking the version of node & npm, go to the terminal and run :

>> node -v && npm -v

now you can install the Yeoman toolset, make sure you install it globally (-g) :

>> npm install -g yo bower grunt-cli

Install Yeoman

Install Yeoman

Yeoman Generators

The idea behind a generator can be simplified to “sharing your ideas and best practices with others”. you can generate files for your web app based on your specific configuration requests. Generators aren't limited to front-end. There are over 3000+ generators now available.

yeoman.io/generators

Install Generators

you can search generators from Yeoman interactive menu, run :

>> yo

Then select install generator.

Type the generator you want to search , and select it.

Using Yo :

Install Generators

Install Generators

Install Generators

Install Generators

You can also install the generator directly using npm command.

>> npm install -g generator-angular

After the generator is installed, you can run it anytime.

2- Using npm :

Install Generators

Let’s Scaffold a AngularJS app with YEOMAN !

demo

AngularJS appCreate new folder : >> mkdir yeoman-angular && cd yeoman-angular

This folder is where the generator will place your scaffolded project files.

You can access the generators within the Yeoman menu >> yo

If you have a few generators installed, you'll be able to choose from them.

Select AngularJS app generator which we installed.

AngularJS app

AngularJS app

Configure AngularJS app

AngularJS app

AngularJS app

AngularJS app

You can also run generators directly without using the interactive menu, like so:

>> yo angular

Preview

>> grunt serve

ReferencesAutomating Your Front-end Workflow with Yeoman 1.0 (Addy Osmani)

http://yeoman.io/codelab/index.html

http://yeoman.io/learning/index.html

The

END !

thank you all