Why Do FrontEnd Frameworks Exist | Lecture 07 | React.JS 🔥

Summary

Front end frameworks like React exist to simplify the complex task of keeping user interfaces in sync with data, a challenge that became pronounced with the rise of single page applications. These frameworks reduce the need for direct DOM manipulation and centralize state management, thus preventing spaghetti code and numerous bugs. They also enforce structured coding conventions, promoting consistency in development, especially within teams, leading to a more maintainable and coherent codebase.

Takeaways

• 📚 Front end frameworks like React exist to simplify the complex task of keeping the user interface in sync with data, which is a fundamental challenge in web development.
• 🎯 Before frameworks, websites were server-side rendered, meaning the server assembled the page and sent it to the client, whereas modern web applications are client-side rendered, with the browser handling the rendering based on data from an API.
• 🌐 Single page applications (SPAs) are a result of client-side rendering, providing a seamless, app-like experience without page reloads as the user interacts with the application.
• 🛠️ Vanilla JavaScript, while capable of building SPAs, requires extensive DOM manipulation and can lead to complex, hard-to-maintain code, often referred to as 'spaghetti code'.
• 🔍 State management in Vanilla JavaScript often involves storing data directly in the DOM, leading to scattered and difficult-to-track state changes, increasing the risk of bugs.
• 💡 Frameworks like React, Angular, or Vue.js solve the problem of data-synchronization by providing mechanisms to efficiently manage state and update the UI accordingly.
• 🏗️ Front end frameworks enforce a structured way of coding, which helps developers build applications more efficiently and with less code entanglement.
• 👥 Using frameworks promotes consistency in team development, leading to a uniform codebase and product, which is beneficial for collaboration and long-term maintenance.
• 🚀 Modern web development trends are heavily influenced by JavaScript frameworks, which have become essential tools for creating rich, interactive web applications.
• 📈 The rise of SPAs and the complexity of managing state in Vanilla JavaScript have made front end frameworks not just convenient, but almost necessary for large-scale web application development.

Q & A

Why do front-end frameworks like React exist instead of using Vanilla JavaScript?

Front-end frameworks like React exist to simplify the process of building complex web applications. They handle the difficult task of keeping the user interface in sync with data, which is a challenging problem when using Vanilla JavaScript due to the need for extensive DOM manipulation and the risk of creating entangled, hard-to-understand code.

What is the main difference between server-side rendering and client-side rendering?

In server-side rendering, a website is assembled on the backend and the complete HTML, CSS, and JavaScript code is sent to the client's browser. In contrast, client-side rendering shifts the work of rendering webpages from the server to the client, where the application consumes API data and renders the views, making it feel more like a native application without page reloads.

What are single-page applications?

Single-page applications are web applications that are rendered on the client-side, not on the server. They consume data from an API and render a screen for each view of the application, providing a seamless experience where the page does not reload when interacting with the app, hence the term 'single page'.

How has the role of JavaScript evolved in web development?

Initially, JavaScript was used to add simple dynamics to web pages, such as animations and hover effects. Over time, developers began writing more JavaScript to create fully-fledged web applications, leading to the rise of single-page applications and the need for frameworks to manage the complexity of client-side rendering.

What is the significance of state in a web application?

State refers to the various pieces of data that a web application manages. Keeping the user interface in sync with the state is crucial for a seamless user experience. Changes in state, such as location or dates, must be reflected in the UI, and vice versa, requiring careful management to avoid bugs and maintain consistency.

What are the challenges of building large-scale applications with Vanilla JavaScript?

Building large-scale applications with Vanilla JavaScript is challenging because it requires extensive direct DOM manipulation, which can lead to complex and hard-to-understand code. Additionally, state is often stored directly in the DOM, leading to multiple parts of the application accessing and changing the DOM state directly, which can introduce bugs and make the code even more difficult to maintain.

Why is it beneficial to use a framework like React for web development?

Using a framework like React simplifies the development process by handling the synchronization of the user interface with data, which is a complex task. It also enforces a structured and consistent way of writing code, reducing the likelihood of spaghetti code and bugs, and promoting a more maintainable and understandable code base.

What is the role of APIs in single-page applications?

APIs provide the data needed for single-page applications. The application consumes this data from the backend, typically in the form of JSON or XML, and uses it to render the user interface dynamically on the client-side.

How do modern front-end frameworks help in structuring web applications?

Front-end frameworks provide a structured way of building applications by enforcing certain conventions and best practices. This helps developers to create applications that are more organized, easier to understand, and less prone to common pitfalls, leading to a higher quality end product.

Why is consistency important in team-based web development?

Consistency in team-based web development ensures that all team members build their parts of the application in the same style, which leads to a more uniform and maintainable code base. This collaboration results in a more cohesive final product and reduces the potential for conflicts and misunderstandings during development.

How have modern frameworks contributed to the resurgence of server-side rendering?

Modern frameworks have contributed to the resurgence of server-side rendering by building upon their capabilities to create server-side rendering frameworks like Next.js and Remix. These frameworks leverage the power of client-side rendering frameworks to provide a more modern and efficient server-side rendering experience.

Outlines

00:00

🌟 Introduction to Front End Frameworks

This paragraph introduces the rationale behind the existence of front end frameworks like React, questioning why they are necessary when Vanilla JavaScript could be used. It sets the stage for discussing the evolution of web development from server-side rendering to client-side rendering and the rise of single page applications. The paragraph also touches on the limitations of using Vanilla JavaScript for large-scale applications and emphasizes the importance of keeping the user interface in sync with data.

05:03

🔍 Challenges of Vanilla JavaScript in Web Development

This section delves into the challenges of using Vanilla JavaScript for building complex web applications. It highlights the difficulties associated with direct DOM manipulation, such as element selection, class toggling, and style changes, which can lead to complex and hard-to-maintain code. The paragraph also discusses the issue of storing state directly in the DOM, which can result in a dispersed and difficult-to-understand codebase prone to bugs. It suggests that attempting to solve these problems independently would likely lead to creating one's own framework, which would be less efficient than using established frameworks like React.

10:05

🛠️ The Role and Benefits of Front End Frameworks

The final paragraph explains the fundamental role of front end frameworks in simplifying the synchronization of data with the user interface, which is a complex and labor-intensive task. It outlines how frameworks like Angular, React, or Vue.js alleviate developers from this burden, allowing them to focus on data and UI development. Additionally, it highlights the value of frameworks in enforcing a structured and consistent coding approach, which benefits both individual developers and development teams by promoting a more consistent codebase and product.

Keywords

💡Front end frameworks

Front end frameworks are specialized tools used in web development to streamline the process of building user interfaces. They provide a structured way to manage the complexity of modern web applications, as opposed to using Vanilla JavaScript alone. In the context of the video, frameworks like React exist to simplify the synchronization of data with the user interface, which is a fundamental challenge in creating interactive web applications.

💡Vanilla JavaScript

Vanilla JavaScript refers to the pure, unadulterated JavaScript language without any additional libraries or frameworks. It is the basic programming language that web browsers understand and execute. In the video, Vanilla JavaScript is discussed as the traditional method of building web applications before the advent of front end frameworks, which required extensive DOM manipulation and led to complex and hard-to-maintain code.

💡Server-side rendering

Server-side rendering is a method of generating web pages where the server processes all the data and templates to create the final HTML, which is then sent to the client's web browser. This approach was predominant before the rise of single page applications. The video explains that in server-side rendering, the browser's role is simply to display the received HTML, CSS, and JavaScript without any additional processing.

💡Client-side rendering

Client-side rendering is a technique where the web browser is responsible for rendering the webpage using data received from the server, typically in the form of an API. This approach is central to single page applications, where the initial HTML is minimal, and the bulk of the content and interactivity is dynamically loaded and updated by the browser. The video emphasizes that this shift from server to client has led to the development of complex web applications that feel like native apps.

💡Single page applications

Single page applications are web applications that are rendered on the client-side and provide a seamless, app-like experience to the user. They load a single HTML page and dynamically update the content as the user interacts with the application, without the need to reload the entire page. This contrasts with traditional multi-page applications where navigation typically results in a full page refresh.

💡Data synchronization

Data synchronization in the context of web development refers to the process of ensuring that the data displayed in the user interface is always up-to-date and consistent with the underlying data model. This is a critical task for any web application, as it directly affects the user experience and the application's reliability. The video highlights the difficulty of keeping the UI in sync with data as a primary reason for the existence of front end frameworks.

💡DOM manipulation

DOM manipulation refers to the process of directly altering the Document Object Model (DOM) of a web page using JavaScript. The DOM is a programming interface for web documents that represents the structure of a document in a tree-like form. While it allows for dynamic updates to the page, manual DOM manipulation can lead to complex and hard-to-maintain code, as mentioned in the video when discussing Vanilla JavaScript.

💡State management

State management in web applications refers to the strategies and techniques used to handle and maintain the state (data) of an application. This includes keeping track of changes, updating the user interface accordingly, and ensuring that different parts of the application remain consistent. The video emphasizes the complexity of state management in large applications and how front end frameworks provide solutions to manage state effectively.

💡Bug introduction

Bug introduction in the context of software development occurs when errors or issues are inadvertently added to the codebase, often as a result of poor practices or complex code structures. In the video, it is mentioned that manual DOM manipulation and storing state directly in the HTML elements can lead to bug introduction, making the application prone to errors and inconsistencies.

💡Code structure and conventions

Code structure and conventions refer to the standardized ways of organizing and writing code within a software project. These practices help ensure readability, maintainability, and consistency across the codebase. Front end frameworks, as discussed in the video, often enforce a specific code structure and conventions, which helps developers build better applications with less spaghetti code.

💡Team consistency

Team consistency in software development is the uniformity in coding style and practices among team members working on the same project. This ensures that the final product is cohesive and that each part of the application is built in a similar manner, reducing the potential for integration issues and improving overall code quality. The video highlights that frameworks provide a consistent way for teams to build web applications, leading to a more uniform code base and product.

Highlights

Front end frameworks like React exist to simplify the process of building web applications, particularly single page applications.

Traditional websites were server-side rendered, meaning the website was assembled on the backend and then sent to the client side.

The rise of JavaScript led to the development of single page applications, which are client-side rendered and feel like native applications.

Server-side rendering is making a comeback with modern frameworks like Next.js and Remix.

Building large scale applications with Vanilla JavaScript presents challenges due to the complexity of handling data and UI synchronization.

Web applications fundamentally involve handling data and displaying it through a user interface.

Keeping the UI in sync with data is a difficult problem that front end frameworks aim to solve.

Without a framework, managing state and UI synchronization in a complex application like Airbnb would be nearly impossible.

Vanilla JavaScript requires extensive DOM manipulation, leading to complex and hard-to-understand code.

Storing state in the DOM as opposed to a central location in the application leads to scattered and bug-prone code.

Frameworks like React, Angular, or Vue.js provide solutions to the hard problem of data and UI synchronization.

Frameworks enforce a structured and correct way of writing code, reducing the likelihood of spaghetti code.

Using established frameworks prevents the need to create custom solutions, which are likely to be inferior.

Frameworks offer a consistent coding style, beneficial for team collaboration and maintaining a uniform codebase.

Modern web development relies heavily on JavaScript frameworks to manage complexity and streamline the development process.

Transcripts

‫Now, before we start learning about React,

‫let's actually ask ourselves one very important question.

‫Why do front end frameworks, like React,

‫actually exist in the first place?

‫Why not simply use Vanilla JavaScript to build our apps?

‫Well, let's answer that question in this lecture.

‫And we're gonna start at the very beginning

‫by reviewing how website used to be built in the past,

‫how we transitioned to a new way

‫and how that lead to the rise of front end frameworks.

‫So back in the day, before around 2010,

‫all websites were always rendered on the server.

‫So in server side rendering

‫a website is basically assembled on the backend.

‫So on a web server, based on data and templates.

‫The resulting HTML, CSS and JavaScript code

‫is then sent to the client side, so to the web browser

‫that requested the page.

‫The browser then simply takes this code

‫and basically paints it onto the screen.

‫And a typical example of server side rendered websites

‫are all websites built with WordPress.

‫Now, the JavaScript that used to be included

‫in these websites was initially only to

‫add some simple dynamics to the page,

‫like simple animations, hover effects,

‫and other stuff like that.

‫And usually a very popular library

‫at the time called jQuery was used for this

‫because it made JavaScript work the exact same way

‫across all browsers back then.

‫However, over time, developers started writing more

‫and more JavaScript code to be executed by the browser,

‫until at some point these

‫became fully fledged web applications,

‫which then led to the rise

‫of so-called single page applications.

‫So these are basically webpages that are rendered

‫on the client, not on the server.

‫So in client side rendering, basically the work

‫of rendering a webpage is shifted

‫from the server to the client.

‫And so now we don't call these webpages anymore

‫but web applications.

‫Now a web application still needs data, which usually comes

‫from the backend in the form of an API.

‫And I'm sure you have already worked

‫with APIs like that, right?

‫So the application consumes this API data

‫and renders a screen for each view of the application.

‫And these single page applications essentially feel as

‫if you were using a native desktop or phone application.

‫So you can click on links or submit forms

‫without the page ever reloading.

‫So you're technically always on the same page

‫and therefore the name single page app.

‫Now, just before leaving this slide,

‫I want to quickly mention that server side rendering

‫is actually making a comeback right now.

‫So it's slowly getting modern, again,

‫driven by frameworks that are built on top

‫of modern client side rendering frameworks

‫such as Next.js, Remix and many others.

‫But in either case, we still need to learn how

‫to build single page applications of course,

‫but do we want to do so with Vanilla JavaScript?

‫Well, actually no, we do not want that

‫because there are actually several problems

‫with using Vanilla JavaScript

‫to build large scale applications,

‫as we will see in a moment.

‫But first, let's establish that building

‫any front end application is really all about handling data

‫and then displaying that data in a nice user interface.

‫That's basically all a web application does,

‫if you think about it.

‫So it receives data,

‫changes the data as the user uses the app,

‫and it always displays the current data on the screen.

‫What this means is that the most important task

‫of a single page app and really of any application

‫and website is to keep the user interface

‫in sync with the data, or in other words, is to make sure

‫that the UI always displays the current state of the data.

‫Now, as it turns out, displaying the correct data

‫and making sure that it stays correct

‫over time is actually a really hard problem to solve.

‫And to understand why that is

‫let's take a look at this Airbnb application.

‫So in this interface, we can identify a few pieces of data.

‫First, we have this list of apartment,

‫then we have a search bar.

‫We have some data about the filters that are being applied.

‫And we also have this piece of data here,

‫which indicates whether the search should be updated

‫as the user removes the map.

‫And all this is data that up depends on, right?

‫And actually in the real world Airbnb application

‫there is just so much data.

‫So this list here is not even all of it.

‫But anyway, as we know, all of this data needs to be always

‫kept in sync with the user interface

‫and also with the other pieces of data,

‫because they're all kind of interconnected.

‫For example, when we change the data about location

‫or dates, then the UI needs to show those new dates

‫and also the list of apartments needs to be updated.

‫Or another example, the map needs to show the location

‫of the apartments.

‫And so therefore, when the apartments change

‫the map must also change.

‫And the same thing should happen the other way around.

‫So when the map is moved, the list of apartments

‫should change as well, but only when the user has

‫previously clicked on the green checkbox.

‫So these pieces of data here are even more interconnected

‫and it can become a real mess.

‫Now, just as a side note, in a real world app,

‫we call each of these pieces of data a piece of state.

‫So based on these examples I showed you

‫I would say that without a framework

‫it would be virtually impossible to keep

‫this huge amount of data in sync with this super complex UI.

‫But still, you might be wondering, why?

‫Why would it be so hard to build something

‫like this with Vanilla JavaScript?

‫Well, it comes down to two big aspects.

‫The first is that building a complex front end

‫with vanilla JavaScript alone requires large amounts

‫of direct DOM traversing and manipulation.

‫Like in this code right here, where we have

‫manual element selection, class toggling, DOM traversing

‫and even manipulation of text and CSS styles

‫and this is guaranteed to become an absolute nightmare

‫in a complex app like Airbnb,

‫because our code would be extremely complex

‫and really hard to understand, and we will probably just end

‫up with a huge mess of entangled spaghetti code.

‫So this is the first problem.

‫The second big problem is

‫that in typical Vanilla JavaScript apps,

‫state such as simple text or numbers

‫are oftentimes simply stored right in the DOM.

‫So right in the HTML elements themselves,

‫rather than in a central place in the application.

‫The result is that we end up with many parts

‫of the app accessing and changing that DOM state directly,

‫which makes the spaghetti code even harder to understand.

‫And even worse, it'll most certainly introduce many bugs

‫into our application.

‫And no one wants bugs, right?

‫Now, of course, you could try to solve these problems

‫on your own, but then you will just end up creating

‫your own framework, which will most likely

‫be way worse than all the well established frameworks

‫that already exist.

‫So at this point, you might as well just use

‫a battle tested framework like React.

‫Now, right, so now that we know why it's so hard to write

‫a single page app with just JavaScript,

‫we can answer the fundamental question

‫that we asked in the beginning.

‫So why do front end frameworks actually exist?

‫Well, we kind of already answered that question

‫over the course of this lecture.

‫So the big fundamental reason why these frameworks exist is

‫because keeping a user interface

‫in sync with data is really hard,

‫and it's a lot of work too.

‫So basically frameworks like Angular, React or View

‫take this hard work of synchronizing data

‫with the user interface away from us developers.

‫So they solve this really hard problem

‫so that we developers can focus only on the data

‫and on building our user interfaces themselves.

‫Now, different frameworks have different approaches

‫to doing this, but they are all similar

‫in the fact that they keep UI and data in sync over time.

‫Now, another extremely valuable thing that frameworks

‫give us, is the fact that they basically enforce

‫a correct way of structuring and writing code.

‫So essentially, the authors of each of these frameworks

‫came up with a good way of structuring applications,

‫so that other developers can then follow these

‫conventions as well, to build better applications

‫with hopefully a lot less spaghetti code.

‫Finally, frameworks give developers, and especially teams

‫a consistent way of building web applications.

‫This way, everyone on the team will build their part

‫of the app in the same style as everyone else,

‫which will in the end create

‫a more consistent code base and product.

‫And there you go,

‫this is why modern web development is all

‫about JavaScript frameworks.