What is frontend development?

If you stumbled upon this article, you are probably familiar with frontend development and React. If not, let’s cover the most basic definitions first. What is frontend development?

 

Development is divided into two groups: backend and frontend. Frontend development refers to the development of the graphical user interface (GUI) of a website or web app.

 

Frontend development is based on a triad of languages: HTML, CSS, and JavaScript, each taking care of a different level of structure. Let’s review a simple definition and function of each language:

 

• HTML (HyperText Markup Language): the structure, the semantics of the page, a completely static structure
• CSS (Cascading Style Sheets): the presentation of the document or site, the cosmetics, how to embellish a site
• JavaScript: where the programming starts, what gives life to a website, and makes it responsive

 

A frontend developer then works with these three languages to create software. Their projects can be desktop or mobile websites, adaptive or responsive, reactive or static. As a rule of thumb, a frontend developer works on the side of technology with which the users interact. They focus on how the website feels and responds to actions from the users.

 

Even having only these three languages in mind (the basics for the front end), developers have plenty to choose from, especially in the JavaScript part. How is that? With JavaScript frameworks.

Javascript Frameworks

We recently talked about the most popular JavaScript frameworks for 2022. Among them, we listed Vue, Angular, and our focus of today's article: React. Before going into details about React, let’s review what a JavaScript framework is and why they are a great resource.

 

JavaScript (JS) is a programming language and one of the core technologies at the heart of the World Wide Web. (I get an exciting feeling of sci-fi every time I mention it, the Web, I mean). Most sites use JavaScript to administrate page behavior, and all major web browsers have a dedicated engine to execute JS code.

 

Among these sites, over 80% of them use a third-party JavaScript library or framework for their client-side scripting. These third-party additions have become an integral part of JS coding. Here we find our usual suspects: React, Angular, Vue (for the front end) or Express, and Next.JS (for the back end).

 

What are they? Basically, they are a collection of JS libraries that give devs pre-written code for routine tasks. These frameworks provide the structure that helps make web applications and sites: a bunch of JS code that someone else wrote, making it easy to use.

 

Frameworks have three main features: rendering, data handling, and event handling. These are supported by an MVC (model view controller) architecture. But if they are so similar, why choose React?

What is React

React (React.js or ReactJS) is a free and open-source frontend JavaScript library for building user interfaces (UIs). If you have been paying attention to what I have told you before, you are familiar with most of these terms, except perhaps open source. (Everybody has a strong feeling about what free means).

 

React was created by Facebook, later Meta after being reforged in Mount Doom, and a community of individual developers and companies have backed it. It has been over eight years since its release. Presently, it challenges other JS frameworks and libraries such as Vue and Angular.

 

For someone starting in web development, React offers an easy-to-learn environment that works for projects of any size. Thanks to its wide adoption, both newbies and experienced developers add resources for a growing ecosystem. In this way, tons of tools and extensions stem from an open-source community perspective.

 

Among other characteristics, React presents itself as:

 

• Declarative: essential to create interactive UIs easier. A dev can update and render code automatically for every data change and even get easier to debug code.
• Component-Based: With this feature, devs can build independent components to make complex UIs.
• Learn Once, Write Anywhere: If looking to develop new features without rewriting code, React does not assume what other technologies you use.

 

If all of these features are not enough, React also has a version to create native apps for Android and iOS: React Native.

 

If you are eager to learn React, consider that you need to know HTML, CSS, and plain JavaScript. Also, handle terms such as DOM, ES6, and npm. This is not a complete React tutorial, not even close. You can find plenty of them on your own, but rest assured that it is an extremely useful tool in today’s development landscape.

 

Has React piqued your curiosity? Not a developer? That's okay! Neither am I. In any case, knowing what today's technologies do and having a crude understanding of how they work can be essential knowledge to leverage in the future. (Or just a way to throw an intelligent comment on your next dinner with developers).

 

Some developers today take a stand against React and put forward other options as Svelte. They usually have a couple of valid points, but the reality is that many companies are still looking for developers capable of using React. As with most things in technology, React will someday be obsolete and vanish from our shifting landscape, but that is not today and probably not tomorrow.

 

At Awkbit, we are very conscious of the challenges of an ever-evolving industry that constantly sheds its skin, leaving all the excess things behind. Even with this outlook, we believe that HTML, CSS, and JavaScript are not going to fade away any time soon. The front end is still a key development area full of job opportunities and starter points to display creativity. Today, React still stands as a valuable tool in the shifting sands of web development; tomorrow never knows.

 

Are you willing to take your first steps into frontend development? Are you looking for an experienced mentor?