Front-end development has changed slightly over last 10 to 15 years. Javascript has evolved the most among the existing programming languages. It turned away from writing simple logic on websites by using ugly, unstructured code and plugins, and evolved into building completely functional Single Page Applications.
Let’s go on a small journey back in time to see how it used to look in the past and what changes have happened over the last couple of years.
The good old days…
We are in 2006/2007. It’s a time when most 30+ developers started their careers. Javascript was weak and was not taken seriously. Most developers chose backed languages as their main technology to master. Web applications were using reloads every time a user interacted with UI. AJAX was still something new and was used only for updating small elements on the pages. The key player was jQuery, it simplified DOM data manipulations and added a nice wrapper for asynchronous code. Thousands of jQuery plugins were created which were responsible for specific UI interactions such as sliders, carousels, tabs and many more.
The term front-end developer didn’t exist then. People involved in javascript stuff were called web developers. Their responsibility was to turn designs into fully working web pages. Designers worked closely together, they styled using pure CSS without any any compilers and added small portions of JS code to make websites more interactive. Various browsers with different capabilities posed a great challenge as they were implementing different standards. This is the era of many browser tricks and hours spent on Internet Explorer 7 support. Any automation like concatenating and scripts minification were done by back-end technologies and in most cases no one cared about it, ending with a long list of scripts and linked styles in html head section.
JavaScript revolution
A few years later, between 2009-2010 a lot of things happened in the front-end world. Many new key players appeared on the scene. It’s worth mentioning about a few frameworks which made a lot of noise at that time:
- Backbone JS – It was the first attempt to make a 100% javascript application without any annoying reloads. The idea of Models and Collections behind Backbone made web application development more structured and created with well documented and clear boundaries understandable for many developers.
- RequireJS – It was the first solution for module dependency management in JS. It allowed to split a code into multiple files so it could be downloaded on demand in browsers which was a great step into the future.
- Sass and Less compilers became mature enough, which meant no more pure CSS, because NodeJs was a toddler compilers compared to other languages like Ruby, Python or .Net.
- NodeJS – It enabled javascript code to run not only in browsers, it revolutionised front-end development workflow once and for all.
- AngularJS – It was the first angular version, which gained a lot of popularity, and most developers turned to Angular world quickly.
- PhoneGap – It allowed to write html applications which worked inside iOS/Android WebView, it was not perfect and frequently ended with performance issues because of Webview boundaries but enabled to create their own mobile application knowing only html and js.
Naturally, there is much, much more. Javascript stopped being just an additional technology. Companies started to hire “JS Developers.”
It’s a little too fast…
Evolution sped up after 2010. In the following years, thousands of new libraries appeared. Finally, JS Devs had package managers for dependencies. Most users started with bower and slowly turned into NPM packages when nodeJS started to be more mature. No more keeping all dependencies in projects repositories.
In the “good old days” any attempts to make some automation like concatenating files, minification or images optimization needed to be done outside of the JS world. But change was coming…
New task runners started to appear. Most developers began to use Grunt or Gulp for simple automation. Many tasks appeared for both frameworks allowing the possibility to check JS quality, to concatenate files or even to watch changes in source files to do browser refresh or inject changes asynchronously without refreshing. Both tools started to lose popularity for the benefit of npm scripts. Small pieces of nodeJS scripts had the ability to do everything nodeJS allowed.
The biggest changes appeared in javascript SPA applications. Developers were inspired by solutions put forward by Backbone and Angular teams and started to recreate and improve on similar solutions.
It’s when: Ember, Knockout, and React were gaining popularity. The last one made the biggest impact in the front-end world for a long time.
Another aspect of the development which changed slightly during this time was the modular approach to development. In “the good old days”, modules in javascript did not exist. The only way to preserve privacy was to use design patterns such as Module Pattern, which were created from an unnamed and immediately executed javascript function. It was the only way not to pollute global scope with everything we have implemented. Require JS mentioned in the previous chapter made some progress here with AMD approach. Another approach which appeared was Browserify, it used common JS modules like in Node JS but inside a browser and it compiled them to a single file which should have been injected in html. Finally, Webpack appeared which became a standard for bundling and dealing with modules for client-side applications.
A big impact, a way of development, was also caused by UI Frameworks. Bootstrap, Foundation and, later on, Material-UI. Each one included a complete set of components, fonts, icons and utils such as the frequently-used grid system. Each one sped up the development process and helped to achieve consistent UI without any additional styling.
Fast and furious….
Few years ago, it was easy to follow all the news taking place in the front-end world. But the popularity of javascript was increasing. More and more developers started contributing to open source projects.
There are now millions of libraries/frameworks/scripts in javascript. Let’s take a simple test:
- Think of any name of an item not connected with programing, e.g. focus on any home-related ones such as: table, home, knife, doors, bed….
- Try to google it with “js” suffix
- Almost every name is a name of a library, npm script or github repository…, you should have 100% match in the first 5 words which popped to your head.
Almost every aspect of the front-end development has changed. In the case of styling, for a few years, SASS was unquestionably a leader. We have adopted nice architectural solutions for sass such as: BEM or SMACSS . Then there was an idea that styles could be created directly in js tied up to the components with the proper scopes. Currently, there are large numbers of similar CSS in JS solutions.
In the case of SPA application situation is clearer, there are 3 competitors: React, Angular 2+ and a newbie, Vue; a detailed description and comparison of each is a topic for another blog post. Most developers choose one of them. Some people will agree with the image below:
The number of mobile application frameworks for javascripts from which we can choose is also huge. There are: React Native, Ionic, NativeScript, Cordova. React Native is gaining popularity and wider support. We need to choose the mobile app technology for our project carefully, maybe for the simpler ones PWA would be enough?
The first Backbone JS applications were huge and each month the application was getting bigger and bigger. When the bug appeared it was hard to tell in what state application actually is; if it had been Redux or MobX debugging would not have been so painful and time consuming.
The world of js is a huge one, and I only mentioned a few core libraries. If we dig into a specific area like SVG graphics, WebGl, Web Components, Server side rendering more and more good, well-known libraries will appear and each one deserves their own article. Server side rendering is a “hot” concept nowadays as we have entered the SPA era, where all content is rendered client side. Still, there are crawlers and social tools which do not understand javascript.
For the all non believers: JQuery is not dead! jQuery is still one of the most popular library on the internet. If you think jQuery is always ‘evil’ please read this.
State of Javascript in 2018
So, what is the current state of javascript? It’s widespread use says it all.
You can check out what the current trends are. Take heed and read the conclusions in each section while choosing the technology for a new project. The newest “hot” technology may not always be the best choice because of the lack of documentation and solved issues. Frameworks which are mature have a lot of contributors. Most errors have already been solved and if a new ones appear, there is always a person who will quickly address our problem and solve it.
How to be a good front-end developer in 2018? Naturally, we all need to follow the news frequently. So much is happening everyday, and it is always helpful to go to news aggregators such as: DailyJs. You will not became a technology specialist simply by reading articles, it just gives you an idea of what to learn next 🙂
A few years ago front-end developers were able to do everything their employer needed. It was not too difficult to be knowledgeable about css/sass, vanilla js, existing SPA frameworks.
Nowadays it’s a bit more complicated, it’s hard to be a specialist in everything and it’s not possible to reach master level in everything related to front-end. We need to specialize and choose our path to become: React, Angular 2+, Ember, Ionic, NativeScript, Styling etc. specialist.
Espeo Choices
In Espeo we follow current trends. For our projects we use fresh well-known and well documented technologies.
In the case of creating new SPA projects React with Redux and Angular 2+ are a way to go, with increasing React dominance. Developers use React Native or native applications for mobile solutions. However, React Native can’t solve all mobile problems. As far as styling Sass or styled Components are concerned we use them extensively in our projects. Webpack and npm scripts have become a standard for all the projects we develop.
We are open to new technologies and still explore new possibilities such as: Vue, TypeScript, Reason…and many more. Possibly, we’ll only consider a few of them for our future projects.
[contact-form-7 id=”13387″ title=”Contact download_8_reasons”]
