One of the things I enjoy in front-end development is the variety of tools we have access to. It’s like every day some new framework or a library shows up, or a brand new approach gets found. Here I’ll try to give my perspective on the trends in front-end and also share my personal favourite pathways.
The newest Ecma standard is ES6 (aka ES2015). Ecma stands for European Computer Manufacturers Association, making the notion just a little counterintuitive these days. Released in 2015, ES6 had a lot of innovative features and because of that, the upcoming ES2016 is a little less shiny.
“committee of very smart people”.
Those people are representing the largest and most influential companies in the internet industry today. The best developers of Google, Mozilla, Intel and so on are among them.
CoffeeScript also took a lot from EcmaScript but has some syntactic sugar to it. It has similarity with Ruby and many times a front-end in CoffeeScript has a back-end in Ruby.
Front-end incorporates a lot of frameworks, might be too much, because every front-end developer either tried or have written their own framework. The top 4 are:
They have their pros and cons and it can be arguable that those are even frameworks, not libraries. Some say that it is better to come up with your own framework composed of different type of libraries. I wouldn’t be so sure, because it’s just nice to have some integrity at times.
Perhaps the most common ones are:
Those are “gatherers”. Gulp is like “gulp for air” after Grunt. Honestly, I don’t know how bad Grunt is, I’ve only used Gulp. So here are the most common tasks for task manager:
gulp-minify-css — compresses css
gulp-uglify — compresses js
gulp-concat — unifies files into one
gulp-imagemin — compresses images
gulp-sprite — creates image sprites
gulp-gzip — creates gzip archives
gulp-svgmin — minifies svg files
gulp-sass — sass preprocessor
That’s a lot of different plug-ins. The tasks can be performed simultaneously which makes the front faster and more convenient.
I don’t like CSS.
It is lame with no variables, no functions, but has a lot of copy/paste. So again we need preprocessors to make CSS somewhat language-looking. The CSS preprocessors are:
- SASS (SCSS)
They are pretty much the same, both tweak CSS, the only difference is in the way they start in some modes.
I listed the following CSS frameworks:
- ZURB Foundation
In front-end, some libraries can work as frameworks when satisfying the particular need. If you are developing web apps, take a look at plenty of ready-to-use Bootstrap solutions from Twitter Inc., and extremely detailed BEM methodology of style forming developed by Yandex.
The usage of latest technologies in front-building helps get rid of the functions.js file which consists of huge amount of untestable functions that look like Spaghetti code.
And those are present on ⅓ of all websites. Also, you can omit one large or several conflicting CSS files and make something as neat as this:
There is a module, components with their own controllers, templates and styles. This module can be compressed and distributed via Amazon services nice and fast. And I am not even mentioning the sheer pleasure of developing in such a way.