Insights

Web Technology the Black Pixel Way

Web technology is rapidly evolving. It might be tempting to adopt the latest web tools, but bouncing from one trend to the next leads to inefficiencies. The key is finding the proper balance of flexibility and strict adherence to a web stack.

Our Web Services team is made up of seasoned developers who take a pragmatic approach to the languages and frameworks they use, while always staying informed of new technologies. This ensures that our clients benefit from the best technology available.

We caught up with Black Pixel Director of Web Services Brad Cerasani to discuss how he and his team chose some of the technologies in our current web stack, practices that help our web projects run smoothly, and where the web industry is headed next.

What language does your team prefer to write in?

We use JavaScript for both the client and server side, but we also have engineers well-versed in Go, Ruby, Python, Lua, Java, PHP, and .NET. On the client side, JavaScript, HTML, and CSS are the "Holy Trinity." Because JavaScript is so universally used, it has seen a huge amount of advancement over the last decade. It's much more powerful than it used to be, so now it's increasingly used on the server side at large companies like Facebook, Twitter, and Uber.

Which technology do we use most on the server side?

Hapi and Express, which are both Node application frameworks. Using Node with JavaScript for server-side development allows us to tap into the largest open-source module ecosystem in the world. It has huge support from the development community, making it more productive.

Which technology do we use most on the client side?

We use React for building user interfaces. It's solely a library used for rendering our views, so it's super performant. And, since it only focuses on view logic, it's easy to drop into existing applications without a complete rewrite.

What do we use to process CSS?

We use PostCSS. On it's own, PostCSS doesn't do anything, but it has a rich plugin ecosystem that allows our developers to do almost anything imaginable to a CSS file's contents. PostCSS forces us to think about which plugins we'd like to use to manipulate our code, instead of giving us more than we need.

What do we use for storing data?

It depends on the project, but our favourite for relational data is PostgreSQL. We'll often work on MySQL and MongoDB datastores as well because of their ubiquity. For caching, we reach for Redis or Memcached.

Which operating system does our team use?

For development we primarily use OS X, but a few of our engineers were Windows users before joining the company. Everyone has some familiarity with Linux as well, since that's what most servers run.

How do we ensure that there is continuity when writing JavaScript and CSS?

We use linters to enforce code style. To lint our JavaScript, we use ESlint with an adapted version of Airbnb's style guide. This ensures consistent formatting and code style between developers and helps check code for unused variables, typos, and mutations.

To lint our CSS, we use stylelint and postcss-bem-linter with a custom config for UsonianCSS, which is our baseline CSS boilerplate. Stylelint is ESlint for CSS. It helps us maintain an alphabetical order of CSS properties, consistent block formatting, and naming conventions (among other things).

How do you vet a new technology?

We look at how often people are engaging with an open-source technology on GitHub, where you can see if it's actively being worked on. If it's available on npm, we'll check its stats to see how frequently it's being downloaded. If there's a lot of activity with a particular technology, that tells me that it is alive and worth exploring more.

What new technologies does your team have its eye on now?

Facebook's GraphQL is a new way to facilitate client-server communication. It could be really interesting to use on a project where we're building server-side support for a mobile client.

Netflix's Falcor attempts to solve the same problem with a slightly different approach that could also have a drastic impact on client-server data transfers.

The upcoming Koa 2 release has some really smart people working on it and makes use of newer JavaScript features like async and await.

We've also been checking out RethinkDB and Horizon, which show a lot of promise for building real-time web applications.

The aforementioned tools have proven their merit in building web applications that scale to millions of people. If you would like a closer look at these technologies and their evolutions, Cerasani goes into more detail about our web stack on BPXL Craft.