Compiler-based approach (no virtual DOM) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable in Svelte.

Svelte

<script>
  let count = 0;
  $: [1] = count * 2;
</script>

Drag options to blanks, or click blank then click option'

Aresult

Bcount

Cvalue

Ddouble

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same variable name as the original variable.

Forgetting the $: label for reactivity.

The $: label creates a reactive statement. Here, double is the reactive variable that updates when count changes.

2fill in blank

medium

Complete the code to bind the input value to the variable name in Svelte.

Svelte

<input type="text" [1]={name} />

Drag options to blanks, or click blank then click option'

Abind:value

Bvalue

Cbind

DbindValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using just value attribute which is one-way binding.

Using incorrect attribute names like bindValue.

In Svelte, bind:value binds the input's value to the variable name, keeping them in sync.

3fill in blank

hard

Fix the error in the Svelte reactive statement to update total when items changes.

Svelte

<script>
  let items = [1, 2, 3];
  let total = 0;
  $: total = items[1](item => item);
</script>

Drag options to blanks, or click blank then click option'

Amap

Breduce

Cfilter

DforEach

Attempts:

3 left

💡 Hint

Common Mistakes

Using map which returns a new array instead of a single value.

Using forEach which doesn't return a value.

The reduce method sums all items to update total. Using map or others won't produce the sum.

4fill in blank

hard

Fill both blanks to create a Svelte component that conditionally shows a message when loggedIn is true.

Svelte

<script>
  let loggedIn = false;
</script>

{#if [1]
  <p>[2] Welcome back!</p>
{/if}

Drag options to blanks, or click blank then click option'

AloggedIn

BisLoggedIn

Ctrue

DHello

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that doesn't exist like isLoggedIn.

Putting true directly instead of a variable.

The {#if} block checks the loggedIn variable. The message uses Hello as a friendly greeting.

5fill in blank

hard

Fill all three blanks to create a reactive statement that updates filtered with items longer than 3 characters.

Svelte

<script>
  let items = ['cat', 'horse', 'dog', 'elephant'];
  $: filtered = items[1](item => item.length [2] 3);
  let [3] = filtered.length;
</script>

Drag options to blanks, or click blank then click option'

Afilter

B>

Ccount

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of filter.

Using length as a variable name which conflicts with property names.

The filter method selects items longer than 3 characters. count stores how many items passed the filter.

Practice

1. What is the main advantage of Svelte's compiler-based approach compared to frameworks using a virtual DOM?

easy

A. It updates the real DOM directly, improving performance.

B. It uses more memory to store virtual DOM trees.

C. It requires manual DOM manipulation by the developer.

D. It delays updates until the entire page reloads.

Solution

1. Step 1: Understand Svelte's compilation

   Svelte compiles components into JavaScript that updates the real DOM directly without an intermediate virtual DOM.

2. Step 2: Compare with virtual DOM frameworks

   Frameworks like React use a virtual DOM to track changes, which adds overhead. Svelte avoids this, making updates faster and simpler.

3. Final Answer:

   It updates the real DOM directly, improving performance. -> Option A

4. Quick Check:

   Direct DOM updates = A [OK]

Hint: Svelte skips virtual DOM, updates real DOM directly [OK]

Common Mistakes:

• Thinking Svelte uses a virtual DOM like React
• Assuming manual DOM updates are needed
• Believing Svelte delays updates until reload

2. Which of the following is the correct way to declare a reactive variable in Svelte?

easy

A. let count = 0; reactive doubled = count * 2;

B. let count = 0; $: doubled = count * 2;

C. let count = 0; doubled := count * 2;

D. let count = 0; doubled = reactive(count * 2);

Solution

1. Step 1: Recall Svelte reactive syntax

   Svelte uses the $: label to mark reactive statements that update when dependencies change.

2. Step 2: Identify correct syntax

   let count = 0; $: doubled = count * 2; uses $: doubled = count * 2; which is the correct reactive declaration.

3. Final Answer:

   let count = 0; $: doubled = count * 2; -> Option B

4. Quick Check:

   Reactive label is $: = A [OK]

Hint: Use $: before reactive statements in Svelte [OK]

Common Mistakes:

• Using incorrect keywords like 'reactive' or ':='
• Trying to call reactive as a function
• Omitting the $: label for reactive declarations

3. Given this Svelte component code:

let count = 1;
$: doubled = count * 2;

function increment() {
  count += 1;
}

What will be the value of doubled after calling increment() twice?

medium

A. 2

B. 4

C. 6

D. 3

Solution

1. Step 1: Track initial values and increments

   Initial count is 1. Each increment() adds 1, so after two calls, count = 3.

2. Step 2: Calculate reactive variable doubled

   doubled is always count * 2. With count = 3, doubled = 6.

3. Final Answer:

   6 -> Option C

4. Quick Check:

   count 3 x 2 = 6 [OK]

Hint: Multiply updated count by 2 for doubled value [OK]

Common Mistakes:

• Forgetting that doubled updates reactively
• Calculating doubled before increments
• Confusing count value after increments

4. Consider this Svelte code snippet:

let name = "Alice";
$: greeting = `Hello, ${Name}!`;

What is the problem here?

medium

A. The variable Name is undefined due to case sensitivity.

B. The reactive statement syntax is incorrect.

C. Svelte does not support template literals.

D. The variable name should be declared with const.

Solution

1. Step 1: Check variable names and case

   The variable declared is name (lowercase), but the template uses Name (uppercase), which is undefined.

2. Step 2: Understand JavaScript case sensitivity

   JavaScript variables are case sensitive, so Name and name are different.

3. Final Answer:

   The variable Name is undefined due to case sensitivity. -> Option A

4. Quick Check:

   Case mismatch causes undefined variable [OK]

Hint: Check variable name case carefully in templates [OK]

Common Mistakes:

• Assuming template literals are unsupported
• Thinking reactive syntax is wrong
• Believing const is required for reactivity

5. You want to optimize a Svelte app by avoiding unnecessary DOM updates. Which approach best uses Svelte's compiler-based features to achieve this?

hard

A. Disable reactivity and update DOM with setTimeout.

B. Manually manipulate the DOM inside lifecycle hooks.

C. Use a virtual DOM library alongside Svelte.

D. Use reactive statements to update only when dependent variables change.

Solution

1. Step 1: Understand Svelte's reactive updates

   Svelte's compiler tracks dependencies and updates the DOM only when reactive variables change.

2. Step 2: Identify best optimization practice

   Using reactive statements leverages Svelte's compiler to minimize DOM updates efficiently.

3. Step 3: Evaluate other options

   Manual DOM manipulation or disabling reactivity defeats Svelte's benefits; using a virtual DOM library adds unnecessary overhead.

4. Final Answer:

   Use reactive statements to update only when dependent variables change. -> Option D

5. Quick Check:

   Reactive statements optimize updates [OK]

Hint: Leverage reactive statements for efficient updates [OK]

Common Mistakes:

• Trying manual DOM changes instead of reactive updates
• Disabling reactivity thinking it improves speed
• Mixing virtual DOM with Svelte unnecessarily