Web Development continues to evolve at a breakneck pace. Our constantly updated training courses will help your developer team stay up-to-date and productive with the newest features, libraries, and frameworks in use in 2017.

We can train your team on-site or online and will customize the content, length, courseware, and labs to fit your team's stack, ability level, and project needs.

If you don't see a course that you like, contact us and we can build a custom course or bootcamp for you.

Web Development Training Courses

Front-end development is defined, by Wikipedia, as the “practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly.” Most people can make sense of basic HTML, CSS, and JavaScript (and that used to be enough). But in the last 5-10 years, front-end development has evolved and splintered into a miscellany of frameworks, libraries, build-tools, command line tools, and new languages.

This plethora of technologies makes it challenging for developers and next to impossible for lay people to follow this field. This essay will attempt to explain the landscape of front-end development technologies  for a non-developer audience.

Libraries

There’s an organization in Denver, Colorado called the Denver Tool Library. For a subscription fee, they let members borrow some of their 2000 different tools. People can come in to chisel wood, test circuits, or maybe take a tool out to use in their garden. The library offers specific tools with specific functionality that can be used as many times as members need.

Programming libraries work very much in the same way as a physical tool library. Libraries like jQuery, Handlebars, Underscore or Backbone give developers specific functions, methods, and objects they can use to achieve a particular task in their code. With one command or script tag, developers can bring a library in and have immediate access to its tools.

The library that has had the largest impact on web development in the last 10 years is jQuery. Among other things, jQuery simplifies creating JavaScript across browsers.

Handlebars is a "semantic web template system". Template systems make it easy for developers to put dynamic content into a static page a user sees. {{ Curly Brackets }} (aka sideways mustaches) are put into the HTML for dynamic content. Handlebars swaps out values between the curly brackets with content from the program. An example of this in action:

This HTML table...

  <tbody>
       {{#users}}
       <tr>
           <td>{{fullName person}}</td>
           <td>{{jobTitle}}</td>
           <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
       </tr>
       {{/users}}
   </tbody>

...will become this table with the help of Handlebars. The brackets get filled in with dynamic content:

Underscore takes a different spin on the tool library metaphor. Underscore used to call itself ‘a utility-belt library’ for JavaScript. Underscore gives developers shorter, faster ways of doing common tasks like looping over an array or object (which are collections of data in JavaScript). Normal JavaScript provides a way of doing this but a library like Underscore (or Lodash) provides a shorter/simpler way of doing so.

Backbone is a library that makes it easier to better organize applications. Backbone is usually used with Underscore and jQuery, and sometimes with Handlebars to form a complete application framework. An application framework usually handles a lot of the common tasks in web development like handling HTTP requests, routing, organizing business logic, and views the clients will interact with. We’ll go over frameworks in the next section in more detail.

React is the hot library of 2017. React came out of Facebook’s struggle to get the Like Button count to work well. When people would push it, it was hard to get the like count right. React offers a new (and faster way) to create data-driven interactive user interfaces. It is actually used in production for hundreds of millions of users (Instagram/Facebook) so even though it’s new, it has been thoroughly 'battle tested'.

The Frameworks

A framework is typically something that provides a structure or way of organizing something. A web application framework, like Ember or Angular, saves developers from having to set up common web development structures/tasks on their own.

Think of a framework like a prefab home. Prefab homes come with the most of the ground plan laid out. The electrical wiring, framing, drywall, and plumbing are generally installed and ready to go. The homeowner then customizes the home’s interior suit their tastes (colors, textures, floors, appliances). The homeowner still could tear down the walls and rework the structure but generally they will go with the defaults.

Source: https://www.bluhomes.com/breezehouse

This metaphor has its limitations but think of a web framework as providing a starting structure and set of defaults within which the developer can make an application.

Angular has become, by far, the most popular JavaScript framework in use (as of 2017). Angular handles tasks like connecting to a database, allowing the user to interact with information on the page, and handling the URL routing (in the address bar). Angular makes it simple to create what are called Single Page Applications (SPAs). If you’ve used Google Maps or Gmail, you’re used to a using a page that updates without refreshing the entire page. It does this by using a technology called Ajax.

Ember is another JavaScript framework that gives developers a scaffolding and structure to develop applications. Ember has a number of ‘opinions’ (conventions) that are meant to increase developer productivity. In theory, this should make it easier for developers to join an Ember project than an Angular project. The tradeoff of this is that some feel restricted by it’s enforced structure.

Bootstrap and Foundation are front-end frameworks that focus on the look and feel of a site. Both can be utilized to easily develop good looking sites that work well across different screen sizes. Each gives you pre-defined CSS and HTML components. A Bootstrap component would be a something like this piece of HTML:

<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="#">Home</a></li>
	<li role="presentation"><a href="#">Profile</a></li>
	<li role="presentation"><a href="#">Messages</a></li>
</ul>

This allows a developer to quickly get a navigation menu that looks like this:

By using Bootstrap/Foundation, developers can avoid having to reinvent the wheel when they need something common like a navigation menu, progress bar, or drop-down menu.

Bootstrap is now used on nearly 10% of internet sites. You can see a variety of sites that use Bootstrap at their showcase site. Google Trends Proxy on Framework Popularity

Build Tools

When developers create applications, there are numerous tasks involved. These tasks include setting up their codebase, downloading libraries, or preparing their application for production deployment. These tasks can be done manually using the command line, a package manager (like NPM), or manually creation/coding. But running these tasks manually can become repetitive and disorganized. Developers hate repetition (that’s what computers are for) so they create tools to handle this anytime they can. The tools, in this case, are called task runners or build automation tools.

Grunt and Gulp are the most commonly used build automation tools. Grunt got an earlier start but Gulp has quickly become more popular. Think of build tools as “programming to setup for programming”. A common task in Grunt/Gulp would be to ‘lint’ the code upon saving. Linting code is the process of checking it for proper syntax/styling. This is one way to reduce bugs and make code more readable. Grunt/Gulp are commonly used to run such tasks as minification, concatenation, clean up file locations, and compile one type of file to another.

An easy way to imagine Gulp is to picture it as a sort of old-school pneumatic tube

system. Gulp is a way to pipe files from one location to another. The difference is that Gulp uses one or many plugins in the middle to make changes to the file before delivering it to it’s destination.

Broccoli is similar and newer than Grunt/Gulp. It does tasks differently and offers a more concise syntax and increased performance. Broccoli’s is supposed to be especially helpful when projects grow in size/complexity. Grunt and Gulp files can quickly become difficult to wrangle and Broccoli’s tree/folder based tasks supposedly shine here.

Yeoman has a set of ‘generators’ that allow for quickly setting up / scaffolding a project. Rather than taking the time to create folders for your HTML, JavaScript, and CSS, Yeoman will do this for you. You can then tweak the setup to your liking/needs.

Command Line Tools

In 2017, most development projects require a lot of external libraries (you know what a library is now, right?). To use jQuery, for example, the developer needs to go to jQuery’s site, download the source code, put it in the right folder, and include the script tag in their code to bring jQuery in.  This quickly gets tedious as a project needs many libraries.  Furthermore, it becomes difficult to keep track of which version is needed where.

Command line tools like Bower and the Node Package Manager (npm) allow for libraries to be installed using the command line.  A simple command like bower install jquery will go fetch the jQuery source code and put it into the bower_components folder, stored locally.

NPM can do everything that bower can and more. There 70000+ npm modules to the Bower’s 10000+ packages. Npm needs Node.js to run and many projects don’t use node. Npm also installs many more dependencies (think Libraries that depend on Libraries) when you install something with npm. Bower will, supposedly, install fewer dependencies and therefore take up less space than npm modules.

It’s a bit trickier to think of metaphors for command line tools. But, imagine, you’re a dentist working on someone’s teeth. You merely have to open your hand and say the tool you need and an assistant puts in it in your hand for you. This is what Bower and Npm are to a developer. In a command or two they have quick access to the tools they need.

Languages

JavaScript and CSS are default languages that are used in webpages. However, they each have their own drawbacks in terms of syntax, whitespace, and aesthetics. For this reason, developers invented new languages and 'preprocessors' that they develop in. They then take these new languages, like CoffeeScript or Less, and compile/convert them into JavaScript, HTML, or CSS. The newer languages are easier to develop in but must ultimately become what the browser can read.

CoffeeScript

CoffeeScript is a programming language that 'transcompiles' (converts) to JavaScript. CoffeeScript is a cleaner prettier version of JavaScript. It has a 'leaner syntax' that makes it easier to read. Here’s a quick example from the CoffeeScript site:

Looping over an Array example in JavaScript (a common task):

cubes = (function() {
	var i, len, results;
	results = [];
	for (i = 0, len = list.length; i < len; i++) {
		num = list[i];
		results.push(math.cube(num));
	}
	return results;
})();

The Equivalent in CoffeeScript:

cubes = (math.cube num for num in list)

This is one small example of how using something like CoffeeScript makes developers’ jobs easier.

Typescript

Typescript is another new language that converts to JavaScript. One of the biggest potential drawbacks of JavaScript is its 'weak typing'. Weak typing basically comes down to not being able to tell when a piece of data is a string (text) vs. a number. Typescript has stronger typing (hence ‘Type’ in the name).

Typescript also offers some advanced (futuristic) JavaScript functionality that isn’t supported by most browsers yet. Typescript offers features (e.g. modules, classes, mixins) that will come with the next version of JavaScript, ES6. Typescript will convert back to normal JavaScript and work in today’s browsers. Typescript offers JavaScript’s future, today.

Less, Sass, and Compass

Less, Sass, and Compass are all languages that can be compiled to CSS. They are to CSS what CoffeeScript/Typescript are to JavaScript. Less, Sass, and Compass improve the process of writing CSS.

For example, say a developer is going to use the same color across their application. Instead of writing out the hex color code (e.g. #000080) multiple times, they can declare it once as a variable then use that variable across the application. When that Less, Sass, or Compass is compiled later, that hex code will put in across the CSS.

Think of Less, Sass, and Compass as using programming in CSS. They give you functions, variables, and logic to make stylesheets easier to write, maintain, and understand. Here’s a quick example in Sass from this excellent post:

$container-width: 100% - 20px;

This is assigning a value to the variable of “container-width”. Containers are common HTML objects. This variable will be assigned however many pixels is currently 100% (width) minus 20 pixels. This spares the designer/developer from having to go figure out what the current proper width is and subtract 20px and put that value in. When something changes in the styles, the changes will propagate dynamically across the stylesheet (vs. having to go do all the math again). This small example shows how something like Sass makes writing styling much easier.