the front end developers toolkit
TRANSCRIPT
© 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
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.
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
CSS Compilation - SASS
Sass Provide us with many features to extend CSS:
Variables
Mixins
Nested Rules
Operators
Functions
Inheritance
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
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.
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.
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