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.
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.
Twelve years later, the web continues to excite me