My new web application architecture: A Svelte front-end using API Platform (micro)services

For a new project, I decided to upgrade my architecture. My previous architecture ran with single-instance SaaS build in Drupal. Meaning that every new customer would get its own Drupal installation with its own database. As I learn more about APIs with by building services with API Platform the advantages of a big monolithic application like Drupal is diminishing. Currently, I developed the following services that I use in my applications:

• Video processing API
• Environment deployment platform API
• Google Adwords integration API
• TransIP domain API

There are many reasons not to build another project with Drupal. As Drupal matured, it became a slow adapter of new technologies that define modern websites. For example, the use of a virtual DOM with javascript libraries like React and Vue.js with a Drupal application is non-trivial. Furthermore, even though Drupal makes a lot of process in support APIs with the API first initiative it is still way behind API Platform in semantic linking with JSON-LD and Hydra. Lastly, Drupal’s queue system works but it can not compete with RabbitMQ and Symfony Messenger.

Front-end solution Svelte Sapper

I did experience a bit with Vue.js and GraphQL and Vue.js was my first choice until I discovered the following presentation from Rich Harris, the creator of Svelte.

The concept of reactivity where you only need to update the values that changed (like spreadsheets) makes a lot of sense. Instead of having to include a full library like React and Vue.js the application is compiled to pure javascript. This saves a lot of space which makes the application faster to load. Furthermore, the native support for CSS animations is a big bonus. As I do not have much experience with any other JS framework I decided to learn Svelte and try to use it in my new project. I will not go into the language itself because there is a very reactive official tutorial that you can follow which will explain most concepts.

The main concept to understand is that Javascript (frameworks) is that most of the code is executed on the client (i.e. browser) instead of on the server. This allows for certain parts of the website to be updated instead of having to reload the full page. A big downside of most Javascript framework is that the page is not rendered on the server. This is bad for SEO purposes because trackers will see a page with no content.

This is why all popular JS Frameworks have solutions to allow server-side rendering (SSR) all confidently or unoriginally with similar names:

• Nuxt -> Vue.js
• Next -> React.js
• Nest -> Angular

To get SSR in Svelte we have Sapper. The onboarding is great with their template if you want to check it out you can run these simple commands:

npx degit "sveltejs/sapper-template
cd my-app 
npm install 
npm run dev & open http://localhost:3000

Now, we have a basic blog application with separate pages. I am now working on getting the Authentication in place. My thinking goes like this:

<script>
    let email = '';
    let password = '';
    export let handleSubmit = function(event) {
        console.log('submit');
        console.log(email);
        console.log(password);
        console.log(event);
        // Call an authenication microservice to handle the authentication.
        const response = await fetch("http://localhost:8001/api/",
        {
            // TODO: test
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({email: email, password: password})
        });
        // TODO: store in session persisted with Redis either using Store or a library
        // E.g. express-session
    };
</script>

<style lang="scss">
  label {
    &:hover {
      color: green;
    }
  }
</style>

<form on:submit|preventDefault="{handleSubmit}">
  <label for="email">Email:</label>
  <input type="email" id="email" bind:value={email} required />
  <label for="password">Password:</label>
  <input type="password" id="password" bind:value={password} required />
  <button type="submit">Account aanmaken</button>
</form>

Here create a Signup form and remove the default submit handler and call an API to handle the authentication. We use kazzkiq/svelte-preprocess-scss for SCSS support in Svelte files. The biggest hurdle to take is to figure out how to use sessions (Stores). There is some work done in this area but besides this issue, there is little documentation or examples. That is one of the downsides of using Sapper as it is in very early development.

JWT tokens

Besides the front-end, the decision for a new architecture also complicates the back-end a bit. For example, authentication between services. I am planning to use an authentication system for the back-end based on JWT tokens. A good introduction is this video.

There are also downsides of using JWT tokens and I am planning to use them mainly for communication between the services (see the image below) and not expose them in the client’s browser as this has many downsides. The architecture I now have in my head is this:

An update about the blog

To increase the number of articles and keep the motivation up I decided to commercialize the blogs with advertisements. A few articles get a decent amount of views every day so even if I make a couple of bucks every month it will motivate me to keep writing. Furthermore, I also started working together with Ryan Weaver, the creator of Symfonycasts and Symfony core member. Together, we created the course for API Platform which you can watch here. A new course related to API Platform and security is coming up.

There are many things going on in my life. First, my girlfriend is pregnant and she can give birth to a girl any day. I started getting into videography and bought the Blackmagic Pocket Cinema Camera 4k and a complete rig for the new project that uses the new architecture:

Lastly, I made a bet with a friend (and reader of the blog) to get a visible sick pack (muscles not beers) on the 30th of June 2020. So, I bought equipment for training at home and getting into the science of fitness.

My main learning sources for weightlifting are Arnold’s books and the ATHLEAN-X YouTube channel.