Introduction to Programming Basics: Front End, Back End and Persistence
Learn how building apps and websites is like constructing a house! Explore the Front End (what you see and interact with), the Back End (the internal structure that makes it work), and Storage (where your data is securely stored). A clear and beginner-friendly guide to understanding how these components work together.
Published Dec 20, 2024
The Front End is the part of an application or website that users see and interact with directly. It is responsible for everything that appears on the screen: from colors and fonts to buttons and forms.
Think of the Front End as the window of a store. It's what draws customers in and allows them to interact with the products. In the context of an application, it's where the interaction between the user and the system occurs.
Front-end presentation focuses on creating a smooth and enjoyable user experience. This includes:
Visual Design : Colors, images, typography and layout of elements.
Interactivity : Responses to user actions such as clicks, swipes, and gestures.
Usability : Ease with which the user can navigate and perform tasks.
Front End development covers several areas depending on the type of application being built:
Description : Focuses on creating sites and applications that work in web browsers like Chrome, Firefox, or Safari.
Basic Languages :
HTML (HyperText Markup Language) : It is like the skeleton of a web page. It defines the structure and content using tags such as <h1> for titles or <p> for paragraphs.
CSS (Cascading Style Sheets) : This is the style and decoration. If HTML is the skeleton, CSS is the clothes and makeup. It controls the visual aspect, such as colors, fonts and screen layout.
JavaScript : Adds life and movement. Allows the page to respond to user actions, update content without reloading, and create dynamic effects.
Analog Example : Imagine a web page as a car:
- HTML is the chassis and the structure.
- CSS is painting and interior design.
- JavaScript is the engine that makes everything work and respond.
Description : It involves creating applications for mobile devices such as smartphones and tablets.
Basic Languages :
Java : Traditional language for Android applications. It is like the native language of this operating system.
Kotlin : A more modern and concise language also for Android, which improves developer productivity.
Swift : The language used to develop native applications on iOS (iPhone and iPad). It is fast and secure.
React Native (JavaScript) : Allows you to create mobile applications for iOS and Android using JavaScript and React. It's like building a house that adapts to different terrains.
Flutter (Dart) : Google's framework for developing cross-platform native applications with a single code base.
Analog Example : Developing for mobile is like designing clothes that fit perfectly on different bodies (devices), ensuring that they look and work well on each one.
Description : Applications that run in a terminal or console, without a graphical interface. They are used by programmers and administrators for specific tasks.
Basic Languages :
Python : Ideal for scripting and automation due to its simple syntax.
Bash : Scripting language on Unix/Linux systems to automate system tasks.
Ruby : Known for its readability, it is used in scripts and command line tools.
C : Low-level language used for applications requiring high performance.
Analog Example : CLI is like giving direct orders to a personal assistant without any intermediaries; it is efficient and direct.
The Back End is the part of the application that you don't see, but that makes everything work. It's like the kitchen staff in a restaurant: you don't see them, but without them, there is no food.
It is responsible for business logic, data processing, and communication with the database. It handles everything that happens behind the scenes to fulfill user requests.
Description : Business logic is the set of rules and processes that define how the application works. It is the “brain” that makes decisions based on user actions and available data.
Key Features :
Request Processing : Interprets and responds to user actions.
Validations and Rules : Ensure that data is correct and complies with business policies.
Calculations and Operations : Performs necessary operations such as mathematical calculations, data transformations, etc.
Analog Example : If the application were an online store, the business logic is like the system that calculates prices, applies discounts, and checks inventory.
Description : Servers are computers (physical or virtual) that run the Back End and expose services to be used by the Front End or other applications.
Basic Languages :
JavaScript (Node.js) : Allows you to run JavaScript on the server, using the same language in the Front End and Back End.
Python : With frameworks like Django and Flask, it is popular for its readability and ease of use.
Java : Used in business applications for its robustness and scalability.
C# (.NET) : Microsoft language for developing applications on Windows, known for its power and versatility.
PHP : A widely used language in web development, powering platforms like WordPress and Facebook.
Analog Example : The server is like the chef in a restaurant who takes orders (requests) and prepares dishes (responses) following recipes (business logic).
For an application to work properly, the Front End and Back End must communicate efficiently, like a fluid conversation between the customer and the chef in a restaurant.
- User Interaction : The user performs an action on the Front End, such as clicking a “Buy” button.
- Request to Back End : The Front End sends a request to the Back End to process the action. This is like the waiter taking the order to the chef.
- Back End Processing : The Back End receives the request, applies the business logic, interacts with the database if necessary, and prepares a response.
- Response to Front End : The Back End sends the processed information to the Front End, which updates the user interface. It is like the waiter bringing the prepared dish to the customer.
- Description : Protocol used for secure communication between the browser (client) and the server. It encrypts transmitted data to protect sensitive information such as passwords or personal data.
- Importance : Ensures that information is not intercepted or altered during transmission.
Analog Example : It is like sending messages in a closed and sealed box so that only the recipient can open it, ensuring privacy.
- Description : Set of definitions and protocols that allow different applications to communicate with each other.
- Function : Acts as an intermediary that translates requests from the Front End to the Back End and vice versa.
Analog Example : An API is like a menu in a restaurant. The customer (Front End) chooses from the menu and the chef (Back End) prepares the dish. The menu defines what is available and how to order it.
There are different ways APIs can structure and handle requests and responses. Two of the most popular are REST and GraphQL.
Architectural style for designing APIs that takes advantage of standard HTTP methods.
Key Features :
- Stateless : Each request from the client to the server must contain all necessary information, and the server does not maintain session state.
- Using HTTP Methods : GET, POST, PUT, DELETE, etc., to perform CRUD (Create, Read, Update, Delete) operations.
- Identifiable Resources : Each resource (such as users, products) is identified by a unique URL.
- Operation : The client makes requests to specific endpoints and receives representations of the resource in formats such as JSON or XML.
Analog Example : It's like ordering a book in a library, where each book has a unique code and the actions are standard (take, return, reserve).
Query language for APIs that allows clients to request exactly the data they need, and nothing more.
Key Features :
- Customized Queries : The client defines the structure of the data they want to receive.
- Single Endpoint : Unlike REST, GraphQL uses a single endpoint for all operations.
- Efficiency : Reduce the number of requests and avoid excess or lack of data.
- How it works : The client sends a query specifying the exact fields it needs, and the server responds with that data structure.
Analog Example : It's like going to a buffet where you can choose exactly what you want on your plate, rather than being given a predefined menu.
- REST is simpler and uses existing web standards, ideal for applications that don't require extreme flexibility.
- GraphQL is more flexible and efficient in applications with complex data or when looking to optimize performance.
- Hierarchy : There is no strict hierarchy between them; they are different approaches to building APIs, and the choice depends on the specific needs of the application.
Just as you need a safe place to store your belongings, apps need to store data efficiently and accessibly.
Databases are systems designed to store, organize and manage large amounts of information. They are mainly divided into two types:
They organize data into tables that are related to each other using primary and foreign keys.
Key Features :
- Rigid Structure : Requires defining a prior scheme with data types and relationships.
- Data Integrity : Ensure that data is consistent and meets certain rules.
- Using SQL : They use the SQL language to perform queries and operations.
Operation :
- Data is stored in rows and columns, similar to a spreadsheet.
- Tables can be related to each other, allowing information from different tables to be combined.
Examples :
- MySQL : Popular in web applications.
- PostgreSQL : Known for its robustness and advanced features.
- Oracle : Used in enterprise environments.
- Microsoft SQL Server : Integrated into the Microsoft ecosystem.
Analog Example : It's like a well-organized filing cabinet, where every drawer and folder is labeled and you know exactly where to find each document.
Description : They store data without a fixed schema, providing flexibility to handle different types of information.
Key Features :
- Flexibility : They do not require predefined schemas, allowing rapid changes in the data structure.
- Horizontal Scalability : Facilitates increasing capacity by adding more servers.
- Various Types : These include document, key-value, and graph databases, among others.
Operation :
- Documentaries : Store data in JSON-like documents (eg, MongoDB).
- Key-Value : Store data as key-value pairs (eg, Redis).
- Graphs : Store data in nodes and relationships, ideal for social networks (eg, Neo4j).
Examples :
- MongoDB : Document database widely used in modern applications.
- Cassandra : Designed to handle large volumes of data across multiple servers.
- Redis : Used for caching and real-time data.
Analog Example : It's like a personal diary where you can write whatever you want, however you want, without following a specific format.
Structure : Relational has a fixed structure; NoSQL is more flexible.
Scalability : Relational scales vertically (by upgrading hardware); NoSQL scales horizontally (by adding more machines).
Queries : Relational uses SQL; NoSQL uses different languages or APIs.
Proper Use :
- Relational : Ideal for applications with complex transactions and structured data.
- Non-Relational : Suitable for large volumes of data, unstructured or changing data.
Although databases are the most common and efficient way to store data in applications, there are other less recommended ways.
Description : Plain text files where data is stored in text format without any additional structure, such as .txt or .csv files.
Limitations :
Scalability : They do not handle large volumes of data well.
Security : They are more vulnerable to unauthorized access.
Queries : Difficulty performing advanced searches or filters.
Analog Example : It's like keeping all your important documents in one box without any order; finding something specific would be difficult.
Description : Files that store data in specific or binary formats, such as Excel spreadsheets or XML files.
Limitations :
- Compatibility : Requires specific software to access and manipulate data.
- Concurrency : Difficulty for multiple users to access and modify the file simultaneously.
- Data Integrity : Increased risk of data corruption.
Recommendation : These storage methods may be useful for simple or personal cases, but are not recommended for professional applications or those requiring efficiency and security.
To build a successful application, it is essential to understand how each component interacts with the others:
Front End : It is the visible face that offers a pleasant experience to the user.
Back End : Processes and handles the logic behind user actions.
Storage : Save and organize data so it is available when needed.
Think of the app as a restaurant:
- The Dining Room (Front End) : Where customers enjoy their meal in a pleasant atmosphere.
- The Kitchen (Back End) : Where chefs prepare dishes following recipes (business logic).
- The Pantry (Storage) : Where the ingredients (data) needed to prepare dishes are stored.
Without good coordination between these areas, the restaurant could not offer good service.
- Start with the Basics : Don't try to learn everything at once. Start with a language and area that interests you.
- Practice Regularly : Programming is a practical skill. The more you practice, the more you will understand.
- Don't be afraid to make mistakes : Mistakes are learning opportunities. Analyze your failures and learn from them.
- Use Online Resources : There are countless tutorials, courses, and communities willing to help.
- Do Small Projects : Apply what you learn to simple projects that motivate you.
- Be Patient and Persistent : Programming can be challenging at first, but with time and effort, you will make progress.
If you liked this article, don't hesitate to give it a 👏
- youtube: https://www.youtube.com/jjoc007
- github: https://github.com/jjoc007
- Medium: https://jjoc007.com
- Linkedin: https://www.linkedin.com/in/jjoc007/