Web Front-End Technologies and Trends

Frontend Trends
Web Front-End Technologies and Trends
Yazıya Puan Verin

Do you feel like you have turned your head for two minutes and the entire Web world has changed and you have fallen behind?

Well, that is probably true, based on the number of new initiatives out there, and the speed with which they gain adoption.

Let’s not panic. Web is still a mix of HTML, CSS and JavaScript. But the choice of frameworks and libraries can be overwhelming. This post is intended to share my personal preferences and to save some google search time by pointing you in the right direction.

My first stop would be http://uptodate.frontendrescue.org/

This blog will tell you

  • the cool people to follow
  • where to find the best source of information
  • the conferences to attend
  • how to build your own source

The world has moved on and we now write ‘Web Applications’, and like any front-end application, the safest is to follow the MVC (or MV*) architectural pattern.

What components do we need to get started?

We need a JavaScript framework to organize all our front-end logic and UI, a test framework to make sure everything is working, a CSS pre-compiler to keep our stylesheets neat, a Front-End framework to make everything responsive and get a few UI components out of the box, and a good knowledge of the latest HTML5 features.

First, let’s head to TodoMVC to understand the multitude of JavaScript frameworks, and how they function. Basically, there is an example of a to-do list of implementation with each of them. It’s a very good way to understand how a simple functionality can be implemented before choosing a framework. The lab section covers everything new and hot right now.

For a more in-depth reading on JS frameworks, read the JavaScript MVC jungle.

There are many JavaScript test frameworks available; I would recommend trying Jasmine for behavioral testing and Mocha for unit testing.

When it comes to CSS, the question is: which pre-compiler should you use? Indeed, you should definitely use one, in order to keep your stylesheets DRY (Don’t Repeat Yourself). You can choose between LESS and SASS. I prefer using SASS, and the community has shared interesting mixins libraries (reusable SASS snippets) like Bourbon.

The major Front-End frameworks are Bootstrap and Foundation. I also like more recent projects like Neat which offers a good lightweight alternative, or Materialize which bring Google’s Material Design to the web.

Finally, my favorite destination for everything HTML5 is HTML5 Rocks. It covers all the features present in HTML5, from the semantic markup to awesome data-binding (e.g. Object.observe).

Most of these components are open source and usually hosted on Github. Bower is a good solution to manage these dependencies.

In order to bring all these components together, we need a task runner that will take care of our assets pipeline, build and testing. Gulp and Grunt are just perfect for the job.

Most of these tools run under Node.js, so I would recommend installing it first on your computer.

These are many components to search and put together. In order to simplify and speed up the process, check Yeoman. They provide all the major boilerplates for starting a new project, and once you know which frameworks and libraries you want to use, you can set up your new web application in a few clicks.

Here at Ness, we specialize in supporting our clients to create products, platforms and front-end experience which will meet the needs of the users, be optimized for front-end development in today’s digital economy, and make recommendations to utilize the best in class tools available in the market place. Whether you are looking to create a web application yourself or looking for a technology partner to help you along a digital transformational journey, I hope this post saves you precious time.