Getting set up for web development – part 2: the tools

In the previous article, I spoke about the different editors that can be used to develop a web site/application.

This article will present different tools that are pretty useful, some almost required, when you start digging into web development.

Content Delivery Network

A Content Delivery Network, or CDN, is basically a network of server that offer high availability of content. In the context of web development, CDNs are particularly interesting because they offer access to libraries without having to download anything on your computer. This means you can just reference the files you need from the internet and use the library to build your app.

One of the main advantages of CDNs is that you can also reference libraries from online editors (see previous article) to test them.

Chocolatey

Chocolatey is a machine level package manager. It basically allows you to install all kinds of software using PowerShell. It is similar to Homebrew on Mac or aptitude on Linux. While not exactly related to web development, it is a very interesting tool to have in your toolbox if you fiddle on your computer. Besides easing the installation of software, from Chrome to iTunes, it also helps maintaining your packages in an easier way.

All editors introduced in the previous article are available as Chocolatey packages.

NodeJS and NPM

From Node.js website:

Node.js® is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications

U wot m8? Node sits on top of the Chrome’s JavaScript runtime to allow you to create scripts that are then run directly through node. This means that you can write a JavaScript file and have Node execute it without having it referenced in a web page. From a higher level, Node.js allows you to write server side JavaScript code, including web sites hosting, template engines, routing, authentication, etc.

So why would you need it if you have Visual Studio and IIS running inside it? Well, Node.js comes along with a command line utility called npm (Node Package Manager), that provides a ton of utilities that you will use throughout your life as a web developer.

Node.js can be installed directly from Node.js website or via Chocolatey.

Node.js is a must have.

Bower

Bower is a client-side package manager, similar to NuGet in Visual Studio. Long story short, bower will prevent you from going to all websites to downloads JavaScript and css files of external libraries, by taking care of all that lifting for you. Those libraries are directly retrieved from GitHub.

And here we are already. Bower is a node package, installed via the following command:

npm install -g bower

Bower is a must have as well (though packages are more and more available directly via npm). Whilst many libraries are also available on NuGet, I found that packages are more up-to-date on bower. Furthermore, using bower will make your application more “conform” to what goes in the community, and opens the door to other developers contributing to your projects even if not using Visual Studio.

Bower relies on git and the GitHub network. Therefore, it is required to install git prior to using bower.

Yeoman

Yeoman is a command-line tool that helps you getting started and more productive quickly. Yeoman basically scaffolds the most common operations for the most popular frameworks (backbone, angular, etc.), and provides generators to get you started in a project in bare to no time.

Yeoman is also a Node package, and can be installed via the following command:

npm install -g yo

My experience with Yeoman is very light, as I prefer using and creating templates within Visual Studio, but it is definitely worth checking out, especially if you work with another editor than Visual Studio.

SideWaffle

Though not a tool by itself, SideWaffle is very handy. It is basically a set of templates for Visual Studio that gives new project templates, as well as items templates for the most common JavaScript frameworks, such as Angular or Backbone.

Highly recommended if you want to get started quickly in Visual Studio.

Source control

Last but not least, use a source control system (note the imperative tone). If you do not know what a source control system is or what it is used for, leave this article for later and go check that out.

I will not go in a comparison of centralized vs decentralized systems, as a lot already exists about that. I have used SubVersion, Team Foundation version control and git. All three work nicely, but my preference goes to git, as it allows you to create a repository directly without needing to deploy any kind of server, and start versioning your sources in a single command line. Furthermore, if you use bower, you already have git installed.

Another advantage of using git is that you can enjoy free, on-line repositories (open-source) at GitHub. GitHub is a massive hub for sharing code. All main frameworks are open-source and available at GitHub. Consider creating an account, were it only to let others know you exist and you can code. On-line editors also let you save your code via your GitHub account, so that’s interesting to have one.

Conclusions

Package managers are at the heart of web development. Having those tools at hand will make your experience with web development less painful, which is nice, as there are other ways to spend time than browsing the web looking for the appropriate files for the library you want to use.

The command line is central in all web development tools, and if you don’t like using it, I have bad news for you… PowerShell is way more powerful and appealing than the old dos command, and is really worth checking out. PowerShell also has an interface directly available from Visual Studio.

With a nice editor, npm and bower installed, you are now ready to get some serious work done.

Advertisements
Leave a comment

3 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 3: useful libraries | Wandering in the community
  3. Setting up your environment A to Z | 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: