10 things to learn for becoming a solid full-stack JavaScript developer
…and some tips for getting started
In the world of programming, finding beauty in simplicity means we want to reuse the same tool/language wherever possible and avoid as much boiler plate code as we can. If you’re a web developer, you’re probably aware of the fact that JavaScript can be used as both a front and a back-end language. Maybe you’re already considering full-stack JavaScript or actively using it. Regardless of where you are, here’s a list of 10 things you should learn if you want to be a full-stack JavaScript developer.
Quick Note: being a full-stack developer means being able to write server code (back-end) running on the OS which grabs data from the database and displays it to the user in the web browser (front-end).
1. Have a fundamental understanding of JavaScript
Of course you can’t do full-stack JavaScript development (or full-stack any web development for that matter), without learning JavaScript itself. You don’t need to be a grand-master to get started, but should should have a basic understanding of the paradigm and control flow. Contrary to what some may say, JavaScript is not a hard language. It’s got its fair share of quirks and gotchas, but once you get used to these, it’s a really fun language to work with. A lot of the example code you run into out there might be sloppy, but when used right, JavaScript can actually be written pretty eloquently.
The fact that it’s a both a dynamic and a prototype based language might feel a bit irksome to those from a traditional object-oriented background, but here’s a quick tip to get started I wish I knew early on. JavaScript basically boils down to 2 types: objects and primitives. The 5 primitives are boolean, number, string, null, and undefined; everything else is an object. Functions, classes in ES6, and arrays are all objects under the hood. Objects at the most basic level can be thought as a set of key/value pairs with the key always being a string and the value being… well whatever you want: a primitive, another object, a function, array etc. Feel free to check out this article if you want to learn more about JavaScript objects.
Probably the next most important aspect of JavaScript is its heavy emphasis on asynchronous programming. This allows the main thread of your program’s execution to continue while waiting for some other method to finish. The two main ways this is done is through callbacks and promises. This medium article here is a great introduction to asynchronous and synchronous programming and this one provides a good overview of promises.
2. Front-End framework
Single page applications are the way to go nowadays due to performance advantages. Learning a front-end framework is the most practical way to make one. The three big ones are Angular, React, and Vue, but of course those aren’t your only options. There’s a bit of a feud going on in the JavaScript world as to which one is the best. If you google “Angular vs React”, you’ll see quite a few articles scattered across the internet comparing each one’s advantages and disadvantages. I’m partial to Angular for the reasons mentioned here. I will concede though that there are some situations where React or Vue might be a better fit. I’d recommend reading a number of these articles and getting a high level understanding of the differences, then choosing the one that best fits your needs.
3. Bootstrap 4
Today, when nearly all web apps need to look pretty whether they’re opened on a regular desktop or mobile device, you’re not going to have time to write all the necessary CSS code yourself to make that happen. There’s also many features in front-end web development that can enhance user experience such as popovers, popups, navigation bars, alerts, etc. If you try to implement these things yourself, it’s just going to result in a massive amount of boiler plate code that’s going to take forever to development and maintain. Bootstrap is a front-end library created by Twitter which provides a plethora of utilities. It includes a lot from styling to interactivity so you don’t have to write them all from scratch.
Of course you don’t have to know all of Bootstrap’s features right off the bat, but I highly recommend getting familiar grid layout and navigation bars before starting your first web app. They are pretty ubiquitous across the web and are vital to making your site mobile friendly. The two major front-end frameworks mentioned before (Angular and React) have libraries for integrating with Bootstrap, so you don’t have to worry about its features not being compatible within these frameworks.
4. HTML/CSS
Even though Bootstrap can carry a lot of your CSS weight for you, you’re still going to want apply your own custom styling and make slight modifications to whatever front-end libraries you may be using. Most of the things you need to do in CSS can be quickly googled for, but if you really want to spice up your site and have any kind of love for design like I do, you’ll need to have a pretty good understanding of CSS. This includes tasks like importing and styling custom fonts, setting properties based on screen width that Bootstrap grids might not be able to cover, and using CSS selectors like :nth-child(). As for HTML, there’s not much to learn right away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like <span> and how they differ from block ones like <div>. This will save you a huge amount of headache when fiddling with your CSS code.
If you’re like me you might find HTML with its open/close tags and CSS with all of its selectors a little bloated. The good news is there are number of preprocessors out there which make these template languages may more fun and terse. For Html we have tools like Pug and HAML: HTML preprocessors aren’t used as much as CSS ones. For CSS there are a number of options such as Stylus, LESS, SASS, and PostCSS. Angular’s command line has plugins for a number of these built into it and there are separate plugins for React as well. I’m partial to Pug and Stylus because they’re so feature rich.
5. NodeJS and a back-end framework
NodeJS is the environment for running JavaScript on the back-end just like you would any other programming language. Of course being on the desktop there are going to be some slight differences from JavaScript in the browser. Both the browser and Node execute JavaScript and they both use the V8 engine. The primary difference is the browser adds an additional API to access the DOM, and Node adds an API to interact with the operating system. If you want to do full-stack JavaScript, you have to know NodeJS. Good news is you don’t have to learn a completely different language.
Just like the front-end, you have a number of options when choosing a back-end framework. ExpressJS is however kinda the de facto standard. Express makes it easy to spin a back-end web server and start writing APIs. If you want to play around with different back-end frameworks, I’d recommend starting off with Express and then experimenting once you got a feel for back-end JavaScript.
6. Learn TypeScript
JavaScript is so yesterday; it has countless issues. Cross browser compatibility, different versions of NodeJS, no type safety which makes scaling difficult, and only semi object-orientedness with ES6's class keyword. TypeScript transpiles to clean ES5 code which eliminates much of the compatibility problems. It also enables you to write JavaScript in a much more traditional object-oriented way similar to C#/Java.
Using TypeScript has made me a much better programmer and helped me understand concepts like interfaces, inheritance, access control (public, private, etc), and abstraction much better. If your background is OO like mine is, TypeScript will feel way more natural to you than regular JavaScript. Another useful point about TypeScript is it can be used with a lint file which enforces certain coding standards.
7. Get familiar with an API calling tool
A big mistake a lot of new full-stack developers tend to make, myself included, is they’ll trigger APIs from the front-end while developing the back-end. This will massively increase the time it takes to implement your server code. You’ll have to reenter your values every time the page is refreshed and navigate to the portion of the front-end where the APIs are called. To speed up this process you should develop your back-end and front-end separately. Get familiar with an API calling tool like Postman or SoapUI, so you can call your APIs without having to touch the front. Know how to use them for authenticated routes as well you can make API calls without having to login to your app.
8. Know some SQL
Despite all the hype around NoSQL databases and the popularity of MongoDB among NodeJS developers, relational databases still tend to be the most practical choice for many applications. Regardless of whether or not you’re using JavaScript for the back-end, decent SQL knowledge should be a prerequisite for anyone who wants to call themselves a full-stack web developer. Just like JavaScript, you don’t need to be an expert, but to start off you should know how to do basic joins, create/update tables, and insert data.
Most of the major relational databases, notably MySQL and PostgreSQL, integrate nicely with NodeJS. You can talk to them just as easily as you would MongoDB or any other NoSQL database. Personally, I find that standard SQL queries tend to be a little more intuitive than some databases which query using JSONs (JavaScript objects). If you want to store your data as JSONs, guess what, PostgreSQL and MySQL still let you do that.
9. Unit and End-to-End Testing
Do not, I repeat do not underestimate the importance of testing. I’ve noticed in the real world there is a tendency to neglect unit-testing especially on the front-end. Testing will not only prevent bugs for the users but also make your code much more robust and force you to review it. Some frameworks like Angular have tools for testing built in so you don’t have to configure much; you can just start writing tests.
Any element on a web page whose behavior changes based on user interaction needs to be unit-tested. In the back-end, all routes and public methods which can be triggered by a user also need to be unit-tested. End-to-end testing (aka integration or e2e testing) should be done for any user interaction which spans multiple web pages and talks to the back-end. For example, logging in with a redirect would need to be e2e tested. If a user is redirected to lets say a profile page after successfully logging into their account, that needs to have an e2e test.
10. Basics of User-Authentication
There are a number of ways you could go about making your website secure: client-side tokens, session storage, handing off authentication to a third-party tool like MS Active Directory. You don’t need to know them all, but you should have an idea of what’s available. Once you do, pick the option that is easiest and build up your knowledge from there. Also, get a general idea of the major forms of attack that hackers can use against your website. You don’t need be an internet security expert, but know the main ones so your site isn’t susceptible. This would include things like cross-site scripting requests and SQL injection attacks. There’s a good article here which covers some of the basics of internet security.
For securing the APIs in your back-end, I recommend starting off with JSON web tokens (JWT). NodeJS has some great third party libraries for using them with Express and they’re pretty easy to work with. JWTs are a form of client-side authentication which you can use to only allow valid users (i.e. those who have logged in) to make requests to your back-end. JWTs can also store encrypted JSON objects so you can identify who is making the secured request. If you want to create persistent information for users (i.e. storing a shopping cart for a user when they leave the site), you’ll eventually need to learn about sessions.
How do you feel about this list? Feel free to post any comments if you think something is missing or not needed. Keep in mind the JavaScript world is huge so there is a lot to cover, but these were the topics I needed to teach myself when making my first website. Even if you’re a new web developer and not sure you’ll end up using full-stack JavaScript in the future, knowing most these skills will make you a more productive well-rounded coder.
P.S. If you’re interested in using back-end TypeScript with ExpressJS, please checkout my library OvernightJS which adds decorators to express routes. Here’s a link to a Medium article which describes how to use it.
Happy web-deving :)
