How to use the Svelte JavaScript framework



As 2021 approaches halfway, the golden age of JavaScript continues. One of the most exciting characters in the current chapter is the Svelte frame. This article gives you the basics of building a Svelte project and using a few simple UI elements.

Contrary to current group thinking represented by React, Angular, and Vue, Svelte works on the server side to compile your application to optimized JavaScript. This means Svelte requires a build pipeline setup.

While setting up a build pipeline might seem like extra work, the truth is that any actual development in React, Angular, or Vue requires a build pipeline in some form (like the create-react- configuration) anyway. app or Webpack). Additionally, configuring the Svelte environment allows you to quickly get things like hot-deploy development mode.

Slim configuration

Let’s go ahead and set up a simple build environment. You will use npx and degit for the purpose of creating a starter template. Follow the steps in List 1.

List 1. Initial model

npx degit sveltejs/template infoworld-svelte
cd infoworld-svelte
npm install
npm run dev

At this point, the startup application will be run on localhost: 5000; check it in your browser. Open the / infoworld-svelte folder in your code editor or IDE. There are two interesting source files in the / src directory: App.svelte and main.js. These two elements work together to define what you see in the browser.

Note: all code is available in this repo.

If you are using Visual Studio Code, there are a number of useful (free) Svelte extensions that provide syntax highlighting and autocomplete.

To find them, go to the extensions tool on the left and enter “ext: svelte” in the search bar.

main.js is the main entry point for the application. He imports App.svelte in the first line as seen in Listing 2.

List 2. main.js

import App from './App.svelte';
const app = new App({
            target: document.body,
            props: {
                        name: 'world',

export default app;

Listing 2 shows something interesting about how Svelte works: exporting from App.svelte has been transformed into an object, which is instantiated with the new App({...}) call.

the App the object is configured with a few parameters. These are used to provide the values ​​of the parameters of the Svelte object. the target param is a built-in property that Svelte uses to tell where the application root is (similar to the second argument of ReactDOM.render).

Look now App.svelte. This has the meat of the component syntax in Svelte, which combines the three elements of JavaScript, markup, and CSS with script, main, and style tags, respectively. These are combined, along with the parameters provided by instantiating in main.js, into a component. Note that the main tag can be any valid HTML tag.

Note that Svelte uses variable tokens in the same syntax as other frameworks:

Hello {name}!

. Also note that this variable, whose value is supplied by the parameters of main.js, is exported in the script section: export let name;. It could also be done directly in the script. To see what I mean change this line to let name = "InfoWorld";, completely eliminating the export. The point is, there is nothing magical or necessary about setting up the App object via main.js. It’s just a supported feature for organizing things.

Since you are running in dev mode, the change will be reflected immediately. The browser will now display the new greeting “Hello InfoWorld!”

There are many features required to create sophisticated user interfaces. Among the most essential are iterators and object management. Let’s take a look by adding the code seen in Listing 3.

Listing 3. Iterate over an array of objects


                            {#each quotes as { quote, author }, i}
  • {i} - {quote}

The basic syntax is {#each} label. This is used to reference the variable quotes. The elements of this array variable are then exposed (via destructuring) internal components of the tag, with an iterator counter i. These exposed variables are then referenced with the same token syntax as any other variable. If you know of any other framework, I think you will agree that the syntax is very concise here.

Event management in Svelte

Adding managers like onClick is just as simple. You can add one to the items in the list as shown in Listing 4.

Listing 4. Adding an onClick handler

  • {i} - {quote}

    The event handling syntax is fairly self-explanatory. You can also pass in params to the handler by wrapping the handler function, like so:

  • {i} - {quote}
  • This can be used by the handler function:

    function click(author){ alert("hello from " + author); }

    Svelte components and inputs

    Now get a taste for the component system, along with two-way binding of input elements. You are adding a new component that will create quotes to add to the list. First, create a new file called /src/AddQuote.svelte and paste in the contents of Listing 5.

    Listing 5. The AddQuote component (event dispatch and input binding)



    New Quote




    Component events

    Several new concepts are introduced here. First is component events. These are events that components can raise and that are handled by other components just like DOM events. The basic process is to import the createEventDispatcher from Svelte, and then use it to create a dispatcher function. This dispatcher function is called and passes the name of the event ('quote') and the content of the event (in this case, the new quote information).

    This event is then handled by our App component, as we’ll see in a moment.

    Input bindings

    Binding the HTML inputs, aka two-way bindings, is also simple. You can see this in the main item in list 5. Note the bind:value attributes on input elements. These refer to the variables to which the entry will be bound – in this case, the author and citation variables.

    You then use a button element with an onClick handler to trigger the dispatch event in the onAdd a function.

    Catching custom events in Svelte

    Back in the App.svelte file, you can use the AddQuote component as seen in Listing 6.

    Listing 6. Using the AddQuote component




    Listing 6 shows how, in the markup, you use on:quote to listen to the personalized quote event and send it to the manager function, onAddQuote, which is defined in the script section. This function receives the event, which contains the event object we sent AddQuote in the event.detail member.

    From there it’s a simple matter of updating the data in the quotes array to reflect the new item. Note, however, that you must update the table with an assignment, otherwise Svelte will not notice the change. In other words, just use Array.push will not trigger the update. (This is similar to other responsive frameworks.)

    API fetching in Svelte

    As a quick extra bonus, let’s see how quickly we can add a remote API fetch to this app. Listing 7 shows how to add an API fetch to App.svelte.

    Listing 7. Using a REST API (App.svelte)




    Listing 7 adds a button that calls the async addRandom a function. This function simply calls the Remote Quote API then updates the quotes table with the new quote. Simple!

    It was a whirlwind tour of some key features of Svelte. There are plenty of other features in the framework, and it’s up to the task of building enterprise interfaces right now.

    Slender is also quick market gains. It is fourth in use after the big three (React, Angular and Vue) but first in the satisfaction of developers and first in the interest.

    Copyright © 2021 IDG Communications, Inc.


    Leave A Reply

    Your email address will not be published.