The Front End Developers Toolkit

© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

SELA DEVELOPER PRACTICE

Nir Noy

Consultant, Web, Sela@noynir

The Frontend Developers' Toolkit

December 20-24, 2015

Is this javascript?Is this CSS?

First Things First…

A Server side javascript runtime for developing Web applications.

Although it’s main purpose is to serve as a backend for web applications, developers quickly adopted it as a quick and easy solution for scripting.

Most of the Front End Dev tools we use today are based on Node.js

Package Managers

BowerOptimized for client side.

Requires node.js and Git.

Supports a Flat dependency model.

NPMOriginally made for server side.

Packages are usually wrapped as CommonJS Modules.

Supports nested dependencies.

Demo

Bower & npm

Let’s Build

What else is there besides Code?Javascript & CSS Minification.

Compile to Javascript (Typescript, coffescript, ES6 etc… ).

Bundling.

LESS/SASS to CSS compilation.

CSS Vendor prefixing.

Code Analysis (Linting).

Cache busting and file versioning.

Optimize 3rd party like react and angular.

Testing.

Automation

In order to Handle all of these tasks we need to create an automated and unified workflow that combines them all.

This workflow is our Front End build process and we will use a javascript task runner to create it.

The Most Popular task runners are Grunt and Gulp

Automation – Task Runners

Grunt

Configuration Over Code

File Based

Rich Ecosystem - 4400+ plugins

Automation – Task Runners

Gulp

Code over Configuration

Stream Based

Ecosystem - 1800+ plugins

Automation – Gulp

Gulp has 4 simple APIs

gulp.task

gulp.src

gulp.dest

gulp.watch

Demo

Serving Your Application

CSS Compilation

We have a lot of options to compile CSS, the most popular ones are:

CSS Compilation - SASS

Sass Provide us with many features to extend CSS:

Variables

Mixins

Nested Rules

Operators

Functions

Inheritance

Demo

SASS to CSS compliation

Javascript Next

Many useful features such as classes,Blockscope varaiables and arrow functions are constantly added to the Javascript language standard,

These features are immediately implemented by Browsers Vendor

JS Transpilers Compile Javascript Next (ES6/7) Code to Browsers compatible code.

Javascript Next Compilers

BabbleJS and Traceur are the most common compliers.

Typescript is a typed superset of javascript that also offers good ES6 support

Demo

Gulp Babel

Html injection

Including Javascript and CSS in the HTML can sometimes go wrong when not keeping the right order.

Wiredep - https://www.npmjs.com/package/wiredep

Injects javascript & css installed with bower to the HTML according the bower dependencies json.

Gulp-inject - https://www.npmjs.com/package/gulp-inject

Injects our javascript and css to the HTML.

Demo

Html Injection

Going to Production

When optimizing for faster page loads our main goal is to reduce the number of http requests and size of http responses.

Bundling

There many plugins for bundling with gulp. We will

use gulp-useref .

Minification

CSSO for css minification and optimization.

UglifyJS for javascript minification.

Demo

Production Build

IDE Integration

Webstorm

Built in support for task runners, css compliers, javascript compliers.

Visual Studio 2013

Task runner explorer extension -https://visualstudiogallery…

Package intellisense extension -https://visualstudiogallery...

WebEssentials - http://vswebessentials.com/

IDE Integration

Visual Studio 2015

All of VS 2013 extensions are built in.

WebEssentials - http://vswebessentials.com/

Visual studio code

Built in Support for task runners, css compilers, javascript complier via Typescript.

Sublime

Extendible via package control.

Front End build process is becoming an integral part of every web project.

Javascript task runners are the current standard for running a build process and are supported by every major IDE and code editors.

Every Project holds it’s own challenges that can be overcome with ready made solutions or writing your own custom solution with node.JS

Summary

Thank You

Questions