Learning Svelte 3 | component-ize all the things

Dang it's been a minute! I'm happy to be back writing about Svelte; today I'd like to talk about components, why component based development is efficient, and how to create & use a Svelte component.

Back in the old days, the file structure of a web site may have looked something like this...

public/
    html/
        index.html
        blog.html
        contact.html
    css/
        style.css
        blog.css
    js/
        index.js
        contact.js
assets/
    img/
            portrait.jpeg
            favicon.png

This structure for a web frontend aimed to "separate your concerns", meaning that the markup (HTML), styling (CSS), and logic (Javascript) should exist in there own files. This worked for a while because this is very much how the browser sees our code. However, the development experience created by this scenario creates some problems. Let's look at a nav bar for example. If you were creating a website using this file structure, you would write some HTML like this...

<nav>
    <ul>
        <li><a href="index.html"> Home </a></li>
        <li><a href="blog.html"> Blog </a></li>
        <li><a href="contact.html"> Contact </a></li>
    </ul>
</nav>

You would then need to copy + paste this nav bar into every page on the site, while also referencing the appropriate CSS & JS files. This may be an okay experience when you're starting a new project, but what about 3 years down the line when you have 50+ pages and the client wants to add something new to the navigation? You can imagine the work required to accomplish an arguably simple task. This is where component based development becomes critical; we make our code reusable through out the site/ app. You'll see this pattern appear a lot in development (especially for the web) where we want to write code in one place and reuse or reference it throughout the project.

For our nav bar example, we would simply have a navigation component that gets imported into each page it is needed on. Then if I make a change to this component, that change is reflected throughout the code base. Brilliant! Now that we see the advent of using components, let's take a look at how we can make and use components in Svelte.

Here is the example provided to us in the Svelte tutorial regarding 'Nested Components'...

Here we have our main App component named 'App.svelte'...

<script>
    import Nested from './Nested.svelte';
</script>
<style>
    p {
        color: purple;
        font-family: 'Comic Sans MS', cursive;
        font-size: 2em;
    }
</style>

<p>This is a paragraph.</p>
<Nested />

note that we're using EMS syntax to import our Svelte component. You can learn more about ESM here

If you're using the Svelte Template, App.svelte is the main file where our app lives. In the above example, we are importing a component called 'Nested' and then displaying it in our template below. Because Svelte scopes styling, the CSS we see in our App component won't style the paragraph tag that is within our Nested component. Now when we edit the content of

<Nested />

, the content is changed everywhere that component is referenced. Great! We've eliminated the problem of repeating code. To return to our first example, we can now create a

<Nav />

component that can be efficiently reused throughout our Svelte app.

Next time we'll talk about how we can use Svelte components in really creative ways while utilizing props to share data between them.