Despite all the “quick tips to fantastic development” articles around, software is hard.
Software is hard, and that might just be an advantage! Despite being an ever increasing population, good developers are still a rare breed. A good foundational knowledge and the right set of tools can take you far ahead – and that’s what we’re here to help you with! With that, let’s explore the language that the internet runs on – Javascript.
All software products have two ‘stacks’ – a client-side and server-side, and it is almost impossible to create a full-fledged application using only one of these technologies. As a result, building functional applications involves tools and languages for the front-end, backend, database management, and sometimes server management – which come together to form a full-stack. Some well-known stacks include:
- LAMP: Linux, Apache, MySQL, PHP
- MEAN: MongoDB, Express, AngularJS, Node.JS
- Ruby on Rails: Ruby, SQLite, PHP
- Django: Python, Django, MySQL.
These stacks aren’t necessarily all JavaScript-based…yet. But as per Atwood’s Law, stated by Jeff Atwood in “The Principle of Least Power” :
“Any application that can be written in JavaScript will eventually be written in JavaScript.”
And that is what is happening today. Both individual developers and development teams of Groupon, Airbnb, Netflix, Medium, PayPal, and more are shifting from traditional stacks to modern, JS-based stacks – and that is what we’ll be focusing on today!
So, without further ado, let’s dive deep into the essential toolkit for a JS full-stack developer.
Front-end Tools
Front-end is what your browser renders and what your customers see.
It is what you see in front of you – – the layout and structure of the screens (UI) and the way they are connected(UX) – that which is far more than the color of the button or the hover effect on the hyperlink.
Front-end is the face of any application, and to become a good full-stack developer, it is important to have a good sense of design, an eye to detail, and a command over frontend tools and technologies. Working with front-end usually requires the usual ingredients — HTML, CSS, and JavaScript (no surprises there!).
However, to take your game up a notch, you can explore some frameworks and libraries and spice things up. These frameworks are essentially used to help you speed things up while building a responsive and functional front-end. There are some CSS frameworks that you can definitely explore to simplify your front-end-dev process because these frameworks have modules defined that can be easily picked and used. A couple of such frameworks, which we definitely recommend exploring, include:
These two frameworks will take care of pretty much most of your CSS-woes. But to make the website functional and dynamic, you’ll need JavaScript. If you’re a complete beginner here, you can get familiar with the language by starting out with Vanilla JavaScript. However, remember that it’s not 2008, and JavaScript has grown way beyond just vanilla – it comes in all flavors now!
One of the must-learns for Javascript developers is jQuery – while it isn’t a framework in itself, jQuery is one of the most functional JS libraries that will drastically cut short the time it takes you to implement high-fidelity JS components in your code.
Above that, to complement your beautifully designed website with user-friendly functionalities and dynamism, you can consider exploring at least one of the below-listed JS libraries and frameworks thoroughly:
With these CSS and JS frameworks, you should be able to create fully-functional front-end websites. At this point, you can also start exploring AJAX to handle API calls – it’ll come handy during back-end development. If you’re looking to check out other frontend JS frameworks, Github has an amazing collection – here’s a good list to explore: Front-end Javascript Frameworks on GitHub
Moving on.
Backend Tools
Backend development is what handles the behind-the-scenes activities of web applications. Using backend tools and technologies, you can establish a connection from your front-end to the database and display the data on-screen. To put it simply, a backend is what differentiates a website from a web app.
There are tons of technologies used for backend dev, but since we are focusing on JavaScript, let’s talk about the JS-powered champion of backend that has taken programmers by a storm— NodeJS.
The popularity of NodeJS (which is, to clarify, a runtime environment for JS) shouldn’t come as a surprise given its versatility and community support. Added to this is the huge number of frameworks built on top of Node, affirming the fact that JavaScript technologies have created a complete ecosystem of their own in this area.
Once you have explored the fundamentals of Node, you should definitely consider learning ExpressJS – a lightweight routing and middleware framework built upon Node. This combo is sufficient to be a skilled developer, however, you may consider learning other frameworks and technologies based on your specific needs. Here are a few other that are built on Node:
Are we there yet?
If you’ve covered the technologies we’ve discussed so far, you’ve made it enough to be called a full-stack developer, but the journey isn’t over yet.
It only gets more exciting as you armor yourself with the full strength that JavaScript offers!
For starters, consider ElectronJS, a framework to build desktop applications using JavaScript.
Next, there are hybrid and cross-platform app development that you can explore further.
Imagine an ideal universe where you could plug in your JavaScript skills into everything — websites, desktop apps, and even apps for smartphones. JavaScript offers many such mysterious (because there are new ones being built each day – just explore GitHub!) JavaScript frameworks that help you develop Android or iOS apps. Turns out these mysterious frameworks aren’t very mysterious after all. In fact, they are quite intuitive and use JavaScript in more or less the same way that you’re used to.
Without further ado, here’s a list of such technologies:
Are Frameworks all I Need to Know About?
Yes and no.
Yes, because frameworks allow you to do a lot of crazy cool stuff quickly. And without a doubt, by having an in-depth knowledge of front-end and backend tools, you’re on your way to being called a full-stack developer. So, in a crude sense, frameworks are all you need to make stuff.
But, there’s another, often overlooked aspect of being a developer – which is basically making the lives of you and people working with you easier. We’re talking about a set of tools that can potentially save you hours of hair-pulling and frustration, especially when coding for software that runs enterprises and not just your personal projects.
Some such tools include:
Version Control
Version Control has always been synonymous with Git and GitHub. And without a doubt, you should be comfortable with working on these tools. However, other options, too, exist, including:
Package Managers
While frequently overlooked by novices, package managers help you install and manage the various libraries and packages that your project might need. Many of you may already know NPM — the famous Node Package Manager. However, again, other options exist.
Yarn is a package manager that is quickly gaining traction because of its speed and a few other advantages over NPM.
Bower is yet another package manager for the web.
You can explore other options and find the package manager that suits you the most!
Other Tools
A detailed list here might be overkill, especially if you’re just starting out – so here’s a quick list of tools that you will eventually have to get familiar with:
- Babel — a “transpiler” for JavaScript that lets you compile code into a format compatible with your target browsers
- Webpack — a bundler for your applications that has gained a lot of popularity in recent times
Deployment Options
One final topic to explore is getting your applications online. Here are some of the popular server-as-a-service options that you will want to use in order to get your app out in the open:
Concluding Thoughts
That was a lot of information, wasn’t it? Take your time and gradually get familiar with the tools and frameworks you like – there are no perfect solutions, but some might be far better suited to your style of development. If you’re looking to explore some other fantastic resources for full-stack development, here’s a comprehensive list: https://docs.google.com/document/d/1UZVX1GLBsD3R3W9ZpgWpIDg3grLm1z62kuj_syNPZpM/edit?ts=5e6f2b60