FM-Wiki

What are Modern Frontend Frameworks?

by: Ally | Published: 2021-08-18

Why Javascript?

All of the modern frameworks we will be discussing here are based on Javascript. But why Javascript? To answer that, we have to talk about the role of Javascript in a web application. We'll also go over the other lanuages we use, for a complete picture. Let's use anatomy as an analogy.

HTML

You can think of HTML as the skeleton for the site, it acts as a structure that holds everything together, and is the foundation upon which everything is built.

CSS

CSS is the styling of the website, it makes everything pretty. It's essentially the skin, hair, and clothes.

Wordpress Database

The database is sort of like the brain. It acts as the memory and stores the content for the site.

PHP

PHP grabs information from the database so we can put it into the HTML. As such, PHP is like the nervous system.

Javascript

Javascript can actually manipulate and detect what you see on the screen - known as the DOM. When you move your mouse over a button and it changes color, Javascript is what detects the mouse on the button and indicates that the CSS needed to color the button should be applied. So Javascript is like muscle, it gives movement and interactability to the site.

At this point, we know that Javascript handles tracking what the user is doing and figuring out what the correct response is to the user's activity. At their heart, the main goal of Javascript frontend frameworks is to be really good at updating what you're looking at quickly and accurately, while simultaneously reusing as much code as possible. So, a Javascript framework is just a way of efficiently updating the site with the right feedback for the user, but working with the browser in such a way that the site remains fast and responsive.

Examples of Modern Frontend Frameworks

React

-Built by Facebook

-Most used framework, and the oldest one

Angular

-Backed by Google

-Least used framework, and the youngest one

Vue

-Built by a previous Google employee

-In some ways, it's a combination of both React and Angular

A comparison of these frameworks

How is Firm Media using these technologies?

At the moment, this wiki is the best example of using frontend frameworks. Its construction includes Vue. There are a few sites which have React or Vue on areas that do not have content that has to be crawled by search engine bots. A couple of sites have pop-ups built with React, and Renuance's site has a widget built with Vue.

Moving forward, the most important thing the developers will need to do is to figure out when we should use frontend frameworks and how to make them SEO friendly. Site sections with a large amount of heavy content to load - such as galleries and sliders - would be good contestants, but more testing and research will be needed to make sure that our SEO would not be adversely affected.

Back to All Notes