Wednesday night's JavaScript MN talk had Andy Taton presenting on Svelte.

In near conflict with the description of Svelte I first heard here wherein it was described as a way to use web components agnostic of Angular or React or Vue, Andy showed us how to build an app like that of Angular or React or Vue with Svelte's canned markup and conventions. Why go there? Well again, we are keeping things light. When you loop in react and react-dom for a React app you are already up to a 160K footprint while the Svelte base footprint is 1.5K in contrast. Andy went through a little history of reactivity in JavaScript. We started out traversing the DOM with things like jQuery and we eventually moved to explicitly making stand-out-by-themselves touchable treats of the things we wanted to adjust such as is with the ElementRef/ViewChild trick in modern Angular. Svelte is built from text files and the three deliverables are plain old JavaScript (stuff inside of a script tag at the top of a .svelte file which is really just a text file), CSS (stuff inside of a styles tag below the script tag), and HTML (bottom of the .svelte file below the styles tag's closeout). Modeled on JSX, Svelte has HTMLx for its markup which uses single curly braces around variables. There is a REPL (read-eval-print loop) live coding sandbox play place for experimenting (perhaps here) and Andy live coded for the majority of the talk. Rick Harris is a big name in Svelte. He has some YouTube trainings you can find and Svelte itself is not fronted by a particular company the way Facebook pushes React or Google owns Angular. Hey, Microsoft Word isn't complaining of a misspelling as I type the word svelte. I guess it is a real word. The dictionary.com definition is: slender, especially gracefully slender in figure; lithe ...anyways, there is not yet any TypeScript support in this space, and there is also no sophisticated routing logic for multipage routing. There is an understanding that things should just be kept simple and we will serve up a page not a SPA. Stuff in a src folder compiles into a public folder, etc., Svelte uses Sapper for SSR (server side rendering), and the four command line commands used to get the app up (note a Pokémon theme) and running were:

1. npx degit sveltejs/template jsmn-pokemon
2. cd my-svelte-project
3. npm install
4. npm run dev

 
 

There is a main.js file at the front of the app where you are going to lead into your first .svelte file like so:

import App from './App.svelte';

 
 

If you had an H1 tag like so...

<h1>{name}</h1>

 
 

You could both hydrate and change out the name with something like so:

<script>
   let name = "JSMN";
   function changeTitle() {
      name = "Pokémon";
   }
</script>

 
 

The button for making the switch could start out like this:

<button on:click={changeTitle}>

 
 

Use on:input instead of on:click inside of an input tag to react to typing. You will catch an event at a function with this approach to things and that could look like so:

function chooseFavorite(event) {
   favorite=event.target.value;
}

 
 

The markup for if/else logic looks like this:

1. {#if favorite}
2. {:else if bored}
3. {:else}
4. {#/if}

 
 

on:submit|preventDefault={submit} is yet more crazy I wrote down in my notes (probably shows using a filter not unlike the Angular convention for pipes, eh?) and furthermore <Entry defaultPokemon="Totodile" /> in the markup would be an example of calling out to a component within a component. You will have export let defaultPokemon; inside of the component's JavaScript itself to manage the variable and herein the export keyword is not what you are used to. Svelte is doing its own wacky thing with the export keyword in this context. If you want to share data across two parallel at-the-same-level-in-the-hierarchical-tree components you probably want to use the store the Svelte has. As an example, Andy made pokemon-store.js and put this inside of it:

import {writable} from 'svelte/stores';
const searchForPokemon = writable("");
export default searchForPokemon;

 
 

Alright, that has the export keyword back to doing something sane! The way to put something into the store is with searchForPokemon.set(favorite); and you may fish stuff back out of the store like this:

import searchForPokemon from "../pokemon-store.js";
let pokemonToSearchFor;
searchForPokemon.subscribe(value => {
   pokemonToSearchFor = value;
});

 
 

Brandon Johnson and Brian Mitchell moderated this event while the other half of their team, Anna Baker and Tamara Temple, were away, and before the Andy Taton talk there was a lightning talk by a Daniel Kretsch on AWS Amplify which lets you roll a canned let's-get-started app of Angular, Ionic, React, React Native, or Vue in such a way that external dependencies are fed by trappings of Amazon Web Services a.k.a. AWS. Amazon DynamoDB, a NoSQL database, is the default database. (And, by the way it is very painful to swap out the defaults or get this stuff off of Amazon's platform.) AWS AppSync API, and API architecture is used for... API architecture and there is GraphQL in the mix too. Amazon Cognito governs how users are kept and authentication challenges. Amazon S3, wherein the three Ss stand for Simple Storage Service, hosted at Amazon CloudFront spits up static content. Repositories tied in could be of GitHub, Bitbucket, GitLab, or AWS CodeCommit which is another rival to the other three. Authentication, ChatBot, PhotoPicker, and Album are canned components for Amplify which do what their names suggest.