Even if you don't code it's always very useful to understand what you are building and why it's constructed in this way, not others.
In this article we review the architecture of very minimal web application and tell you how it works:
- Backend and frontend
- Technology used for our web applications
- The structure of the minimal web application
- Where are backend and frontend parts in Caravel Studio
- Questions and answers
All web applications has 2 fundamental parts: the backend and the frontend.
The backend is a program that is running on the server. This program consists of the code that does all the important thing that is better to hide from the end users:
- register / login / change passwords
- database operations
- inner logic
- account maintenance
- routes control
- communication with 3rd party libraries and so on.
For example, it can be:
- obtaining data (like user name and password)
- validating data before sending to the server
- providing visual effects that makes the experience rich and interactive
- providing services for data processing - like editing texts and images, doing calculations, showing data and providing its editing.
It's shown in the following picture:
It may look a little bit messy on the first glance but there is a definite logic.
Backend (red files) are the root files application.py (Python file) and config.py that are responsible for starting the application and loading its configuration (important data). Other backend files are API files (functions for interaction with browser) and so-called "blueprints", or module files. We have only one main module (blueprint) in this app.
Backend templates (orange) are HTML files responsible for showing information and views that users see. They could be the backend and frontend ones. Here are backend templates that actually are rendering on the server and returning the final result to the user. It may be useful for SEO purpose (search engine optimization) or to hide the logic of application. We will touch the SEO problems in another article.
Frontend files (blue) can be found in the /js folder. It's the files servicing pages (JS code is loaded into browser coupled the pages).
Service files (green) are not used during the running application but we use them to:
- install all the frontend and backend files and libraries used in app
- specify the type of application and how to run it (instructions for the server)
- build the front end code and transform it from the presentation readable to developers into the presentation that is more convenient for the browser.
Now, let's have a look at our project in Caravel Studio. Where are these parts can be found?
Web page layout and stylesheets are definitely the frontend parts (it's not about where these editors work but about what code they produce - both produce frontend code):
If we look at the workflow we used in the previous tutorial (How to create a landing page with email form) we can see both parts in action:
User event and Edit control modules are both the frontend parts. User events just listens to anything happening with a web page while it's working in browser. Edit control also set up properties of controls on a page in browser.
The Send email module is different, though. It's actually a mix of parts. First of all, it sends the request to the server (with email data) and it's done in browser. But on the server the backend part works - it gets the data, initiates email sending and sends the result back. Currently, Caravel Studio doesn't have any pure backend parts but it will have many in the nearest future.
When we publish, or deploy our app, it generates backend and frontend code, sets up the structure shown at the very beginning of this article, and build the final project that will be sent to the server after.
If webpages are just HTML code why can't we just put them into the folder on the server without running any server-side application?
Another problem is the routing. If you want your route looks like www.mysite.com/about rather than www.mysite.com/about.html you have to change the server's configuration what can be a challenge.
What does the rendering process include?
The Python (Flask) engine goes through the HTML code and, if it sees some variables to be inserted from the data, it does. So, the template at the beginning doesn't look pretty much as a valid HTML code because of stubs - but the engine fills them up and returns as a normal HTML page.
Should I worry about the code the Caravel Studio generates? What if it handles the data in a wrong way?
Well, all of us are just people, of course... but we are people with more than 16-years experience so don't worry. We not only put everything in right places, we even don't store the sensitive information in our database. Every password is stored as encrypted string, and we don't store your web app's configuration data at all (we just send them directly to the server which handles it).