Modern Front EndTools & Workflow

Adir Amsalem

We all want to…• Have an effective workflow• Be productive• Automate repetitive tasks• Easily manage our assets and dependencies

• Do a better job and make our life easier

But how can we do that?Bootstrap

GruntLESS

CSS

JavaScript

DOMAJAX

AngularJS

Highcharts

SASS

Mobile

Deployment

PerformanceGit Bower

jQuery Gulp

HTML5

Testing

SEOReact

MVC

Preprocessors

Agenda• Yeoman• Bower• Grunt• SASS• AngularJS• Popular libraries• Testing - unit & e2e

Let’s start!

The web’s scaffolding tool for modern webapps.

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.npm install -g yonpm install -g generator-angularyo angular QuickInsight

yo angular:controller mainyo angular:service usersyo angular:directive alert

Bower

A package manager for the web.

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

npm install -g bowerbower search angularbower install angular --save

git clone https://github.com/...it.gitbower install

Bower

The JavaScript task runner.

The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.

npm install -g grunt-clinpm install grunt --save-dev

grunt servegrunt testgrunt build

Grunt

CSS with superpowers.

Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

HTML enhanced for web apps.

• MVVM – Model View ViewModel (or just MVC/MV*)• HTML-based templates• Concepts:

• Two-way Data Binding• Dependency Injection

• Views• Services • Controllers• Directives • Filters

• Modules

Istanbul

Demo Time!

Thanks!

Adir Amsalem adiramsalem@gmail.com