Here are some tips for developing web applications. We use these principles – and some others – at SEDOO. Of course, we do not claim to be absolutely right in our choices. We are just trying to indicate why we have made these choices.
Split your application in two
It is important to split your application into two parts.
- It allows the use of specialised technologies for each of the parties and thus to take advantage of them more efficiently
- This will open up new use cases, such as allowing other software to use the services offered by the application
Backend
The first part is the backend, the part that runs on the server. Its role is to manage things such as database and user rights, for example. It exposes its different functionalities in the form of services that will perform tasks and transmit the results to the clients.
Notes
- SEDOO uses the Java language and the SpringBoot framework to develop the backend. This choice was made because it allows to build large-scale applications that are sustainable and can be shared. For smaller applications other technologies such as Python are legitimate.
- The choice of backend technologies must be validated by the security services that manage the physical infrastructure on which it will run
Frontend
The privileged client is the graphical user interface running in the browser. This is called the frontend. It will be responsible for managing the sequence of screens and , display of data, react to user interactions…
Other clients – who will consume the services offered – may exist. These can be, for example, script shells.
Using HTTP(S) & Json for your API
The set of services offered by the backend is called Application Programming Interface (API).
In modern applications, the API is generally based on the REST paradigm (https://fr.wikipedia.org/wiki/Representational_state_transfer). In really short, this means that the services are accessible via the HTTP/HTTPS protocol and that the data is exchanged in JSON format.
The advantages are as follows
- Easy to code in the backend
- Easy to use by clients
- Easily integrated with security
The major digital players (Amazon, Google, Facebook,…) almost systematically offer such APIs on their applications
Security is simple
Security consists mainly of
- Authenticating a user: i.e. verifying who they are
- Authorise a user: i.e. checking that he has the right to do so
Security is often scary. But with frontend/backend architectures it is easy to implement.
Authentication
It is easy and convenient to use external systems for authentication. A user can register with his Google, Edugain or Orcid account for example. This way, the application does not have to manage a password system.
Authorisation
The frontend/backend applications have defined the JWT standard (https://fr.wikipedia.org/wiki/JSON_Web_Token) which allows the simple and secure transmission of authorisation information with each request sent by the frontend to the backend.
Documenting your API with OpenAPI (a.k.a. swagger)
The backend technologies can be different (Java, Python, PHP,…). However, there is a standard – OpenAPI (https://swagger.io/specification/) – available for most languages that automatically generates a website to
- Describe an API
- Use this API
For example, here is the API for a SEDOO service: https://api.sedoo.fr/aeris-doi-rest/swagger-ui/index.html.
The API must be public
This may seem counterintuitive, but it is preferable that the API is public. This does not mean that all services are open, of course. It does mean that the backend language should allow you to indicate precisely which services are open and which require authentication
For example, here is a public API containing secured services
Do not systematically use a SQL database
This advice is very subjective, so I’ll just mention it…
SQL databases are very appropriate in certain use cases. Mainly when the data is very homogeneous and you want to do operations between the data (search, join, calculations,…)
On the other hand, in some cases, SQL technology can lead to unnecessary complications with very complicated models. This is the case when the data form packages that are always used together.
In these cases using a SQL database is like putting away your Lego toys, taking them apart each time and putting them back together each time you want to use them. For these cases, more recent technologies such as MongoDB allow to simplify life
Use a Javascript framework for the frontend
The advantages of Javascript frameworks
There is no choice for the frontend technology as these are imposed by the browsers. The whole interface will be created with HTML/CSS/Javascript technologies.
However, there are different frameworks that allow
- to simplify the development.
- to create dynamic screens
The use of a Javascript framework also allows the application to be integrated into any web page (without using an Iframe). Indeed, these frameworks are able to convert HTML and CSS into Javascript code. Thus, the whole application is just a – big – javascript file that can be loaded in a static page or a page generated by a CMS like WordPress/Drupal/… or of course in several pages in several sites.
For example, this site shows a metadata catalogue application integrated in a wordpress site: https://mtropics.obs-mip.fr/catalogue-m-tropics/
It is also important to note that, with this strategy, backend and frontend are not necessarly located at the same place. This is the case with this site: https://seismology.resif.fr/
- The site is basically a classic wordpress site (people create pages, publish news). This WordPress site is in Toulouse (France)
- Some of the pages include web components that query an API in Grenoble (France)
Which framework to choose?
There are three popular frameworks: Angular, React and Vue.js.
SEDOO uses the Vue.js framework because:
- It is very simple
- It covers all needs
- It is neither restrictive nor tied to an editor as Angular or Rect.js can be
- It is easily extensible
Use complementary libraries
The javascript framework provides a technical base to facilitate developments. However, it is necessary to complement it with a number of libraries in order to minimise the amount of work to be done.
Among these libraries, an important one is the one that will allow to bring richer graphical components to compose the interfaces.
The SEDOO uses the Vuetify library (https://vuetifyjs.com/en/), which makes it easy to set up screens that respect the « Material Design » recommendations which is used in the Android applications.
Here is an example of a screen obtained with Vuetify
Use web components
Javascript frameworks also allow you to create your own HTML tags. They are called Web Components. This allows you to break your application into smaller parts that you can inject in several places on the page.
This can be seen in the following extract
This corresponds to the following output:
Use Git
Whether you work alone or in a team, it is essential to use a software forge to store your code in its various versions. The Git tool is the essential standard. Public or private forges allow remote teams to work together.
Note
Sedoo is also using GitFlow which is a set of recommendations for organising yourself efficiently around Git.
Real example
Most of the codes developped by SEDOO aren’t public. However there are some exceptions. It is the case of the software called CRUSOE.
You can try this application here: https://crusoe.ouvrirlascience.fr/ (don’t hesitate to log-in and to play with it)
You can also check to code here: