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