Getting set up for web development – part 3: useful libraries

In the previous article, I spoke about the different tools needed or recommended to develop a web site/application.

This article will present different libraries that can help you being more efficient in developing your application.

Layout

First thing first, you will want your page to look nice. In all honesty, I am lame at css. I never really took time to learn it properly, and always fell as going to war when I have to get into it.

cssisawesome

Fortunately, some people wrapped their heads around all kind of problems and were kind enough to let us enjoy the fruit of their work.

Bootstrap is a framework to develop responsive design. It was formerly called Twitter Bootstrap, as it has been developed by the Twitter team. Bootstrap is an excellent starting pack for a page design, as it embeds responsiveness natively (i.e. your site will behave properly on all kind of devices), and offers  some nice layout controls, such as navbar, panels, wells, but also form feedback. It is easily extensible and customizable to match your tastes. It will not natively win you the designer of the year award, but it is a very effective way to quickly get a nice looking site. Check it, and even if you decide not to use it, analyze how responsiveness is handled by this framework, as it is beautifully done.

If you need to extend your layout with more icons, font awesome is for you. It provides a list of icons that can be used at different scales, as well as some spinners.

JavaScript and the DOM

Most likely you will want some interaction between JavaScript and your DOM, where it selecting elements or actually manipulating your DOM. JQuery is a library that will help exactly for that. From event handling to animation to ajax calls, jQuery provides an easy-to-use API helping you getting more productive.

I don’t have much experience with it, but it is good to know it is there. JQuery is very popular, and one day or another, you will get in touch with it.

The reason why I never used jQuery much is that I haven’t been a web developer for very long, and I quickly jumped into AngularJS. Simply put, AngularJS (or just Angular) is an MV* (model-view-whatever) framework, where the star can stand for C (controller) or VM (view-model) according to your preference.

On a first level, Angualr provides a very powerful binding mechanism between the DOM and JavaScript, allowing you to automatically update the interface according to your data. But Angular comes  with a lot more than that, with features such as routing, animations, ajax requests, and many more that I cannot enumerate here. The best way to discover about Angular capacities is to visit their web site, or check this free tutorial, or one of the beginner courses available at Pluralsight.

Angular provides all required functionalities to help you build enterprise-scale applications, with unit-testing and responsibilities decoupling in mind, as well as a dependency injection mechanism.

When it comes to notify the user of things that are going on in code, or inform about errors, I like to use toastr, which is a very lightweight, easy to use library, that can quickly improve user experience.

Data visualization and manipulation

Most likely at some point on your development you will want to interact and visualize data.

For data visualization, my preference strongly goes to D3. The time to invest to wrap your head around it will be largely compensated by the benefits you will get from it. Because, let’s face it, D3 requires investment in learning time before actually getting productive. But once you get it, it is so powerful you will not be able to live without it.

If you are not interested in investing too much time in learning how to use it, you can find charting libraries based on D3, such as nvd3 or c3. I cannot recommend one or the other, as I decided to write my own components for use.

The interest about D3 is that it is not limited to charting component, and it can be used to draw maps, or force layout, or clustered diagram.

Coming to purely manipulating arrays data in JavaScript, lodash offers an incredible panel of functionalities that help achieve amazing results in close to no time. For those who are familiar, I see lodash as a JavaScript equivalent to LINQ in C#.

Others

A few other frameworks out there are quite popular, but I don’t really have an opinion about them. I will just list those here for reference:

  • Ember: another MVC framework, similar to Angular,
  • React: a framework providing the view part of an MV* application. It is generally used with the Flux architecture. React is developed by Facebook,
  • Backbone: a framework that provides the M in an MV* application. It can be completed by a framework such as Marionette.

 Conclusions

Quickly becoming productive in web development can be easy from a technical point of view, but time can be wasted in finding the right framework. A lot of frameworks are available to help you getting where you want to go, but sometimes the choices are so numerous it gets overwhelming. Having a starting point can be very helpful.

Building an application using the Bootstrap-Angular duo as a start-up helps getting somewhere very quickly. Learning those two frameworks made me very efficient, and also allows me starting new apps in very little time without having to worry too much. Including D3 to integrate data visualization and toastr for notifications leads to very enjoyable, responsive, professional-looking apps with a minimum of effort.

 

 

Advertisements
Leave a comment

2 Comments

  1. Getting set up for web development – part 1: choosing an editor | Wandering in the community
  2. Getting set up for web development – part 4: JavaScript supersets | Wandering in the community

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: