Algorithms, Data Structures and Web Development

Or why learning computer sciencey stuff matters…


It's easy to find blog posts and tweets ranting about hiring processes for Web and front-end developers that require "Computer Science knowledge". Some people just cannot see how Web development has anything to do with algorithms and data structures.

As someone with Computer Science background who happens to be working mostly with JavaScript for the last two years I'll try to prove them wrong.

Disclaimer: I am not by any means suggesting that every developer should have formal CS education. Hell no! Some of the best developers I know don't have it. What I'm trying to do is to raise awareness of this field that is not a common subject for self-taught developers, but should be.


Job requirements and interview questions

Web applications are getting more complex every day. Single page apps are taking a lot of logic to the browser, memory management becomes something to worry about, efficient algorithms will make it possible to not blow the budget for 60fps fluid animations and understanding how TCP works with its congestion control, slow start and etc. can make a big difference on how fast a page is loaded (even more relevant when we're talking about 3G networks).

Web development isn't less complex than other domains of software engineering anymore. Each discipline requires specific knowledge but in order to solve problems a developer needs to understand the big picture and ultimately know how computers work.

Specialized professionals are really valuable assets, but in an agile culture T-shaped ones are even more!


Why the hell do I need to know algorithm complexity analysis?

Algorithm analysis is one of the topics that non-CS people tend to think is superfluous. But, is it?

Suppose you need to find the maximum value inside an array.

You can do a one-liner:

// Please abstract the fact that Array.prototype.sort
// is stupid and sorts things in lexicographical order
var maxValue = myArray.sort().pop();

Or you can iterate through the array looking for the max value:

var maxValue = null;
for (var i = 0; i < myArray.length; i++) {
if (maxValue === null || maxValue < myArray[i]) {
maxValue = myArray[i];
}
}

How can you know which solution is the fastest?

Wall time varies depending on the machine/environment you’re running, so you need something more reliable and generic. The input size can also vary in real-world usage, how can you estimate how long will it take? For small arrays, both algorithms will take approximately the same time, but how will they behave if the array grows?

The first example sorts the whole array in order to get the maximum, it's really easy to write as JavaScript gives you a method to sort an array with just one function call. But if you know something about sorting algorithms, you will probably know that sorting by comparison cannot be faster than O(n lgn) — where n is the array size — while traversing the array is O(n). And that means that as the size of the array grows, the running time of each solution will grow according to these Big-O notations:

Array size (x-axis), Running time (y-axis). Source: Wolfram Alpha

Some people don't consider this a fundamental knowledge for Web developers. But as a lot of software engineering is about evaluating trade-offs, Big-O is a very powerful tool to have on your tool belt.

It's also not only about writing algorithms with the lowest Big-O complexity, but also understanding whether it's worth writing such a thing. In many cases, when n is small enough, it doesn't really matter and the diference between the performance of a fancy-and-smart algorithm and a simple brute force one may not be worth the added complexity. That's part of the trade-offs engineers need to analyze.


Why in God's name do I need to know other data structures besides my beloved array?

If you are using arrays to do other things than just having elements grouped and indexed with contiguous numeric indices, or if your code is full of array.indexOf(…) — or something that does a similar logic — , you probably shouldn't be using an Array as your data structure.

But what other data structures should we know and how are they useful?

  • Maps/Dictionaries are useful when you want to store and access items in a key-value way. Some people try to achieve this in an inefficient and cumbersome way with arrays and indexOf.
    JavaScript objects behave like dictionaries and you should use them instead.
  • Trees are used to implement the DOM structure, knowing how trees work will help you structure and navigate in your DOM. Such knowledge is also fundamental to have something like Facebook's React diff algorithm that minimizes the changes in the DOM tree to improve rendering performance. And in case you also happen to write server-side code, it will help you understand how database indices work and why they are important.
  • If you want to have quick access to the maximum or minimum value in a collection, like a priority queue for example, you should probably be using a Heap.
  • Talking about Queues, they actually model the way events are processed.
  • And Stacks will probably make it easier for you to understand how to handle the states in your single page app. It will also help you grasp recursion.

According to Rule #5 in Rob Pike’s 5 Rules of Programming:

Data dominates. If you’ve chosen the right data structures and organized things well, the algorithms will almost always be self-evident. Data structures, not algorithms, are central to programming. — Rob Pike

Solving problems and looking at the big picture

At the end of the day we — developers — are problem solvers and the more background we can bring to the table in order to come up with solutions, the better.

As Web development gets more complex, taking concepts from other realms of software development to the Web world can help us solve the problems that have already been solved and validated before.


P.S. If you're interested in this topic, you probably want to check (and maybe contribute to) the algorithms.js repo

Show your support

Clapping shows how much you appreciated Felipe Ribeiro’s story.