Svelte Interview Questions & Answers

Give us :star:if you like the project. If you have any propositions - pull Requests are highly appreciated!

Table of Contents

1. What is Svelte.js

   Svelte is a free and open-source front end compiler. It is used to solve the same problems for which React or Vue are used, but Svelte.js facilitates users to build applications in a declarative, component-driven way rather than to create an imperative DOM manipulation.

   ⬆ Back to Top

2. What is the difference between Svelte and the most popular frameworks like Vue or React

   Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

   Traditional frameworks like ReactJS and VueJS do the bulk of their work in the browser i.e on the run time while Svelte shifts that work into build step i.e during compile time. So, instead of updating the DOM using Virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

   Using other frameworks, after being built there is still a framework. Svelte compiles code to pure, ideal JavaScript. That’s why it calls itself the “disappearing framework” – by the time the app’s code appears in the browser, there is really no framework anymore.

   ⬆ Back to Top

3. Does Svelte support SSR and mobile app development

   Yes. Svelte has SvelteKit, similar to Next.js of React and Nuxt.js of Vue for SSR. SSR can speed up the first render of your app and improve its SEO. For mobile app development, there’s Svelte-Native. It works on top of NativeScript.

   ⬆ Back to Top

4. What is Svelte used for

   1. Highly reactivity apps
   2. Fast performance, small bundle
   3. Low-energy app

   ⬆ Back to Top

5. What is Reactivity in app development in Svelte

   Reactivity is a term that describes a behavior when input change is automatically and immediately reflected in the Document Object Model (DOM). For example, when an app is reactive, it means that any change of values (the result of user input) will be automatically reflected in the DOM.

   ⬆ Back to Top

6. What are the main advantages of Svelte compared to other front-end frameworks

   1. facilitates developers to write less code. It mainly aims to build boilerplate-free components using the already known languages such as HTML, CSS, and JavaScript
   2. truly reactive and brings reactivity to JavaScript itself. It does not require more complex state management libraries
   3. does not require virtual DOM. It compiles the code to tiny, framework-less vanilla JS. That's why the Svelte.js app starts fast, loads fast, and stays fast
   4. comparatively better than its competitors (like React, Vue or Angular) because it provides less code, less boilerplate, smaller bundles, more speed, and better performance

   ⬆ Back to Top

7. What is Data binding

   Svelte data flow is top-down. Sometimes it is helpful to break this rule and provide two ways of data binding. Great example of such a need is the input element. Basically there we need to listen to on:input, read the event.target.value and manually set value. But with svelte we can avoid such boilerplate:

   <input bind:value={color} />
   

   ⬆ Back to Top

8. What are DOM events

   DOM events are basically just known events from Document Object Model, such as click, change etc. You can listen to any event on an element with the on: directive:

   <div on:click="{handleClick}">Element</div>
   

   ⬆ Back to Top

9. What are Event Modifiers

   Event modifiers allows us to modify base event behavior:

   1. self - only fires the event if the clicked element is the target
   2. preventDefault - prevent the default action (run e.preventDefault())
   3. stopPropagation - prevent the event reaching the next element (run e.stopPropagation())
   4. once - make sure the event can fire only once (removes handler)
   5. capture - fires the handler during the capture phase instead of the bubbling phase
   6. trusted - only trigger handler if event.isTrusted is true. I.e. if the event is triggered by a user action
   7. passive - *improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
   8. nonpassive - explicitly set passive: false

   Example:

   <button on:click|once="{toggleModal}" />
   
   <!-- You can chain modifiers like this: -->
   <button on:click|self|once="{handleClick}" />
   

   ⬆ Back to Top

10. What are Components events

    Components can also dispatch events. To do so, they must create an event dispatcher.

    import { createEventDispatcher } from "svelte";
    
    const dispatch = createEventDispatcher();
    
    function sayHello() {
      dispatch("message", {
        text: "Hello!",
      });
    }
    

    And thanks to that we can listen in parent component for such custom event:

    <Child on:message="{handleMessage}" />
    

    ⬆ Back to Top

11. What is Event Forwarding

    If you want to listen to an event on some deeply nested component, the intermediate components must forward the event.

    <Inner on:message />
    

    Such on:message directive will forward all message events.

    ⬆ Back to Top

12. What is class directive

    Class directive allows us to specify with a JavaScript, what classes should be attached to HTML element:

    <button class={selected  === 'foo' ? 'selected' : ''}>foo</button>
    

    That means: if selected is equal to foo add selected class to button element.

    Or in other way when selected is true:

    <button class:selected>foo</button>
    

    ⬆ Back to Top

13. Does svelte have a global store

    Yup. Svelte has its own replacement for common solutions like Redux or Ngrx. It’s just called writable stores.

    A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.

    We have two kinds of stores:

    1. writable - we can read and modify data
    2. readable - we can only read data
    3. derived - create a store whose value is based on the value of one or more other stores. Store will update themselves automatically, when based stores will change

    Example of writable store:

    const name = writable("world");
    

    Example of derived store:

    export const name = writable("world");
    
    export const greeting = derived(name, ($name) => `Hello ${$name}!`);
    

    ⬆ Back to Top

14. What is store binding

    If a store is writable, we can bind it’s value, just as you can bind to local component state.

    Example:

    const name = writable('world');
    
    <input bind:value={$name}>
    

    ⬆ Back to Top

15. What is Context API

    Provides a mechanism for components to talk to each other without passing around data (avoid props drilling) and functions as props, or dispatching lots of events.

    Creation of context:

    import { key } from "./mapbox.js";
    
    setContext(key, {
      getValue: () => value,
    });
    

    Usage of context:

    const { getMap } = getContext(key);
    

    The key of context id should be Symbol:

    const key = Symbol();
    

    or any other unique value.

    ⬆ Back to Top

16. Contexts vs stores

    They differ in that stores are available to any part of an app (global state), while a context is only available to a component and its descendants. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.

    ⬆ Back to Top

17. Explain what are slots

    Slot is a place where we can put children through props. Like we have something like this:

    <div>
      <p>I'm a child of the div</p>
    </div>
    

    But, if we want to pass children to our component:

    <!-- Box component -->
    <div class="box">
      <slot></slot>
    </div>
    

    And from the usage side:

    <Box>
      <h2>Header</h2>
      <p>Paragraph</p>
    </Box>
    

    ⬆ Back to Top

18. What are named slots

    In case when we want to pass a few slots, we can name them. Name works like an identifier and thanks to them Svelte knows where to put a specific slot.

    Example:

    <!-- Box component -->
    <div class="box">
      <slot name="”first”"> </slot>
      <slot name="”last”"> </slot>
    </div>
    
    <!-- Usage of Box component -->
    <Box>
      <span slot="first"> Rafał </span>
    
      <span slot="last"> Kostecki </span>
    </Box>
    

    ⬆ Back to Top

19. What are slot props

    Just like casual components, slots can also have props. For instance we can pass a boolean.

    Example:

    <!-- Hoverable component -->
    <div on:mouseenter="{enter}" on:mouseleave="{leave}">
      <slot hovering="{hovering}"></slot>
    </div>
    
    <!-- Usage of Hoverable component -->
    <Hoverable let:hovering="{hovering}">
      <div class:active="{hovering}">
        {#if hovering}
        <p>I am being hovered upon.</p>
        {:else}
        <p>Hover over me!</p>
        {/if}
      </div>
    </Hoverable>
    

    ⬆ Back to Top