text: As 2021 nears the halfway mark, the golden age of JavaScript continues. One of the most exciting characters in the current chapter is the Svelte framework. This article gives you the basics for creating a Svelte project and using some simple UI elements.
  In a distinctive departure from the current groupthink represented by React, Angular, and Vue, Svelte works on the server side to compile your application into optimized JavaScript. That means that Svelte requires a build pipeline setup.
  Although setting up a build pipeline might seem like extra work, the truth is that all real development in React, Angular, or Vue requires a build pipeline in some form anyway (like create-react-app or Webpack configuration). Plus setting up the Svelte environment quickly gets you things like hot-deploy dev mode.
  Svelte setup
  Let’s jump right in and set up a simple build environment. You are going to use npx and degit for the purposes of creating a starter template. Use the steps in Listing 1.
  Listing 1. Initial template
  npx degit sveltejs/template infoworld-svelte
  cd infoworld-svelte
  npm install
  npm run dev
  At this point the starter app will be running at localhost:5000; check it out in your browser. Open the /infoworld-svelte folder in your code editor or IDE. There are two source files of interest in the /src directory: App.svelte and main.js. These two work together to define what you see in the browser.
  Note: All of the code is avaiable in this repo.
  If you use 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” into the search bar.
  main.js is the main entry point for the app. It imports
  App.svelte in the first line as seen in Listing 2.
  Listing 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: The export from
  App.svelte has been transformed into an object, which is instantiated with the
  new App({...}) call.
  The
  App object is configured with a couple of parameters. These are used to supply the values for the Svelte object’s params. The
  target param is a built-in property that Svelte uses to tell where the root of the app is (similar to the second argument of
  ReactDOM.render).
  Now look at
  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 together, along with the parameters provided by the instantiation in main.js, into a component. Note that the
  main tag could be any valid HTML tag.
  Notice that Svelte uses variable tokens in the same syntax as the other frameworks:
  <h1>Hello {name}!</h1>. Notice also that this variable, whose value is supplied by the params in main.js, is exported in the script section:
  export let name;. This could also be done directly in the script. To see what I mean, change this line to
  let name = "InfoWorld";, eliminating the export entirely. The point being, there is nothing magical or required about parameterizing the
  App object via main.js. It is just a supported feature for organizing things.
  Since you are running in dev mode, the change will be reflected immediately. The browser will now show the new greeting, “Hello InfoWorld!”
  The are many features necessary to building sophisticated UIs. Among the most essential are iterators and object handling. Let’s have a look by adding the code seen in Listing 3.
  Listing 3. Iterating over an array of objects
  <script>
  let quotes = [
  {author:"Emerson", quote:"To be great is to be misunderstood."},
  {author:"James", quote:"The art of being wise is the art of knowing what to overlook."},
  {author:"Thoreau", quote:"That government is best which governs least."}
  ];
  </script>
  <main>
  <ul>
  {#each quotes as { quote, author }, i}
  <li>{i} - {quote}</li>
  {/each}
  </ul>
  </main>
  The basic syntax is the
  {#each} tag. This is used to reference the variable
  quotes. The elements of this array variable are then exposed (via destructuring) to the internals of the tag, along with an iterator counter
  i. These exposed variables are then referenced with the same token syntax as any other variable. If you are familiar with another framework, I think you’ll agree the syntax is very concise here.
  Event handling in Svelte
  Adding handlers like
  onClick is similarly easy. You can add one to the list items as seen in Listing 4.
  Listing 4. Adding an onClick handler
  <script>
  ...
  function click(){ alert("ok"); }
  ...
  </script>
  <main>
  ...
  <li on:{i} - {quote}</li>
  ...
  </main>
  The event handling syntax is fairly self-explanatory. You can also pass in params to the handler by wrapping the handler function, like so:
  <li on:{i} - {quote}</li>)
  <script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher(); // create dispatcher
  let author = "";
  let quote = "";
  function onAdd(author, quote){
  dispatch('quote', { // use dispatcher
  author: author, quote: quote
  });
  }
  </script>
  <main>
  <div class="add-quote">
  <h2>New Quote</h2>
  <div>Author: <input bind:value={author}</div>
  <div>Quote: <input bind:value={quote}</div>
  <button on:click={()=>{onAdd(author, quote)}}>Add It!</button>
  </div>
  </main>
  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, then use it to create a dispatcher function. This dispatcher function is called and passed element of Listing 5. Notice the
  bind:value attributes on the input elements. These reference the variables to which the input will be bound—in this case, the author and quote variables.
  You then use a button element with an
  onClick handler to raise the dispatch event in the
  onAdd 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
  <script>
  ...
  function onAddQuote(event){
  quotes = [...quotes, {author:event.detail.author, quote:event.detail.quote}];
  }
  </script>
  ...
  <main>
  ...
  <AddQuote on:quote={onAddQuote}></AddQuote>
  ...
  </main>
  Listing 6 shows how, in the markup, you use
  on:quote to listen for the custom quote event and send it to the handler function,
  onAddQuote, which is defined in the script section. This function is handed the event, which contains the event object we sent in
  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 though that you must update the array with an assignment, or Svelte won’t notice the change. In other words, just using
  Array.push won’t trigger the update. (This is similar to other reactive)
  <script>
  ...
  async function addRandom(){
  const res = await fetch("");
  const json = await res.json();
  quotes = [...quotes, {author:json.author, quote:json.content}];
  }
  </script>
  ...
  <main>
  ...
  <button on:click={addRandom}>Add Random Quote</button>
  ...
  </main>
  Listing 7 adds a button that calls the async
  addRandom function. This function simply calls the remote quote API and then updates the quotes array with the new quote. Simple!
  This has been a whirlwind tour of some key features of Svelte. There are many more capabilities in the framework, and it is up to the task of building enterprise interfaces right now.
  Svelte is also making fast gains in the marketplace. It is fourth in usage after the big three (React, Angular, and Vue) but first in developer satisfaction and first in interest.