Full-Stack Engine

How to start in JavaScript in 2018 - From beginner to Full-Stack

JavaScript has become one of the most popular programming languages in recent years, ranking #1 in GitHub in 2017. Since its evolution from being the de-facto language in the front-end realm to gain enormous popularity in the back-end side thanks to the birth of Node.js in 2009, JavaScript has reached almost every spot of Software Development areas, from Databases, Web Services, Web Application Architecture and of course Front-end, where significant changes have taken placed too, with the growth of SPA frameworks like Angular, React.js, Vue.js and many others always coming at breakneck pace.

See also on JavaScript

Thanks to Node.js, it is inevitable to talk about JS development without talking about full-stack development, which is a great thing, having the same language in the front-end and the back-end. There is no need for a context switch, and if you know JavaScript, it's easier to become a Full-Stack Javascript Developer.

Besides, you can enjoy many of the benefits of the dynamic nature of JavaScript, like working with Cutting-Edge technologies in modern projects, with development types from Web Apps to Enterprise applications, often related to Big Data/Analysis and everything that needs high performance, scalability and flexibility. Nevertheless, to become a JavaScript Full-Stack Developer, you also need to become a Full-Stack Developer, independently of the programming language.

Full-Stack Development

The primary motivation to write this guide is to share with you the series of steps I followed to become a Full-Stack Developer, particularly a JavaScript one. I didn't begin with JS, before that, I used to work as a Full-Stack dev using other back-end technologies and languages, like SQL Server for databases and.Net with C# as the language, but also using JS frameworks in the front-end, e.g., Angular, Knockout, kendo and of course jQuery.

Things have moved fast in recent years, many of the technologies and frameworks used 2 years ago (or even less than 1 year) have already replaced by others. However, the fundamental concepts and technologies remain, no matter the stack you choose, if you come from Java, .Net, PHP, Ruby or any other back-end technology. The bases are the same, that's what counts. You need to do an extra step to learn a new language or programming tool. In the end, that's something we keep doing as developers!.

Last year (2017) I found an excellent guide of the topics you need to cover to become a Full-Stack Developer. I'd like to summarize them here adding context for JavaScript:

  1. HTML/CSS. A must-have for front-end work. There's not much to add here, as part of being Full-Stack Developer, front-end is a day-to-day work.
  2. JavaScript. Of course, we'll be covering this point in detail through this article in next sections.
  3. Back-End Language. We'll focus on JavaScript as our language on the server using Node.js.
  4. Databases and Web Storage. In our case, we'll be using NoSQL document (JSON) based databases like MongoDB or RethinkDB that makes a perfect match with JavaScript. However, SQL databases are always present, depending on the project's requirements.
  5. HTTP and Rest. In the JS world, we have several great frameworks like Express.js, Sails.js, Meteor.js, and others.
  6. Web Application Architecture. An essential skill set for every Full-Stack Developer and independent of the programming language, including AWS, Docker, Azure, and others.
  7. Git. More than needed for a Full-Stack or JavaScript developer it's just needed for every Software Developer.

In a previous post I listed several resources to learn about software development, you might kindly take a look to reinforce some topics.

The capacity to learn is a gift; the ability to learn is a skill; the willingness to learn is a choice
Brian Herbert

Now it's time to go deeper into the JavaScript specifics in our road to Full-Stack, starting with the language itself and then to go through different frameworks and platforms. Then, I'd like to close with some recommendations to boost your learning process. So let's begin!.

Note: In the following sections I'll be suggesting courses as learning resources for several topics. Most of these courses come from the online platform Udemy. I chose Udemy for my recommendations because they offer accessible prices and doesn't need a membership, you pay per course only once. However, there are plenty of other excellent online learning platforms.

Javascript and ECMAScript

As you might know, JavaScript is a programming language developed by an international standard called ECMAScript since the first edition published in 1997 [1]. There are other implementations born from ECMAScript, like ActionScript; however, JavaScript is the most popular one.

Vanilla JavaScript

Maybe you've heard this term before. Vanilla JavaScript refers to plain JS code, not extended in any way by any framework, like its the case of TypeScript or CoffeeScript.

There are a bunch of excellent resources to start learning JavaScript as a language. You can take a look at this article in Medium for a list of recommended books.

I recommend a course in Udemy called JavaScript: Understanding the Weird Parts, taught by Anthony Alicea. It focuses on getting a good understanding of how things work in the language, to write better code, a way of thinking I also share and encourage you to follow.

Note: This definition, however, might be confusing in some cases. For example with new specifications like ES 2017, we still need a transpiler like Babel.js to compile code to ES6, to support the majority of the browsers. So, what is Vanilla JavaScript in this case? Well, I'd Vanilla JS is the code a browser can handle natively or the code you can write in inspect mode.

ES6 or ECMAScript 2015

Moving into more recent topics in the JS world, ECMAScript had a substantial update in 2015, adding for the first time syntax elements long time missing for JavaScript, including classes and modules, iterator, for/of loops, function generators, promises and several others.

Perhaps the second most important topic to master in JavaScript is ES6, as it includes many of the elements that we as programmers use on a daily basis.

Bellow, there's a list of these topics pointing to the resources where you can learn more about each one.

ES7 or ECMAScript 2016

Since 2015 release, JavaScript has been getting revision updates every year. With ES7 we got some minor features, we can enumerate the most remarkable:

ES8 or ECMAScript 2017

With revision the revision of ECMAScript 2017, we got more important features again. Among the new aditions we can list:

  • Object.values() and Object.entries()
  • String.prototype.padEnd()
  • String.prototype.padStart()
  • Object.getOwnPropertyDescriptors()
  • Async Functions
  • async function expression
  • await

In a previous post, I wrote a detailed article about these features in JavaScript 2017.

TypeScript

TypeScript is a superset of JavaScript supported by Microsoft. It adds optional static typing to the language, including the use of Interfaces, Type annotations to variables for compile-time type checking, Generics, and several others. Take a look at this tutorial at typescriptlang.org for more details.

TypeScript is the default language used for Angular (starting at version 2) programming. So if you want to go with Angular, then you have to learn it. Nonetheless, it can be used with other frameworks as well.

You can learn the basics of TypeScript in this free course called Introduction to TypeScript.

What about jQuery?

jQuery was for many years the number one JavaScript library. Used primarily to make DOM manipulation tasks in a cross-browser compliant way.

jQuery has lost popularity in recent years, as is evident in this article, where you can see some statistics on jobs requiring you to know jQuery. In spite of that, I think it's still useful to know some jQuery basics because in some cases, you'll need to do some DOM level manipulations that are difficult with high-level libraries like react or angular.
Additionally, you can learn how to work with selectors, which are similar to the way CSS selectors work.

Udacity offers a free Into to jQuery you can take to start with jQuery.

Front-end JS Frameworks

Moving to Front-end development, some frameworks deserves your attention.
The chances are that you've read or heard that JS frameworks live shortly and there are new ones every month or even faster. Well, of course, this is an exaggeration ;). Nevertheless, is a good idea to learn something new, many people are using that and actively maintained by the community, this increases the chances to get a new role in that technology or gain the contract for a new project.

As we saw earlier React.js is likely to keep its crown in 2018 and other libraries like Vue.js and Angular are still likely to be used for a while.
Personally recommend you to learn any of this frameworks in 2018, in order of relevance:

  1. React.js: The most secure bet for the long term. Supported by Facebook.
    Very often React.js is used in combination with Redux.js.

You can find an excellent course at udemy called Modern React with Redux taught by architect Stephen Grider

  1. Angular: Second in popularity, is the oldest of the frameworks used nowadays (taking into account the first version 1.x). Supported by Google.

My recommendation for Angular is a course called Angular Crash Course for Busy Developers, imparted by Mosh Hamedani.

  1. Vue.js: The newest in this list and a big surprise in 2017, gaining considerable momentum and popularity. Supported by the community.

An excellent resource for learning Vue.js can be found with the name Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex), taught by Web Developer Maximilian Schwarzmüller.

Node.js

Node.js is a server platform for running web applications. It uses the V8 JavaScript engine at its core and extends its functionality using a non-blocking IO model for handling incoming requests.

As a JavaScript developer, you need to know about Node.js and how it works underneath to take all of its potentials. To learn about Node.js and its specifics, I can again recommend a course taught by Anthony Alicea in Udemy called Learn and Understand NodeJS. It additionally covers to some extent the other parts of the MEAN stack (MongoDB, Express.js, Angular, and Node.js).

Express.js

Express.js is a basic web application framework. It can be used to build a web application in a server-rendered page or SPA fashion. In this way, it's not dependent on the front-end in any way. You can quickly create APIs, routes and write customized responses to client requests.

Express.js is the base for some other web application frameworks that extend its functionality like it's the case of Sails.js.

Sails.js

Sails.js is the first successful MVC web framework for Node.js. Based in Express.js and inspired by the popular Ruby on Rails framework. This framework comes with a great feature set that includes:

  • A complete ORM called Waterline, that lets you define a model in code, and the framework automatically creates the migrations in the database you connect with it, including disk storage, MongoDB, MySQL, Redis, PostgreSQL, and others.
  • Web Sockets for real-time communication applications
  • Routes based on Express.js router engine.
  • Web services with Blueprint API, allowing you to have default API endpoints with only defining the class models in your project.

In previous posts, I shared a couple of detailed guides to building a new project with Sail.js using React.js and Angular.io. You can read these guides in the following links:

Other web app frameworks

There are other excellent JavaScript web app frameworks wort of attention like Meteor.js, Hapi.js and Loopback.

NoSQL Databases

Databases related to JavaScript are usually in the NoSQL category, specifically document based databases using a JSON based format to store information.

NoSQL databases come to solve some of the scalability and flexibility issues in traditional SQL databases when working with large amounts of data or Big Data, as it's not so rigid and doesn't have the data integrity rules from relational databases.

MongoDB

MongoDB is a document based that uses JSON documents and schemas. It is the most popular NoSQL database (as of December 2017 [2]) and part of the MEAN stack.

MongoDB enjoys its certification program available at the Mongo University. Where you can choose between Developer Associate, oriented to developers building applications integrated with Node.js, and DBA Associate for DBA administrators with knowledge in MongoDB.

You can use MongoDB in your projects locally or in the cloud, thanks to a free instance of 500 MB at mLab and learn more about MongoDB at first hand.

For study purposes, you can take this course at Udemy: The Complete Developers Guide to MongoDB

RethinkDB

RethinkDB is another document-oriented database using JSON, designed for handling real-time updates for query data in applications.

According to the DB-Engines.com rankings, as of December 2017, it was the 55th most popular database.

Personal Projects

The only way to learn a new programming language is by writing programs in it.
Dennis Ritchie

As a closing note. I encourage you to learn not only by reading from books and taking courses in academia (which are of course very important and essential) but also by doing your projects, that's when you reinforce of what you learned from studying and acquire a deeper learning level.

There are plenty of resources to host your applications on the web. Here I list 2 inexpensive hosting services for hobby projects:

  • Heroku. It offers a free instance up to 512 MB ram (sleeps after 30 min of inactivity) and a $7 a month instance, up to 512 MB ram.
  • Digital Ocean. Starting with a $5/month droplet up to 512MB ram and 20GB SSD disk.

That's all I have for this series of recommendations on how to start in JavaScript for this 2018. Thank you so much for reading this blog please stay tuned for more exciting news and full-stack topics. Happy New Year!.


  1. https://en.wikipedia.org/wiki/JavaScript ↩︎

  2. https://db-engines.com/en/ranking ↩︎

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.