21 Nov 2012, 10:33

What about industrialising front end ?

A few weeks ago, I attended a Node.JS training and during which the "bower" tool was introduced. As stated on project's page, "Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you".

At a first glance, such a tool can looks strange as frontend developers are used to download their favorite lib for each of their project. But at the end, such a task has no value at all and for backend technologies, we no longer do this for years (maybe still on Windows system ;-) ).

Small disgression : how do we do with backend technologies ?

Backend developpers almost never compile nor download their binaires for each of their project.  They use package manager (especially on a Linux system) and some tools over them to automate such deployments (Puppet, Chief, custom scripts, etc). This is true for softoware like Web servers (Apache, Nginx, etc), Databases (MySQL, Oracle, Postgres, etc), Languages (PHP, Java, Python, Shell, etc).

Even at a language level, this is possible to define the required librairies for a given project. For ex, in Python, if you use the package manager pip, you can define requirements for your projects which will be grabbed when you initiate it. You are able to specify not only the required libraries but also their version.

With such packaging, distributing and deploying your project is quite easy as everything can be automated and also you will avoid compatibility issues as you will not use the wrong version of a library for which the project has not been tested.

So why not doing it on frontend side ?

Back to bower and its implications...

So let's imagine your project needs a version of JQuery, instead of going on jquery.com, download the file and use it or copy/paste a version from an existing project, you just have to write to get the latest version :

bower install jquery

If you want a specific version of jquery, you can specify arguments ; I let you discover it on the doc to see all the features of bower to grab and download a library.

If you think on your project, you may want to define the requirements and save all the libraries you will use. Just add a "--save" flag to the command so that your selection is saved in a component.json file.

For ex :"bower install --save jquery bootstrap" will lead to this file :

{
  "dependencies": {
    "bootstrap": "~2.0",
    "jquery": "git://github.com/components/jquery.git#1.8.1"
  }
}

Once this file exists and is saved in your version control system, you no longer need to store the librairies in your VCS.

For a new deployment or a new developper joining your team, he will just have to checkout the project, go into the directory where is stored the component.json file and run "bower install" and bower will install everything automatically. And voilĂ .

Beyond Bower...

Next to a discussion with a colleague, you have yeoman which aims to provide a full workflow for developping modern web apps. It includes bower but also yo and grunt

As they stated themselves :

Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.

Our workflow is comprised of three tools for improving your productivity and satisfaction when building a web app: yo (the scaffolding tool), grunt (the build tool) and bower (for package management).

  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.

All three of these tools are developed and maintained separately, but work well together as part of our prescribed workflow for keeping you effective

Seems like a maven for frontend/web development.

I don't know if such a tool exists in other languages to avoid using node.js & npm (Node Package Manager) which are required by bower/yeoman. But at least this tool raise the question : "how can we industrialise front-end ?"

Would you be interested in using such tools for frontend lib ?