Decrypting the ever-complicating Front-end web development stack
==*Note: This post is going to be long and it's going to be comprehensive. Last updated 2nd May 2016 *==
Front-end development is hard. And it's getting harder all the time, but what do you really need to know? The technology stack we need to know expanding exponentially, with no sign of letting up.
To make this easier, I've compiled a list of the things that front-end developers can and should learn. The higher they are up the list the more important I feel they are to your job and profession. I've added a recommended tag to the ones I believe to be the most important. This is a mixture of my opinion, what the community has selected, the future implications of that tech and what companies are looking for job wise. Other developers may have differing opinions, but that's what makes our little niche industry so much fun to be in. Enjoy.
- Responsive Web Design
- CSS Preprocessors
- Templating Languages
- Version Control
- Task Runners
- Module Bundlers
- Package Managers
- Command Line
- Utility Libraries
- View Layer Frameworks
- Data Layer Frameworks
- Full Stack/Isomorphic Frameworks
- Back-end as a Service
- Mobile App Frameworks
- Decentralised Application Development
- Wrapping Up
- HTML recommended*
- CSS recommended*
- DOM scripting recommended*
Responsive Web Design
Responsive web design (RWD) is the concept of a website responding to the browser in which it is being viewed on. If it is a mobile device the design will morph into a layout for smaller devices. RWD uses CSS media queries, which are a conditional statement in CSS that can respond to changes in width, height and other properties. They are super powerful and make creating responsive layouts a breeze.
Responsive design started with Ethan Marcotte, who wrote the article linked above in the well known web design magazine A List Apart. Since then the idea has evolved, but the concept remains the same and a solid understanding of these concepts in essential to any junior web developer.
Templating languages are similar to CSS preprocessors, they allow you to use features in HTML that don't exist in the language. Some languages such as Jade or Haml allows you to write terser HTML without closing tags, which ends being much quicker to write. Your templating language will take in the data either on the server or on the client and then compile it into HTML dependent on the data, hence 'templating' language. They can help you to reuse code with partials or modules for duplicated elements such as your header or footer and also allow you to execute some limited logic such as conditonals or loops within the template.
Templating languages are from a time where most of the logic code was on the backend, and there were less Single Page Applications (SPAs) around. I myself have learnt a few of them, but I use them less and less these days as creating client-side heavy applications is more the norm. If you are going to learn one, I'd learn Jade as it's the normal templating language to lean on when creating a node.js application. If you're throwing up a quick marketing site, sometimes it's just easier to use a templating language rather than a full blown framework and its far nicer to use Jade than HTML.
- Git *recommended
Git allows you to create repositories of code. Each repo is constructed out of commits, which form a kind of tree. You can 'branch' off at any time and merge back into the main branch when you are finished with your module. The benefits for this is that you don't have to worry about breaking the main code. Version control becomes more powerful when you are working in a team. With FTP it is very easy to overwrite someone else's code, but version control stops that happening with merge conflicts forcing the user to resolve these conflicts before he can add his code to the repositories.
Version control is a must. Gone are the days we could rambo into our server with FTP and upload our sites. The community has decided that git is the defacto winner of the version control war. There is no other option.
Transpiling is when you transform a language into another language with a similar level of abstraction.
Learning how to use the basics of the command line are essential for a front-end developer. It has been known many a front-end developers would hide in the corner and cry when we had to interact with the terminal (OSX). But now we must be capable. The reason for this is, most of the previous tools I've mentioned; Module bundlers, Task runners, Transpilers: they all use Command Line Interfaces (CLIs) to interact with them. Having a basic knowledge of the command line will allow you to be unafraid.
View Layer Frameworks
View layer frameworks deal with only the view, how it is updated and displayed. It makes no assumption about how your application should be structured and these frameworks can fit into a larger framework such as MeteorJS or Angular. Most modern view layer frameworks follow in React footsteps with one-way data flow, Virtual DOM and reacting to data changes instead of forcing the developer to write the code to update the UI.
The development of front-end frameworks before React came a long was based on the idea of two-way data binding. React was one of the first frameworks to bring the idea of one-way data binding with uni-directional data flow. React is built out of a tree of components and data can only flow down this tree. To update data in the parent, it can only invoke a callback function, which has been passed down this tree as data.
The invention of the Virtual DOM has allowed us to develop as if we had a 'refresh' after the state of an application has been updated. The Virtual DOM allows you to easily diff the difference between the two and make the least amount of DOM updates. Developing with a refresh button takes the effort out of updating the DOM directly (which could be costly if done incorrectly). In addition to the Virtual DOM and one-way data flow, React has changed the way many of us write our applications, not only because of React, but because of the ideas that have developed around it. These include Object Composition, Functional Programming and managing state with Flux it brought with it. Thanks Facebook.
Data layer Frameworks
With the back-end becoming more and more skinny and the front-end becoming richer and fatter we have started to need frameworks that manage this data. Redux is a offshoot of the Flux architecture created by Facebook for their view framework react. It allows you to separate your data from your view layer. It can be implemented seamlessly with React or any other view framework that 'reacts' to data changes. It is inspired by Elm and uses functional programming concepts such as immutability and pure functions . Redux gives you a structured, predictable way to deal with state in your application abstracting away from the React components themselves (or other view layer).
RxJS is a different beast altogether that becomes powerful when your application requires lots of asynchronous calls that depend on each other. RxJS takes functional programming to the next level and follows the functional reactive programming paradigm or FRP. It allows very powerful control over streams of data allowing you to
reduce over data that comes in over time. It creates a new kind of object to achieve this, which is called the observable.
Meteor supplies a powerful API that allows you to access the database on the client with their MongoDB API. On the client they use a browser implementation of mongo called Mini Mongo, which caches a subset of the database in the client to allow the user's input to appear on the screen instantly. In reality, at the same time Meteor is updating the database on the server. When the requests comes back to the client it checks if there are any discrepancies and if there are it uses the server as the source of truth.
Meteor has a lot of funding behind its open source business model, which means that it is a good bet when thinking about what kind of open source frameworks you want to invest your time into learning. Derby, the other isomorphic framework listed here seems to have lost steam and therefore I wouldn't recommend putting the time into it.
Elm is another language that is also a kind of front-end framework. It has a Virtual DOM like React, and has a static type system that will help you to avoid errors. It takes syntactical inspiration from Haskell and has influenced frameworks such as CycleJS and Redux, which are other functional frameworks. It also uses the Functional Reactive Programming paradigm in a similar way to RxJS. Elm has an answer to the entire front-end development stack and therefore you can think of it as a complete replacement to your HTML/CSS/JS stack.
Back-end as a Service
Backend as a Service (BaaS) providers give you access to an easy to use Rest API that your front-end can connect to and make updates to. It has become more popular as developers can create their apps without writing a back-end. For applications that don't have a lot of complex logic in the back-end, platforms such as Firebase could save developers a lot of time. It also allows you to hook up multiple different front-ends (such as your iOS or Android app) to the same backend without too much difficulty. The downsides of BaaS is that they often cost a lot more when you scale up than a normal server would and therefore hasn't become as popular as it could have been. However platforms like Parse, which was formerly a paid service but has been released as open source by Facebook, could be one of the easiest ways to get your app up and running.
Mobile App Frameworks
Decentralised Application (DApp) development
I threw this one in for fun as it's something I've began getting into recently. There are very few job prospects out there for DApp developers in comparsion to normal web developers. But if you want to be part of the bleeding edge. This is it.
Ethereum and other copy cats are general purpose blockchains. For a high level overview of blockchains or Ethereum you can read my other posts on my blog: What is Ethereum? and Explaining the blockchain. In short they are a general purpose peer-to-peer network (similar to torrents) that will allow you to create applications that do not run on a central server, but on all the nodes of the network. As a front-end developer we already know half of what we need to create a DApp and it will allow us to create even more innovative, resilient applications than ever before.
Front-end development is so much more than it was 10 years ago. It has evolved into a behemoth of technologies that are getting evermore complicated. We have created tools to simplify the complication, but more tools, also increases the amount we need to learn. Things change on a daily basis with new libraries coming out all the time. 3 years ago, Angular was king, now it's React, tomorrow who knows? The front-end landscape isn't just linear anymore, we have different languages we can write like Clojure or full-stack frameworks that simplify the entire application development process. We are in a transition. Front-end developer no longer exist. We are application developers and the front-end/back-end divide is becoming more and more blurry. As our profession, we must stay up to date. Do not get left behind soldier.
Keep calm and carry on learning.