As a Web Developer in 2016, sometimes it is all we can do to keep up with the current ‘trends’ and acronyms which will come at us on a daily basis, either from our colleagues in the office or clients.
“Have you heard of BEM”, one of the Developers said around about 5 months ago, and so began my personal journey into learning a whole new methodology. A client wanted to know if we could write in .NET, a different programming language altogether, and again another journey begins!
However, before I get ahead of myself, let’s take a step back in time. Back to 2004 when I started out as a Web Developer.
When I started out in 2004, at the ripe old age of 13, Javascript (now EMCAScript) hadn’t got much penetration into the market, and Netscape Navigator was still a thing. In order to build my very first webpage, the languages I had to learn were HTML, CSS and PHP. HTML for structuring pages, CSS for styling them, and PHP for dynamic elements.
I consider myself (and always have) a bit of a linguist. I took 3 separate languages courses in school, and took 2 of them to college level learning. I do enjoy linguistic constructs and the flow of words, and programming languages are no different. Every single one has patterns and rigidity, as well as their own little quirks. Still, learning 3 different languages at once, to be used in tandem with each other for best results was quite the challenge.
Now, fast forward to 2016, and I’m going to remove PHP from the equation straight away. Though it is still a very popular language, it’s no longer absolutely necessary for what we define as a “Front End” Web Developer to know.
If you’re starting out in 2016, like our very own Charlie, you have to learn a LOT more than three programming languages to get by. Sure, HTML and CSS are still there, but you also have to know Javascript. This is where the fun starts.
JavaScript has had many things built on top of it, some of which you may recognise, and some you may not. Examples are:
- jQuery – a framework which sits on top of JavaScript.
- Node.js – A JavaScript Runtime.
- Gulp – A task runner distributed through the Node Package Manager.
- Bower – A package manager.
- Grunt – A task runner distributed through the Node Package Manager.
- Webpack – A module bundler.
- Angular – A structural framework for Dynamic Web Apps.
- React – Built by Facebook, a “View Layer” for sitting on top of JavaScript Web Apps.
- CoffeeScript – A separate language which compiles down into JavaScript.
Why is this the case? JavaScript on it’s own is quite a verbose language, and so people have built frameworks and other tools which make things easier to remember.
An example of this is jQuery, where instead of writing
document.getElementById('top').click()
You simply write
$('#top').click();
So, the list of things you need to know so far is:
- HTML
- CSS
- JavaScript
- A Javascript Framework such as jQuery or Angular
But wait, there’s more! We’ve skipped over CSS. CSS has a few quirks, such as the inability to assign variables (dynamic values), but there are things such as LESS, SASS and SCSS which are called ‘PreProcessors’ that solve this for us.
What a CSS PreProcessor does, is allows you to assign variables to items, and then once run through a compiler such as gulp or grunt, will output your CSS with the variables. This is great because if you want to change red to blue in your code, you don’t have to change every instance of “red”, you just change the one variable. Though this also introduces having to learn how to use a compiler such as gulp or grunt.
So, your list of things you need to know to become a front end web developer is this:
- HTML
- CSS
- CSS PreProcessor such as LESS or SASS.
- JavaScript
- A Javascript Framework such as jQuery or Angular
- A Javascript Task Runner such as gulp or grunt
- Knowledge of Node Package Manager
Once you know all of these you can start delving into the various CSS methodologies which exist. These methodologies can provide structure to your code, and implement design patterns which often remove difficulties in naming, or cascading issues and create predictable markup which teams can follow. Examples of these include:
- OOCSS – Object Oriented CSS
- BEM – Block Element Modifier
- SMACSS – Scalable and Modular Architecture for CSS
While not necessarily needed to learn, these methodologies work to make it easier for teams of developers to work on the same codebase, as it makes the resulting product more predictable and introduces a ruleset for the entire team to work to.
So, your list of things you need to know to become a front end web developer is this:
- HTML
- CSS
- CSS PreProcessor such as LESS or SASS.
- CSS Methodology such as BEM or OOCSS
- JavaScript
- A Javascript Framework such as jQuery or Angular
- A Javascript Task Runner such as gulp or grunt
- Knowledge of Node Package Manager
There are also things which sit on top of HTML, such as HAML (which is a HTML PreProcessor much like SCSS or LESS) or the HTML templating engines such as Twig, Smarty or Blade, but they cross over into Back End Developer territory as well, so I’ll be nice and not add them to your list of things to know.
Seems like a lot, right? Instead of the three languages I had to learn when I first started out, Developers starting out in 2016 have to know a minimum of 8 separate things, and know of around 15-20 others!
It may seem daunting, but it’s also worth noting that this is just for a Front End Developer. I haven’t even touched on PHP or PHP Frameworks (such as Laravel or Symfony), Composer (the PHP Package Manager), Model View Controller, Object Oriented PHP, or Version Control such as Git, CVS or SVN which a Back End or Full Stack Developer would need to know.
I’m happy I started out in 2004, rather than 2016, as I’ve been able to progressively learn all of these things while they’ve developed, rather than having to learn them all at once. Even though it does seem like a lot, all of the above do serve a purpose and there are reasons that they have been widely adopted. They do make development easier once you have mastered them all, I promise!