How the world of front-end development changed in just three years

Three years ago I worked on a big Angular project, which took like six months to finish. Nowadays I only maintain this project and maybe add a few small features every couple of months. The last time when I made some changes, I realised how massive the shift between 2015 and 2018 is. Things in the front-end world move fast, so often there is no time to migrate.

Angular to React

Three years ago everyone was using Angular, and it was the framework that changed the way we think about client-side web applications. It added so many new concepts and features, but after that React came, and we had to re-think everything again. From components model ( I know, it kind of exists in Angular as directives), virtual-dom, one-direction data binding. React set new rules and ideas which even the current version of Angular follows.

ES5 to ES 2015

The long-awaited 6th version of JS arrived in 2015 and brought so many new features like classes, promises, generators, the list is enormous and took a long time to learn and adopt them in practice. Some of the features were influenced by people who come from other languages and platforms.

OOP to Functional programming

Somehow React, and ES2015 enforced functional programming, and we started to think about UI as a function of current application state, we begin to write small pure functions as components, trying to isolate side effects and use immutable data structures. ES2015 brought classes but also arrow functions; we prefer to compose functions instead of extending classes.

From MV* to Components and Redux

As I mentioned early, React introduced to the masses components architecture, together with functional programming and uni-directional data-flow. Redux also changed the way we think about the application state. Instead of having different Angular services with handler data, we have a single source of truth. Redux made everything much simpler and easier to maintain and debug. The pattern is so powerful that we can see in other JS frameworks and even languages and platforms to adopt it: such as Swift and Java.

New languages

As the web became the largest and most influential platform in the world, more and more developers started to build for it. And we all know that the only language on the web is JavaScript, which became the target language.

Many new languages were born to improve the developer’s experience since not all developers, understandably, like JavaScript. Microsoft created TypeScript; Facebook introduced FlowType and ReasonML and also hipster languages such as Elm and PureScript took a lot of attraction. That led us to vibrant and different developer experiences, including typed and pure functional languages which compiled to JavaScript.

From Gulp to Webpack

In 2015 we used gulp to automate some common task as compiling Sass, but in 2018 with tools like webpack, we do much more: js transpilers, code-splitting, tree-shaking, assets optimising and even machine learning to optimise code-splitting efficiently. We have so much power, so the code we write and the code we output is sometimes non-identical.

And back to my 2015 project which:

• doesn’t have transpiler;
• gulp only minify my JS and compile SCSS files;
• all my data comes from different services, and I can’t use awesome redux-devtools to debug it when things go wrong;
• have to remind my self not to use const and arrow functions otherwise IE11 users will suffer because there is no babel.

Only 36 months but today it feels like living in an entirely different world. I even don’t want to mention all web platform APIs which arrived in this period. And to compare, Google Chrome released 23 versions in that time, Firefox 21, Edge was still in beta.

On the other hand, I often hear people complain about slow introduction and implementation of new browser or JavaScript features, but when we look back, we can see that this is clearly not the case.

Twelve years later, the web continues to excite me