Frontend vs. backend technologies
So what is a frontend technology and how does it differ from a backend technology?
To start with, the terms 'frontend' and 'backend' are most commonly associated with web development which is one of the most prolific fields of computer science and software engineering.
A frontend technology is basically anything that is concerned with building the frontend of a website or web application. The 'frontend' is simply whatever the user ultimately sees on his/her device.
Following from the increasing complexity of web apps over the years, we now have many many new frontend technologies to help us in designing and adding interactivity to our web applications. They include things such as Angular, Vue.js, React, Bootstrap, Tailwind, SASS, SolidJS, Svelte, and so on and so forth.
On the other side of the mirror we have backend technologies.
A backend technology is simply anything that is concerned with the backend of a website or web application. The 'backend' refers to the web server. Hence, a backend technology is anything that runs or helps perform computational tasks on the server of a website.
Some highly popular backend technologies are PHP, Python, Ruby, Java, Go, Redis, MySQL, PostgreSQL, and lots and lots of frameworks built around these languages and database systems.
Before beginning to learn any new web technology, it's crucial to know exactly which category it falls in. That helps us possibly guess what we can and can't do with the technology.
So what does it exactly allow us to do on the frontend? Let's see it...
It's a high-level, scripting language that is parsed and executed by a web browser program.
What is an implementation?
A computer language is merely an idea, an abstraction, for talking to a computer.
A piece of software that is capable of understanding a piece of text written in a computer language, and then possibly even executing it depending on the language, is called an implementation of that language.
The implementation is free to use any methodology to bring the mere lines of text of the language to life by compiling them or executing them, as appropriate.
There might be, and usually are, numerous implementations of a language. Theoretically, a language's implementation could even be written entirely in the language itself and many already have been!
In particular, it supports the procedural, object-oriented and functional paradigms.
However, a declarative style can be achieved easily via its functional paradigm. In a declarative style, which is the opposite of the imperative style, source code describes 'what' is being done — the 'how' portion is abstracted away from the programmer by the language.
If all these terms are completely new to you, don't get worried — you'll get to know about all of them throughout this course and your journey of programming.
Into the stats
Let's take a brief look over some of these tools.
- Angular, built by Google, to develop robust web applications.
- Vue.js for building user interfaces, created by Evan You.
- Svelte — "a radical new approach to building user interfaces."
In addition to these frameworks, there exists a plethora of libraries to aid in performing complex tasks such as constructing UIs, visualizing data, lazily loading media, polyfilling unsupported features across browsers, and so on and so forth.
In addition to this, we have other libraries such as:
- React, built by Facebook, to help us create interactive user interfaces.
- D3.js for data visualization.
- anime.js for complex animations.
- Chart.js for creating graph and chart diagrams.
- Swiper for creating highly-interactive mobile touch sliders.
- Lozad.js for lazily loading resources.
- Modernizr for detecting and polyfilling features across browsers.
- MathJax for mathematical notation.
...and so on and so forth.
Can we really expect good figures here?
But what really is that good income, in numbers?
Obviously, this all varies across different countries, cities, salary surveys, and most importantly, across different experience levels.
- Add, update and remove HTML content dynamically.
- Add, update and remove CSS styles from specific elements or the whole document.
- Make web pages interactive by listening to events.
- Download resources as needed.
- Get dimensions of given elements.
- Validate and interact with form data.
- Work with timers.
- Process cookie information and even create cookies.
- Enable drag-and-drop behavior.
- Create highly-controlled animations.
- Store data locally via the HTML5 Storage API.
- Create real-time web socket communcation.
- Interact with the microphone and camera hardware.
- Create 2D or 3D games using WebGL and other low-level APIs.
- Asynchronously talk to a server.
- Perform multithreading via service workers.
- Paint graphics using the canvas API.
- Work with audio and video media.
- Collect analytic information.
- Create Single Page Applications, or SPAs for short, resembling native desktop applications.
- Work with binary data using array buffers.
Before learning any new technology in the world of computing, the first question that comes to the mind of the learner is 'why should I learn this?'
No installations required
Huge support already available
Developers are continuously developing pages, creating helpful tools, writing blog articles to increase the awareness and core understanding of the language.
Very easy to learn
It is surely huge, but not something that'll require a lot of effort to get into our minds, as opposed to languages such as C++ that do have some sort of direct correspondence with machines in their syntax.
Can open up new learning paths
From now onwards..
Starting from the next chapter and then going all the way to the very end of this course, we will introduce you to each and every single aspect of the language that'll ultimately make you capable enough to build any program whatsoever for the frontend.
In short, it'll be an amazing journey of learning one of the most popular languages out there!
The real question is: are you ready?