A Basic App Technology Overview – Understand Frontend, Backend & More! (Episode #011)

Full Podcast Transcript

Ever wondered what goes on behind the scenes when you tap a button on your favourite app? Today, we're peeling back the layers of an app, from frontend to backend, explaining the various bits and pieces in a simple language.

Welcome to the Tech Toolkit Podcast by Scorchsoft. I'm Andrew Ward, and today, I'll be your guide into the intriguing world of web and app development. Even if you're an absolute beginner, I assure you, you're in the right place. If you've ever been curious about how your day-to-day digital tools come to life, or if you're thinking about launching a tech project of your own, today's episode will be help you to understand the basics of how it all sticks together.

Let's start with some beginner concepts: front-end and back-end development – Also known as the client side and the server-side.

Picture your favourite website or the app you can't live without. All the bits and pieces you interact with — the layout, the buttons, the colour scheme — that's the front-end. It's all about making your user experience enjoyable and seamless, created using HTML, CSS, and JavaScript. HTML provides the structure, CSS adds the aesthetic flair, and JavaScript brings in the interactive elements. Imagine it like walking into a restaurant; the decor, the arrangement of tables, the lighting — all these elements influence whether you stay or leave.

Now, let's think about what happens when you order at that restaurant. Your order goes to the kitchen, where the real action happens — that's the back-end in the digital world. It's the behind-the-scenes workhorse, handling data processes, app logic, and server-side operations. It uses languages like JavaScript, PHP of Python to handle all of the heavy lifting of what to do and when.

Notice that Javascript is a language that can be used on both the front end and the back end which is a big reason it's use has grown in popularity in recent years!

But how do the front-end and back-end talk to each other? That's where APIs, or Application Programming Interfaces, come in. APIs are like a restaurant's waitstaff, taking orders from the front-end (the customer) and delivering them to the back-end (the kitchen). They ensure understanding of requests and ensure responses are properly formatted. When we develop an app with a back-end, we create an API to facilitate communication between the two. You can also integrate APIs into your system that are publicly accessible, allowing others to seamlessly connect their systems to yours.

As such, APIs make it possible for different software systems to interact. In today's digital world, where apps often need to connect with other apps and services, APIs provide a standardised way to exchange information. This is vital for creating seamless user experiences, particularly in web and mobile apps. APIs can also help maintain system security and efficiency by only exposing necessary data and functionality to the front-end. A well-crafted API also future-proofs your idea. For instance, if you initially launch a product for the web, you could later introduce a mobile app that utilises the same API to communicate with the backend, achieving two goals with one solution!

As we explore further, I'll mention some technical terms. Don't worry if you're not familiar with them. The important thing is that we, at Scorchsoft, know them and will use the most suitable ones for your project.

Originally, when apps first hit the market, developers had to build a new app from scratch for each operating system they wanted to support. This meant that if you needed both an Apple iOS and Google Android app for your business, your project costs would double!

Today, front end tools like React and React Native have modernised the way developers create dynamic and responsive interfaces. React, a JavaScript library, helps us build web applications with highly interactive UIs. React Native extends this functionality to mobile apps, saving time and resources by allowing a single codebase for both iOS and Android platforms. This cross-platform capability negates the need for separate development for each platform.

Certainly, coding native apps remains an option, and there are valid reasons for choosing this path. However, for most early-stage projects, the cost-benefit trade-offs of using a framework like React Native are a no-brainer.

Let's delve into the data aspect of the back-end. Your app likely requires the storage of data and information, such as user records and login details, to function properly. This requirement is standard across most applications. The question then becomes, how should you store this data? Generally, selecting a database is necessary. Picture a database as an advanced spreadsheet with numerous tabs and tables filled with data.

The most common decision is whether to choose between SQL or a NoSQL database; A decision which hinges on the project's requirements.

“SQL” stands for Structured Query Language and is simply a common approach to storing and retrieving data. SQL databases excel in scenarios requiring complex query processing, whereas NoSQL databases are great for handling large volumes of unstructured data. The choice between SQL and NoSQL depends on the specific needs of your project.

Typically, if your database is set to store fewer than one billion records and use less than 100 gigabytes of data, an SQL database will likely offer the best cost-benefit trade-off for your needs. However, if you anticipate requiring several terabytes of data, a NoSQL solution may be more suitable. This is because NoSQL makes it easier to distribute data across multiple servers, offering a more scalable option. This is why for most apps we will default to use an SQL database unless there is a good reason not to.

Consider a framework in back-end development as the blueprint and foundational structure of a house. Just as a blueprint provides a guided pathway and predefined structure for building different parts of a house, a framework offers a structured foundation for developing applications. This structure comes with pre-written code, modules, and a set of rules and conventions that help in streamlining the development process.

Taking specific examples: Laravel, a PHP framework, can be likened to a luxury, modern home blueprint. It offers an elegant syntax and robust features, akin to having high-quality materials and state-of-the-art designs that make the construction process efficient and the end result both functional and aesthetically pleasing.

Express, a framework for Node.js, is like the blueprint for a minimalist yet high-speed sports car. It is favored for its speed and simplicity, emphasizing performance and quick development, similar to a car designed for speed with a simple, lightweight design that prioritizes essential features for performance.

Flask, for Python developers, can be compared to a basic, yet highly customizable studio apartment blueprint. It's a lightweight solution that provides the essentials, allowing developers to add and scale as needed, much like starting with a simple studio layout and having the flexibility to customize and expand it according to one's needs.

In each case, the framework provides the basic structure and tools needed, allowing developers to build and customize their applications more efficiently, just as various blueprints guide builders in constructing different types of buildings or vehicles according to specific requirements and preferences.

We've discussed front-end, back-end, and APIs, but what about the computers that host these components? Server technologies play a crucial role in deploying and managing applications. The choice of server technology influences an application's performance, scalability, and reliability.

As for architectural styles, we have monolithic, distributed services, and microservices architectures. These are the different ways we can set up your servers and hosting to support the growth of your application.

To explain the difference between monolithic, distributed services, and microservices architectures, let's use the analogy of transportation systems in a city.

A monolithic architecture is like a single, large bus that carries all passengers to various destinations along a fixed route. This bus (the application) is simpler to operate as everything is contained in one large vehicle. Passengers (different functions of the application) all board the same bus, regardless of their final destination. This setup is straightforward at the start, but as the city (application) grows and passenger numbers increase, the bus becomes overcrowded and less efficient. It's harder to maneuver, slower to reach destinations, and if it breaks down, the entire route is affected.

Distributed services are akin to a fleet of buses, each serving a specific area of the city. This setup is more complex than a single bus system but offers more flexibility. Each bus can operate independently, reducing overcrowding and allowing for more routes. However, coordinating between these buses can be challenging, and passengers might need to transfer multiple times to reach their destination.

Microservices architecture, on the other hand, is like having a variety of transportation options – buses, subways, trams, and bikes – each serving different routes and purposes. In this system, each service (mode of transport) is independent and optimized for specific tasks. For example, bikes are great for short distances in congested areas, while trains are ideal for longer, uninterrupted travel. This setup allows for high efficiency, scalability, and easier maintenance of each service. However, it introduces complexity in terms of overall system management, requiring robust coordination and communication across different transportation modes. This makes microservices suitable for large applications with several teams, but less appropriate for smaller organisations.

But which combination of technologies should you use?

When working with our clients, we consider a wide range of factors, from data volume to user numbers, to determine the best back-end language, framework and architecture style for their project. Most apps following a monolithic approach, using a simple SQL database, can be gradually tweaked and expanded upon as demands scale. This is generally the most cost-effective approach for your first release. However, if a service needs to rapidly scale to hundreds of thousands of users or more, a more sophisticated approach may be necessary from day one.

In conclusion, whether you're just starting or looking to deepen your understanding, the world of web and app development is vast and filled with many different options and choices. At Scorchsoft, we're passionate about leveraging technology to solve problems, enhance user experiences, and drive business success, and have experience helping customers to decide which approach is best for them. We hope this podcast has shed some light on the key concepts and technologies behind web and app development, but if you have any questions, please don’t hesitate to contact us.

Thank you for joining me today on the Tech Toolkit Podcast by Scorchsoft. We're here to help you navigate the complexities of digital development and transform your innovative ideas into reality. Visit us at scorchsoft.com to learn more about our services and how we can support your next project. Until next time, keep exploring the digital world, and stay tech-savvy!