DEV Community: Marco Monsanto

Routing in SPAs

Marco Monsanto — Wed, 24 Jun 2020 18:20:57 +0000

What is Routing

Routing is a concept that exists in server-side applications for a long time.
In a short version, it's the concept of mapping URL patterns to parts of your application.

Why we should use Routing in SPA

Routing is not an obligation to have in your SPA(single page application), but sure is something worth your time. You and your SPA users will appreciate that you took the time to implement this.

Take a look at this example of a SPA without Routing:

You have the following website → yourwebsite.com

You have a Landing Page, an About Page to talk about yourself, and a Blog Page where you share your posts.

Now imagine that they want to go to your Blog Page to check your latest Post. So they click your "Blog button" and they see this.

Everything seems fine, you could manage the views with some "if" statements and everything is in place. Until someone tries to share the post or bookmark it. Look at the URL at the top of the image.

It says: "yourwebsite.com/".

Guess what will show up when you enter URL in a different tab and press enter? Yes, it will show the landing page.

Why? Because we are not saving the state into the only thing that at the moment survives a reload, the URL.

This is why URLs are much more than just the text that shows in the Address bar, it's the state of your application at that exact point(not all the state, but the minimum that you need to get the user back into the point they left).

How a routing will help you

As I said before, routing is the concept of mapping URL Patterns into parts of your application and should match the state of your application at that exact point.

Probably a good URL for when you are at the Blog page could be → yourwebsite.com/blog

Now, when someone enters that your, you know what they are looking for, they want to see the blog page from your website, so you just have to read the URL and show whatever is supposed to be there.

Now imagine that they click in the "Post 1" and move there.

Now the URL needs to have something that identifies the Post that they want to see, maybe → yourwebsite.com/blog/post-1

Again, this way you know what they are looking for. They want to see the post with the title: post-1 (to be used this way, this needs to be a unique identifier and we only use it to identify post-1)

Let's break down the URL at this page:

yourwebsite.com/ → this is your domain, where your app lives on the webs.
/blog/ → this is your page with all your blog posts
/post-1 → this is your latest blogpost

With a URL like this, your SPA will be able to read it and know what information should be shown. Not always the landing page, but a specific page.

How to achieve this

To make URLs have our state we need to do two possibilities:

Use the HistoryAPI to change the address bar, add our state to our URL, and read from it to know what to display.
A library that helps us manage the routing.

History API

This API was introduced with HTML5 and gave us two methods to manage our URLs, pushState() and replaceState().

To achieve our goal we will need to use the pushState() method. This will allow us to add a new entry in the History of the browser, in our case, this means a new page.

The pushState() method takes three parameters: a state object, a title(ignore by all but safari), a URL.

For our example, we will only require to call it with the URL param. To do that we write this.

pushState('', '', '/blog/');

This line will create a new entry "yourwebsite/blog/" with the usage of the History API.

Imagine the list of your browser history, the pushState() will put a new entry on top and set our address bar to that newly created entry.

A library that does the heavy lifting

Implementing this by yourself with history.pushState() is something that takes a lot of time.

If you are working with SPA, you are probably working with libraries like React, Vue, Svelte, etc.

Those libraries already have good community projects that give us this out of the box without the need to use the time that would be better off investing in your website.

I would say, React-router for React, Vue-router for Vue.

In the case of Svelte, if you need only Client-Side Rendering use svelte-spa-router, if you need server-side-rendering you can use svelte-routing or Sapper, but the later being a framework that you work on top off.

Thanks for reading this blog post, I hope that I could how we can achieve a good routing in SPAs. After this, I will show you how we can implement Routing with Svelte and svelte-spa-router.

I will be posting more content related to Svelte and how to work with it in the next weeks, feel free to follow me here and/or in my twitter.

Looking forward to hearing your thoughts regarding this article and Svelte, share experience with this awesome tool.

Svelte: An introduction

Marco Monsanto — Thu, 18 Jun 2020 15:52:48 +0000

Svelte is one in a sea of frameworks and libraries to build User Interfaces.

Even if most, if not all of them follow the same principle of creating components that are readable, reusable and composable to build dynamic and complex layouts, there are always differences in the inner works and syntax.

In this post, I will share how is the syntax, how reactivity works in Svelte, and what ends up in the bundle after the build process. For that, I will create a Simple Counter with increment and decrement.

First, The Syntax

This is all the code that we need for creating our counter, update the value and render the new value.

The Script

The script tag is where we add all our javascript to manipulate our component.

In this case, we only manipulate the value of the count variable.

The Styles

The style script is where we add all our styles for this component. All styles inside the component will be scoped to itself, so even if you add styles to

, it will only apply in the

's inside itself by adding a class with "svelte-component_generated_hash".

The HTML

The rest of our code will be seen as HTML.

In the end, we will have something like this as our DOM.

As you can see, we have a super clean DOM with all our declared HTML and scoped styles.

How can we achieve reactivity in Svelte

Reactivity is the process that triggers the rendering process for the DOM to reflect the changes in our variables values.

Reactivity in Svelte works based on assignments, in our case we have a variable that we want to change based on clicks in the increment and decrement buttons.

Now let's take a look at our "script" tag.

We have:

One variable called count
Two functions called increment and decrement

Both of our functions perform an assignment in our count variable. This will do trigger a re-render and update the DOM with our new value.

Here is the documentation related to reactivity:

To change component state and trigger a re-render, just assign to a locally declared variable.
Update expressions (count += 1) and property assignments (obj.x = y) have the same effect. - Svelte Docs

What's Next

After this, we will move into more real live use cases like communication between components with props and events.

I will be posting more content related to Svelte and how to work with it in the next weeks, feel free to follow me here and in my twitter.

Thanks for reading this blog post, I hope that I could explain in an easy way this introduction to Svelte.

Svelte: a different approach to build UI

Marco Monsanto — Mon, 15 Jun 2020 16:10:21 +0000

In a world where we use frameworks and their abstractions to focus on the important thing that is getting the job done, Svelte is a framework that takes a different approach to get to the same result.

In this post, I will share how I got to know Svelte and why I consider it as one framework to use in future projects.

^{Photo by Ferenc Almasi}

What is Svelte

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app." - Svelte Website

How Svelte entered my interest list

During one project where our team needed to create an APP for a client, we came across one challenge that was related to their business model. The app is a widget that needs to load as soon as possible since we are always dependent on the host page performance, something that we have no control of. So performance in our case is the main requirement.

While trying to improve the app performance by trimming the external dependencies to become as lightweight as possible, after some iterations we reached a point where most of our bundle size was React and React-DOM.

Now, there are some actions we took, but some questions started to grow in my mind.

Shouldn't we always deliver the most performant code that we can?
Aren't one of the reasons why we use frameworks, the abstraction that it provides but also the ease of use and the tools to do our job more efficiently?

Nothing against React, it's an awesome tool and, in my opinion, the best ecosystem to work. It has a lot of tools for the most common problems that we face like routing, state management, component libraries, and more.

But for our case, it was probably not the best tool for the job.

This is where Svelte enters the room.

What makes it different

Contrary to other frameworks, Svelte is a compiler.

What does that mean? And most importantly, how is that a positive thing for developers and end-users?

This quote from the Svelte website gives a good, concise explanation.

"Svelte compiles your code to tiny, framework-less vanilla JS - your app starts fast and stays fast" - Svelte Website

While React, Vue, and other frameworks provide us an interface to create slick UI's, we need to send the framework as a dependency in our bundle for it to render and manage the UI. With Svelte this is something that doesn't happen.

Svelte will pick up all your code and compile it into "framework-less vanilla JS", while we build our app for production it will make our code something that the browser can understand out of the box, without the need of an "orchestrator".

^{Chart from this freecodecamp article, if you would like to dive deeper I highly recommend take a look at it.}

Why should we consider it for a future project

More than the small bundle size and by consequence faster load times in the browser, more points make Svelte so interesting to me:

Svelte code, in my opinion, is very clean and readable.
Stores for state management already built-in with "svelte/store" module.
Event forwarding super clean with the "on:whatever" to make it accessible to parent without having to move up and down with props.
Special attention to animations, for slick UI's.
Document header management already built-in with "svelte:head".

The community around Svelte is growing but there is still a difference between the size of the ecosystem compared to React.

Final remarks

All that I wrote above is the result of the search and experiment that I had with Svelte after I came across a challenge at work. By no means, I tell everyone to move to Svelte right away, but I think that it is worth considering for next projects.

Svelte brings a new different approach to building UI with some awesome and, in my opinion, important aspects that helps developers create an awesome work.

Where to go from here

If you want o dive deeper into the world of Svelte I highly recommend you check their website and follow their tutorial, it has a lot of information and a REPL set up for you to practice everything your read.

Thanks for reading this blog post, I hope that I could bring some light into what Svelte is and what was the context that lead me into take a closer look and experiment with this different approach.

I will be posting more content related to Svelte and how to work with it in the next weeks, feel free to follow me here and/or in my twitter.

looking forward to hearing your thoughts regarding this article and Svelte, share experience with this awesome tool.