Learn all about one of the three pillars of the internet.
It’s a very popular programming language that started out for web browsers but evolved into much more—which means that, if you’re considering a career in web development, getting to know the language is absolutely essential.
If you’d like to skip ahead to a particular section, simply use the table of contents:
Created by Brendan Eich in 1995, it started out as a language that developers could utilize to make applications in the browser more interactive (think real-time updates to your to-do list application).
Since its beginning, it has evolved from a purely frontend language (a language that runs in the browser) to one that can be used for the “full stack” (browser + server). This means that, these days, it’s possible to create an entire web application without having to learn the syntax of other backend programming languages like Java or Ruby.
Due to this evolution, it has become a very versatile programming language and, arguably, one of the most useful to know these days.
Here’s how it works: When the browser reads your HTML file, the file is read line-by-line. Each line is interpreted in order from top to bottom.
- Line 17 renders the header.
- Line 19 renders the paragraph that won’t be changed.
- Line 21 renders the paragraph that will be changed.
- Line 17 renders the input box so the user can input the number.
- Line 19 renders the sentence into which the answer will be rendered.
- Line 21 renders the button the user will click after entering a number to get the answer.
- Line 25 basically says: “Run the stuff in the code block below me when a user clicks on the GO button.”
- Line 26 grabs the number input by the user and assigns it to a variable (to be reused later).
- Line 27 calls the pre-written function below (“calculateSquare”) and assigns the answer to another variable.
- Lines 28 and 29 populate the paragraphs with the correct values.
- Lines 32 -34 define the function that will calculate the square and return the answer.
The image above shows the results of clicking “GO” after entering 12 in the input box.
It’s become sophisticated enough to handle just about anything that other backend languages can.
Note: When developers say “Angular”, we usually mean the new version of Angular (currently Angular 14). The “old” Angular, AngularJS, is falling out of popularity, but is still relevant as many applications built in the past continue to run on it. These two frameworks (Angular and AngularJS) are very different, and most developers consider them to be different frameworks altogether, despite sharing a name.
A side note on libraries vs. frameworks
When talking about these three technologies, you’ll hear the words “framework” and “library” quite often. Let’s define what each of these terms mean.
Both libraries and frameworks are basically a bunch of code that someone else wrote that we can tap into and use to develop applications. However, there are some distinct differences between the two:
You, the developer, are in control of the flow of the application; where and when you want to tap into that pre-written code is up to you.
You can learn more about what they are in our beginner’s guide to programming libraries.
A framework, on the other hand, is pre-written code that suggests a defined structure that, should you follow it, allows for more efficient and easy-to-read code bases.
The framework is in control of the flow. You put your code in the right spot and the framework takes care of how the application runs. With frameworks, you can also tap into useful pre-written features—just like you can with libraries.
If you’re looking to learn more, we’ve created a full beginner’s guide to web frameworks.
Which are which?
AngularJS, React, and Vue in action
Take a look at what kind of great, pre-written functionality you can get with these three technologies!
A sample search bar utilizing AngularJS:
With this sample app, you can “search” for US States. Try entering “a” in the search box. It will immediately filter the list down to all states that contain the letter “a”. Now type “l”. Now you should see a list of all states that contain the letter combination “al”. Cool, huh?
A calculator application written with the help of React:
React was created with speed, simplicity, and scalability in mind. You can use it to build large applications that can manipulate data without reloading the page (much like Angular).
React can also be used in conjunction with other frameworks and it is known to be a bit easier for beginners to learn. In recent years, its popularity has skyrocketed, making it a solid choice if you’re looking to add to your skill set.
Take a simple app that uses Vue. Type something into the input box and watch it render instantly below the line.
This is beneficial by reducing coding effort and improving overall performance of the page. It’s gaining in popularity very fast, so it’s another great choice if you’re looking to add a popular skill to your skill set that won’t take a long time to master.
At the moment whether you go with Angular, React, or Vue (or all of them), you can rest assured that it will be well worth your time. All three are solid technologies that will surely be around for the foreseeable future. In the 2023 Stack Overflow Survey, React topped the Most Desired chart for the third year running, just ahead of Node.js and Next.js.
Whatever you decide to do, you can rest assured that it will be well worth your time and effort!