Front-end & Back-end in Web3

We interact with applications every day, from social media to online banking. But how are these apps built and structured?

In this lesson, we'll explore the two main architectural styles: traditional applications and Decentralized Applications (DApps). Understanding their differences is key to Web3!

Think of a traditional application like a restaurant. It typically has three main layers:

• Front-end: What you see and interact with (the dining area).
• Back-end: The 'brains' that process requests (the kitchen).
• Database: Where all the information is stored (the pantry).

Each part has a specific role and works together.

The front-end is the user interface (UI) you see and interact with. This is the website in your browser or the app on your smartphone.

It's built using technologies like HTML, CSS, and JavaScript for web applications, or Swift/Kotlin for mobile apps. Its job is to display information and send user actions (like clicks) to the back-end.

The back-end is the server-side component of a traditional application. It's where all the complex business logic, user authentication, and data processing happens.

When you click a 'Login' button, your front-end sends a request to the back-end server. The back-end then verifies your credentials and sends back appropriate data or a response.

In traditional applications, data is stored in a centralized database. This database is typically owned, controlled, and maintained by a single entity, like a company.

Examples include databases like MySQL, PostgreSQL, or MongoDB. This centralization can offer efficiency but also creates a single point of control and potential failure.

Decentralized Applications (DApps) offer a different architectural approach. While they still have a front-end, their back-end and data storage are fundamentally different.

Instead of relying on a single, centralized server and database, DApps leverage a blockchain network to execute their core logic and store data.

The front-end of a DApp often looks and feels very similar to a traditional web application. It's still built using web technologies like HTML, CSS, and JavaScript.

The key difference is how it communicates. Instead of sending requests to a centralized server, it interacts directly with a blockchain network, usually through a 'Web3 library' in your browser.

Here's the biggest architectural shift: in DApps, the back-end logic is primarily handled by smart contracts.

• Smart contracts are self-executing programs stored directly on a blockchain.
• They contain the DApp's rules, logic, and state.
• Once deployed, they are immutable and run exactly as programmed, without needing a central server.

Instead of a centralized database, DApps store their critical data directly on the blockchain itself. This means:

• Data is distributed across thousands of computers globally.
• It is immutable: once recorded, it cannot be changed or deleted.
• It is transparent: anyone can verify the data.

This removes the need for a single entity to control or manage the data.

Let's summarize the core differences:

• Back-end: Traditional uses centralized servers; DApps use smart contracts on a blockchain.
• Data Storage: Traditional uses private, centralized databases; DApps use public, distributed ledgers (the blockchain).
• Control: Traditional apps are controlled by a single company; DApps are governed by code and potentially their community.
• Availability: Traditional apps can go down if the server fails; DApps are highly available due to decentralization.

You've learned about the fundamental differences between traditional and decentralized application architectures. Let's test your understanding!

Excellent work! You now understand the fundamental architectural differences between traditional applications and DApps.

• Traditional apps rely on centralized servers and databases.
• DApps use smart contracts on a blockchain for their back-end logic and data storage, enabling true decentralization and immutability.

This shift is what makes Web3 so powerful! Next, we'll dive into how DApp front-ends actually connect to the Ethereum network.