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…
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:
- 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.
- 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.
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.
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.
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….
- 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 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.
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.
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.
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.