Blockchain Introduction

Introduction to
Web Engineering
 Blockchain Introduction

Introduction to Web Engineering

Web engineering refers to the disciplined, systematic approach to developing,
deploying, and maintaining web applications. It is not just about writing code; it
encompasses the entire lifecycle of a web system, from conceptualization and
design to deployment and maintenance. Web engineering combines technical
knowledge of programming, system design, and database management with a
broader understanding of user experience (UX), scalability, and project management
principles.

In this lecture, we will explore the foundational aspects of web engineering, laying
the groundwork for building robust, scalable, and secure web applications. This
foundation will help us to navigate complex projects and implement industry best
practices, leading to high-quality, maintainable web systems.
 Blockchain Introduction

Key Principles of Web Engineering

The key principles of web engineering are essential to ensuring that web applications
meet modern-day standards and expectations. Modularity promotes breaking down
applications into smaller, manageable components, each responsible for a specific
function. This not only simplifies development but also improves maintainability.
Reusability allows us to leverage existing code, reducing duplication and speeding
up development. Scalability ensures that applications can handle increased user
loads as they grow, preventing performance degradation over time.

Maintainability is crucial for long-term success, enabling developers to easily

update, fix bugs, and extend applications with minimal effort. Finally, security must
be woven into every layer of development, ensuring that applications are resilient to
common attacks such as SQL injection, cross-site scripting (XSS), and data breaches.
By adhering to these principles, we can create applications that are efficient,
scalable, and secure, while also being easier to manage and enhance over time.
 Blockchain Introduction

Introduction to the MEAN Stack

The MEAN stack is a collection of JavaScript-based technologies that work together to
create dynamic, full-stack web applications. It consists of MongoDB, a NoSQL
database; Express.js, a lightweight web application framework; Angular, a frontend
framework for building dynamic user interfaces; and Node.js, a server-side JavaScript
runtime. This stack allows developers to use a single language—JavaScript—
throughout the entire development process, from backend to frontend.

Using a single language not only simplifies development but also enables better
communication between the server and client, resulting in faster, more efficient
applications. Moreover, the MEAN stack provides a modern, modular architecture,
making it easier to build scalable, maintainable web applications with real-time
capabilities. This makes it ideal for applications that require real-time interactions,
such as chat applications, dashboards, or collaborative platforms.
 Blockchain Introduction

MongoDB Overview
MongoDB is a flexible, document-oriented NoSQL database that stores data in
JSON-like documents. Unlike traditional relational databases that use tables and
rows, MongoDB uses a dynamic schema, allowing for greater flexibility when dealing
with unstructured or semi-structured data. This makes MongoDB particularly useful
for applications that require the storage of large volumes of complex data, such as
user profiles, product catalogs, or sensor data from IoT devices.

In the MEAN stack, MongoDB acts as the database layer, enabling developers to
store, retrieve, and manage data efficiently. Its scalability features make it ideal for
applications that handle large datasets or need to scale horizontally across
distributed systems. By using MongoDB, developers can model data in a way that
aligns with modern application needs, providing the flexibility to evolve as business
requirements change.
 Blockchain Introduction

Express.js Overview
Express.js is a lightweight and flexible web application framework for Node.js. It
simplifies the process of building robust, scalable web applications and APIs by
providing a set of powerful tools and middleware. Express allows developers to
create server-side logic, handle HTTP requests and responses, and manage routes
with ease. Its modular architecture means that you can add or remove features
based on your application’s needs, making it a highly customizable solution.

In the MEAN stack, Express serves as the glue between the frontend and the
backend. It handles requests from the Angular frontend, communicates with the
MongoDB database, and sends the appropriate responses back to the client.
Whether you're building a simple API or a complex web application, Express
provides the flexibility and performance needed to create efficient server-side
logic.
 Blockchain Introduction

Angular Overview
Angular is a powerful, client-side framework maintained by Google, designed to
build single-page applications (SPAs) and dynamic user interfaces. It allows
developers to create highly interactive and responsive user experiences by
providing a wide range of tools and features, such as two-way data binding,
dependency injection, and modular component-based architecture. Angular
promotes a clean separation between business logic and UI, making applications
easier to maintain and scale.

In the MEAN stack, Angular handles the client-side logic, communicating with the
backend API built with Express and Node.js. It enables developers to create dynamic
and responsive user interfaces that load data in real-time, without needing to
refresh the page. This makes Angular ideal for creating modern web applications,
such as dashboards, real-time monitoring tools, or e-commerce platforms.
 Blockchain Introduction

Node.js Overview
Node.js is a JavaScript runtime built on Chrome's V8 engine, designed to build
scalable and high-performance server-side applications. Unlike traditional server-
side technologies that use multi-threaded architectures, Node.js operates on a
single-threaded, event-driven model, making it highly efficient for handling multiple
requests simultaneously. This non-blocking, asynchronous nature allows Node.js to
manage I/O operations effectively, making it an excellent choice for real-time
applications.

In the MEAN stack, Node.js serves as the foundation for server-side logic, providing
the runtime environment for Express. It enables developers to write server-side
scripts in JavaScript, communicate with MongoDB, and serve data to the Angular
frontend. Node.js's fast performance and scalability make it an ideal solution for
building data-intensive applications, such as streaming services, chat platforms, or
collaborative tools
 Blockchain Introduction

LAMP vs. MEAN Stack

The LAMP stack (Linux, Apache, MySQL, PHP) is a traditional web development stack
that has been widely used for years. It relies on multiple technologies and
languages: Linux for the operating system, Apache for the web server, MySQL for the
database, and PHP for server-side scripting. While the LAMP stack is reliable and
proven, it often involves complex setups due to its multi-language structure and
lacks the flexibility needed for real-time web applications.

In contrast, the MEAN stack offers a more modern, streamlined approach by using
JavaScript throughout the entire stack. Instead of MySQL, it uses MongoDB, a NoSQL
database that offers greater flexibility for handling unstructured data. Node.js and
Express replace Apache and PHP, providing a more efficient and scalable server-
side architecture. This all-JavaScript approach simplifies development, makes the
application faster, and offers better real-time capabilities
 Blockchain Introduction

MEAN vs. MERN Stack

The MERN stack is similar to the MEAN stack, with one key difference: it uses React
instead of Angular for frontend development. React is a JavaScript library created
by Facebook, known for its simplicity and performance. React follows a component-
based approach, allowing developers to build reusable UI components that can be
easily integrated into different parts of the application. Its virtual DOM (Document
Object Model) enables efficient updates and rendering, making it ideal for dynamic
and interactive applications.

While Angular (used in the MEAN stack) is a full-featured framework that offers a
more structured and opinionated architecture, React offers more flexibility and is
easier to integrate with other libraries or frameworks. Choosing between MEAN and
MERN depends on the project requirements: Angular is better suited for larger,
more complex applications, while React excels in building fast, simple, and
interactive user interfaces.
 Blockchain Introduction

Setting Up Node.js and npm

Setting up the development environment for the MEAN stack starts with installing
Node.js, the server-side runtime for JavaScript. Node.js can be downloaded from the
official website and is available for all major operating systems. Once installed, npm
(Node Package Manager) is automatically included, allowing developers to install and
manage third-party libraries and packages needed for the application, such as Express.js
or Angular CLI.

After installing Node.js, developers can verify the setup by running node -v and npm -v in
the terminal, which will display the installed versions. With Node.js and npm configured,
the next step is to initialize a new project using the command npm init, which sets up the
necessary project files and dependencies. From there, developers can start building their
MEAN stack applications by installing additional libraries and frameworks as needed.
General Discussion