If you are wondering about the basics of web technologies, app technologies, and how everything connects and works together, then this article is for you. We will cover key concepts like the frontend and backend, and include visuals to show you how this looks in practice.
(Article Last Updated: 02/02/2024)
In this article:
- Client-Side vs. Server-Side: Explains the roles of client-side (what users interact with in their browsers) and server-side technologies (servers that process user requests), which are crucial for building websites and apps.
- Programming Languages and Frameworks: Discusses various languages like PHP, JavaScript, and Python, and their corresponding frameworks such as React and Django, which are used to create dynamic and efficient websites.
- Databases: Covers the use of SQL and NoSQL databases, like MySQL and MongoDB, which store and manage the data needed by web applications.
- Server Administration: Introduces server software like Apache and NGINX, which handle requests between a user’s browser and the server.
- Modern Web Structure: Details the shift from traditional to modern web architectures that separate the front end from the back end with APIs facilitating communication, improving website performance and user experience.
- IoT and APIs: Outlines how Internet of Things (IoT) devices interact through the web and the role of APIs in enabling different software applications to communicate efficiently.
If you enjoy this article, we also have a Basic App Technology Overview podcast episode to go alongside this article. Listen to it in full here too:
Background
Rendering an app or website involves integrating server-side and client-side technologies, but how do those technologies slot together?
The client-side refers to web users viewing pages within their browsers, while the server-side pertains to the computers they interact with when accessing a website. Server-side relates to the technologies that sit on the internet. Grasping this arrangement is crucial for website, app development, and web app development.
Traditional Web Technology Structure
The interplay between these elements can be visualized as follows (with each circle representing a web technology).
Please note that this is a more traditional server setup used to drive websites and much of the older web. This structure has been around for a long time and is still used today. However, more modern API-first approaches are now commonplace. We will touch on these later in this article.
It is the web server’s job to give the web browser the relevant HTML, CSS and JavaScript code that it needs to display an interactive web page. It is the web browser's job to interpret these languages to display a web page properly.
Each one of these has a role:
PHP (The Programming Language)
The server's core functionality is determined by its programming code, which shapes a web page's appearance and operations. This code interacts with information from the web browser to generate specific results. For example, accessing www.google.com/search?q=test tells the browser that 'q=test', prompting a search for the word 'test'. Server-side programming, such as PHP, is highly versatile, capable of tasks ranging from mathematical calculations and image processing to communication with other servers and processes.
Beyond PHP, there are numerous other programming languages and frameworks. Each language has unique features and is suited to different aspects of website development. Languages like JavaScript, Python, Ruby, and Java offer varied functionalities. Frameworks, built on these languages, provide additional tools and structures to streamline development. Examples include React and Angular for JavaScript, Django for Python, and Rails for Ruby. These languages and frameworks expand the possibilities of what can be achieved in web development, allowing for more complex, efficient, and user-friendly websites.
MySQL (The Database)
A content-managed website or web application relies heavily on a system to store and retrieve data. MySQL, serving as the server’s memory or data repository, is a prime example of such a system. It organizes data within various tables, accessible through SQL (Structured Query Language), a language specifically designed for managing data in relational database management systems.
However, MySQL and SQL represent just one approach to data storage and retrieval. There are also different types of databases, such as NoSQL databases, which cater to various needs and data structures. Unlike traditional SQL databases that use a structured query language for accessing data, NoSQL databases are more flexible in handling large volumes of unstructured data. They are particularly useful in scenarios where data requirements are not clear at the outset or when data is rapidly evolving.
NoSQL databases come in several types, including document databases (like MongoDB), key-value stores (like Redis), wide-column stores (like Cassandra), and graph databases (like Neo4j). Each type offers unique advantages depending on the specific requirements of the web application, such as scalability, speed, or the ability to handle complex relationships between data points.
Apache (The Server Admin)
Apache, often referred to as the Server Admin, is a crucial component in web architecture. It acts as the server program that receives and interprets communications from the web browser over the internet, and relays this information to server-side languages like PHP. A helpful analogy is to think of Apache as a shop window. In this scenario, Apache is akin to a store assistant who receives money or instructions from customers (the web browsers) and delivers the requested products (web pages or data).
Apache is renowned for its role in managing requests between the client (web browser) and server. It handles incoming requests, determines how to process them—often involving interaction with languages like PHP—and then sends the appropriate response back to the client. This process is integral to the functionality of most websites, ensuring that user requests are accurately fulfilled.
Apache's functionality is not limited to this; it also offers a range of features such as SSL/TLS support for secure connections, URL rewriting, custom log files, and the ability to handle diverse file types. Moreover, Apache is highly customizable, allowing web developers to tailor its behavior through various modules and configuration files to meet the specific needs of different websites.
Apache is just one example of server admin code, and others exist such as NGINX and NodeJS
Server Modules
Server Modules are essentially plugins that enhance the capabilities of server-side languages like PHP. These modules can be likened to add-ons or extensions that provide additional functionalities, enabling the server to perform a wider range of tasks more efficiently.
For instance, there are server modules specifically designed for advanced image processing. These modules can handle tasks such as image resizing, compression, format conversion, and even complex image manipulation techniques. This capability is crucial for websites that deal with a high volume of image data or require dynamic image processing.
Another example is modules that enable SMS messaging through the server. These modules can integrate with telecommunication services to send and receive text messages directly from the server. This feature is particularly useful for applications that need to communicate with users via SMS, such as for notifications, authentication processes, or marketing messages.
The inclusion of such modules greatly expands what a server can do, allowing for more interactive, responsive, and feature-rich web applications. This adaptability and extensibility are key advantages in web development, providing the tools to tailor server functionality to the specific needs of a website or an application.
HTML (Markup Language)
HTML (Hypertext Markup Language) is the foundational data structure behind web pages. Early websites were solely composed of HTML, which consists of various tags that provide information to the web browser about the contents of a page. For example, 'img' tags represent images, and 'h1' to 'h6' tags denote headings of different levels. There are numerous tags in HTML, each designed to display different types of content effectively.
HTML5 is a significant evolution in this markup language. It introduces an expanded set of tags and functionalities, allowing for more complex and interactive web applications. Notable additions in HTML5 include the 'canvas' tag, which gives developers the ability to draw and manipulate graphics directly in the browser, and the 'video' and 'audio' tags for embedding media without needing third-party plugins.
However, the way HTML is rendered depends on the web browser, necessitating clients to keep their browsers updated to utilize the latest web technologies fully. This requirement has somewhat slowed the adoption rate of HTML5. Although the uptake of HTML5 has not been as rapid and widespread initially, its adoption is expected to increase over time as browser support becomes more universal.
HTML5's advancements are crucial for the modern web, offering enhanced capabilities in multimedia, graphics, and application development, ultimately leading to richer and more interactive user experiences on the web.
CSS (Style Rules)
CSS (Cascading Style Sheets) is a powerful language used to define the style and layout of HTML elements on a webpage. It instructs the web browser on visually displaying elements, such as fonts, colors, and spacing. For instance, the rule "h1 { color: red; }" specifies that all level-one headings (h1) should appear in red.
CSS is more than just a tool for basic styling; it offers a wide range of possibilities for creating visually stunning websites. It allows for precise control over layout, with properties to adjust margins, borders, padding, and positioning of elements. CSS can also create responsive designs, ensuring that webpages look good on all devices, from desktops to smartphones.
Additionally, CSS supports advanced features like animations, transitions, and transformations, enabling dynamic and interactive web experiences. For instance, you can use CSS to create hover effects, animate elements smoothly across the screen, or change the shape and size of elements dynamically.
Moreover, CSS frameworks like Bootstrap and Tailwind CSS provide pre-designed components and utilities, streamlining the development process and ensuring consistency across different web pages and applications.
As web technologies evolve, CSS continues to expand its capabilities, playing a vital role in shaping the user experience and aesthetics of the internet.
JavaScript (Client-Side Code)
JavaScript is a client-side programming language that dynamically manipulates HTML data to perform various actions, often without needing to communicate back with the server. It's a key driver behind the interactivity and dynamic content seen on modern websites. A common example of JavaScript in action is the image rotators or galleries featured on many websites.
JavaScript enhances the user experience by allowing for real-time content updates, interactive forms, animated graphics, and other engaging features. It executes directly in the web browser, enabling rapid and responsive interactions without the need to reload the entire page.
jQuery, a widely-used JavaScript framework, simplifies the process of writing JavaScript code. It provides a set of easy-to-use functions that cover common JavaScript tasks, enabling developers to achieve the desired functionality with fewer lines of code. jQuery also addresses many cross-browser compatibility issues, ensuring that JavaScript works consistently across different web browsers, including older ones.
The significance of jQuery in web development lies in its ability to streamline the coding process, enhance performance, and improve user experience on a wide range of devices and browsers. As a result, jQuery has become an integral tool for developers looking to create robust, interactive, and user-friendly web applications.
Modern Web Technology Structure
In the early stages of web development, websites commonly used server-side scripting languages like PHP or ASP.NET to render page content. This approach involved the server processing user requests, executing server-side scripts, and then sending the fully rendered HTML page to the client's browser. Essentially, each user action requiring a new piece of information, like clicking a link or submitting a form, led to a new request to the server, reloading the entire webpage with the updated content. This process, while straightforward, often resulted in slower user experiences and less dynamic interactions, as each request required a full page reload.
The modern web and app development approach has evolved to separate the front end (client side) from the back end (server side), with an API layer bridging the two. In this architecture, the front end, typically built with languages like JavaScript, HTML, and CSS, is responsible for the user interface and user experience. It communicates with the back end through an API (Application Programming Interface). The back end, which can be developed in languages like Node.js, Ruby, or Python, handles the business logic, data processing, and database interactions. This separation allows for more efficient data handling and a smoother user experience, as the front end can update dynamically without reloading the entire page. APIs facilitate this process by providing a set of protocols and tools for building and interacting with software applications, enabling the front end and back end to exchange data seamlessly and asynchronously.
Here is a simple example of how this more modern network structure can function:
Apps
In the context of modern web development, "apps" typically refer to web applications, which are interactive programs accessible through the internet using a web browser. Unlike traditional websites that primarily provide static content, web applications offer dynamic and responsive user experiences, much like desktop or mobile applications.
Web applications are built using a combination of technologies for both front-end and back-end development. The front end, usually created with HTML, CSS, and JavaScript, is what users interact with directly in their browsers. It's designed to be responsive, interactive, and user-friendly, providing a seamless experience across various devices. The back end, developed with languages and frameworks like Node.js, Python, Ruby on Rails, or PHP, manages the application's logic, database interactions, and server-side functions.
The distinction between a website and a web application can sometimes blur, but the key difference lies in functionality. Web applications are more than just informational; they allow users to create, manipulate, and interact with data. Examples include online banking platforms, social media sites, e-commerce portals, and SaaS (Software as a Service) products like Google Docs or Salesforce.
In this evolving digital landscape, web applications play a crucial role in both personal and professional realms, offering functionality, convenience, and scalability that traditional websites cannot match.
IoT and Firmware
IoT (Internet of Things) devices are a rapidly growing technology category encompassing a wide range of physical devices connected to the internet. These devices are embedded with sensors, software, and other technologies to collect and exchange data with other devices and systems over the internet. IoT devices can range from simple household items like smart thermostats and light bulbs to more complex systems such as smart city technologies and industrial sensors.
The firmware in IoT devices plays a critical role. Firmware is a specialized type of software that provides the necessary instructions for how the device operates. It's essentially the device's operating system, but it's typically more directly integrated with the hardware than general-purpose operating systems like Windows or Android. Firmware controls the low-level functions of the device, from managing sensor inputs to controlling the device's response to external commands. It's often stored in non-volatile memory, which means it remains intact even when the device is powered off.
Upgrading firmware is crucial for maintaining IoT devices' functionality, security, and performance. As these devices become more integrated into our daily lives and industrial processes, ensuring their reliability and security through proper firmware management is increasingly important.
API
An API (Application Programming Interface) is a set of rules and protocols for building and interacting with software applications. It can be thought of as a mediator that allows different software programs to communicate with each other. To reference the shop window example from earlier, imagine the API as a catalogue or an order form available at the shop window. Customers (in this case, one software application) can use this catalogue to request specific items (data or functionality) from the shop (another software application). The shop assistant (the server) then processes these requests and delivers the desired items.
For instance, consider a weather application on your smartphone. This app likely uses an API to retrieve weather data from a remote server. When you request the latest weather information, the app uses the API to ask the server for the latest data. Upon receiving this request, the server processes it and returns the weather information. The app then displays this data to you in a user-friendly format. In this example, the API defines how the app can request data from the server and in what format it will receive the responses.
This process allows for efficient, standardized communication between different software components, enabling developers to create complex, feature-rich applications.
Conclusion
In summary, this guide has provided a clear overview of the key components in web development, from client-server dynamics to APIs, and the role of IoT devices. Understanding these elements is essential in today's digital world, not just for developers but for anyone interacting with web technologies. With this knowledge, you can better understand the workings behind websites and apps, paving the way for more informed interactions and potential contributions to the field of web development.
