Have you ever thought that you would like to create your own website or develop web applications? Then you've come to the right place and the following lines are for you!
Author: Marek Fojtl
Website or web application?
Nowadays, we are increasingly seeing the term web application, although it is actually a website. Let's describe the differences between them and how they are related.
A Web page is a document that appears in your web browser when you enter the appropriate URL address. This document is most often created in HTML (or XHTML) using cascading style sheets (CSS) and animated with the JavaScript programming language.
A web application is generally defined as a web page or set of web pages with complex functionality. The application is loaded from a server and runs in a browser without the need for installation. Examples are online stores or online banking. The server on which the data is stored and which also handles all the operations (e.g. adding items to a shopping cart) is referred to as the backend. The user interface of the web application is then called the frontend. Hence the job title frontend developer or popularly frontend.
Starting with the frontend of web applications
Every good frontend developer can't do without knowledge of HTML and CSS. If you don't have any experience with them yet, try creating your own personal presentation to start with, and then gradually improve it as you learn new things.
If you don't just want your site to be static, but also want to "bring it to life", you will need to learn the basics of JavaScript. This has a fairly wide range of uses and you will encounter it at almost every turn. The vast majority of web applications today won't even run without it, and it can be programmed on the server as well.
The terminal or command line is also an integral part of the frontend's work. The developer uses them to run various utilities that help him in development.
A lot of companies today are switching to the so-called Single Page Applications (hereinafter referred to as SPA), which require a deeper knowledge of the principles of web applications, so we will discuss them in more detail.
How SPA is formed
A classic web application works by the user entering URL into the browser, sending a request to the server, from where HTML code is returned and the browser starts executing it. It starts downloading the attached cascading stylesheets and JavaScript files, which then execute and bring the page to life. The user then sees impressive photo galleries, form elements responding to incorrect inputs, etc.
But SPA works differently. The change occurs when the browser starts executing JavaScript files. At this point, they are not just for animating the page, but contain the complete application code (or at least the executable part). As a rule, the application most often starts with code that first looks to see what URL address we are currently at. The corresponding page content is then rendered accordingly. For example, if we are on https://www.oblibena-nemocnice.cz/oddeleni, then our code must be able to render a listing of all the departments in the hospital. The work with the URL address is handled by a mechanism generally called router. This has the task of tracking changes in the URL and passing control to the code, which will take care of retrieving the data and rendering it correctly. The router uses the History API to change the URL in the browser address bar without having to reload the page.
The rendering and maintenance of the page content is taken care of by the DOM (Document Object Model), which is an object-oriented representation of the HTML of the page. The browser stores the received HTML code internally in this object tree structure and the programmer can then manipulate this structure freely. For example, he can add more HTML elements, edit the text in them, or delete elements.
The Web API takes care of communication with the server. The developer does not program the network traffic directly, but uses the interface provided by the browser. Data can therefore be downloaded without having to reload the page. This technique is called AJAX. It is also worth mentioning that the communication takes place using the HTTP protocol, knowledge of which certainly doesn't hurt either.
Events take care of the interaction with the user interface. For example, when a user clicks on a button with the mouse, a "click " event is raised. The developer can then register a listener to this event and can control the running of the application. When the user clicks on the link, this event needs to be responded to and stop the default browser behavior, which is sending a new request to the server that causes the entire page to be redrawn. With SPA, the user is still on the same page. So the developer has to take care of all the machinery himself. And that means cleaning up after himself, changing the URL, fetching new data from the server, rendering it and hanging new event listeners.
As you can see, it takes a lot of effort to create such an SPA. And this hasn't mentioned here by far everything a frontend has to deal with. But fortunately, there are a bunch of helpers that can simplify the work and remove the developer from the routine stuff.
Library vs. Framework
Before we look at the individual helpers, let's explain the difference between a library and a framework.
A library is a comprehensive code that focuses on solving a specific problem. Such a problem might be, for example, UI rendering or the aforementioned router. Therefore, if a developer decides to use only libraries, then he must take into account that he needs to find a suitable library to solve each problem or he must program the solution by himself. On the other hand, this gives the developer more freedom and control over the application code.
The Framework, on the other hand, provides a complete solution for developing an application, so that the developer is able to create it without having to search for additional libraries. Frameworks often offer a complete development background (compilation, code change tracking, testing, etc...), which can make the job easier not only for beginners. The downside is that if a developer doesn't like the behavior of a part of the framework, he usually has no way to modify it and has to adapt to it.
React
Probably the most talked about library of our time. Created by Facebook, it primarily handles UI rendering, i.e. working with DOM and events. The community around React is large enough, and over the course of its existence, many supporting libraries have been created to take care of loading data or working with URL.
Angular
Angular is probably the best known representative of the framework group. Its existence dates back to 2010, when the first version, then known as AngularJS, started to be created.
Angular offers everything a developer needs to create a great application with minimal effort. It is still under active development and enjoys quite a lot of popularity. It is more suitable for larger (corporate) applications and administration systems. But you can comfortably create personal pages in it as well.
Vue.js, Svelte and others
Among other players in the field of libraries and frameworks it is worth mentioning Vue.js, which competes with Angular or Svelte, which can be described as a competitor of React.
There are a lot of solutions. Whichever one you choose, it's a good idea to keep an eye on whether there's active development going on and how big the community is. No one maintains abandoned solutions anymore, so fixing bugs or adding new features is out of sight.
You certainly won't make a mistake if you put yourself in the hands of one of the big players. For example, here at LOGEX we chose the Angular framework and have built all our applications on it. This allows us to focus more on product development and user experience and leaves the routine stuff to the framework.
So let's make your first SPA a success and enjoy it. ;-)
