Basic Form implementation using Svelte- Cybernetically enhanced web apps
Hi Guys , in this Blog I will discuss about Svelte , Actually when I start working with Svelte , It really surprises me , So I want to share with you what are the super awesome features of Svelte, and my first experience to work with Svelte. So first we will go through some basic concepts of Svelte and toward the end of our discussion we will create a small application , where we can add players using forms and also can delete those players from the list. So let’s get started:
What is Svelte ?
Svelte is a compiler for creating reactive web applications and interfaces, can be used for small parts of a site, or entirely like for Single Page Application (SPA). Svelte is used to create reactive application, by reactive we want to say if we have data or state in our webapps , that can be shown in browser then we want to react to the changes in data and state by reflecting change in browser instantly. Svelte helps us to create the reactive webapps. Svelte is actually a compiler, it’s not a framework . Svelte compile our code for production on build time, in a single Vanilla JavaScript bundle, and that’s the only thing we deploy with our website , to control the website we do not deploys the whole library like React, Vue. We just deploy the single JS file, which result very speedy and first website. Vue or React also ship either Vue or React library with the bundle. But Svelte only ship the JS bundle not Svelte library, it perform those in the compiled state, so it results smaller bundle.
Setting Up Svelte App
To setup Svelte App we have to first create a empty folder , open the folder with Visual Studio. Then open a new terminal, run the following command:
npm run install -g degit
degit is a npm package which help us to clone , latest repo of Svelte version with some extra features. Then run:
degit sveltejs/template .<project name>
sveltejs/template is the official git repo of Svelte JS.
Now we are all set with the boilerplate of Svelte JS. Now we will start building our application, first we will have a look into the Folder Structure:
So this is the folder structure of Boilerplate of Svelte .It’s almost similar to React or Vue codebase, src contains the svelte component , App.svelte is the root component. rollup.config.js is the webapp file , it configs our code composition and structure , it bundles our output file as well .public , is having the final production code we are going to deploy. To preview our application we can run :
npm run dev
let’s see the main.js file:
main.js is the root file of our application, there we are importing App.svelte , we are creating an object of App.svelte , and inside body we are injecting whole dom of our application, and lastly we are passing name as a props to our root component. main.js is the root js file where we are actually injected our root component App.svelte. Now let’s see the App.svelte file:
In Svelte , we will use the basic html, css and javascript, So our code will be having three parts those are script, main and style. Inside script tag , we are imported Modal from ‘./Modal.svelte’ and AddPersonForm from ‘./AddPersonForm.svelte’, we have set showModal to false. toggleModal is the function which is called to open the modal which contains the form , which needs to be filled to add player to the player list. people is the array which will contain the player list. handleClick is the function which are used to delete player from player list. addPerson is used to add player to the player list. We will go through all the function one by one later .Now there are Modal which opens when we click on Add player button to add player, AddPersonForm is the form used to add player.<main> contains the main content of our homepage. First we will be having Button on click of it , it calls toggleModal function, on this function we are toggling the value of showModal to show or hide the modal. You can see the on:click these are svelte syntax .To iterate through people array we will using loop , In svelte we used to write loop in this way:
{#each people as person (person.id)}
<div>Content</div>
{/each}
so we are using name,age and level ,we are checking if level is Master , we are adding MASTER PLAYER title to that player. There is delete button for each player card, on click of delete button we are calling handleClick function having parameter event and player id , So in handleClick function we are filtering out that player by checking if person.id !=id(selected player id).If there are no player in people array , then it will go to the else part:
{:else}
<p>There are no player to show…</p>
and lastly the style part contains the styles of the App.svelte page. There are actually two ways of adding styles , one is globally by adding styles in the global.css and another is the component specific styles, svelte does this by creating unique class for the element we style in each component.it used to do it when it used to compile all of the code on it and bundles all of the component style in a single bundle file, (bundle.css inside build folder) , it has a unique id, so that it does not mix together . Now we will see the index.html:
So inside build folder we can see the index.html . it’s actually combines all the bundle files created at compile time , when we run :
npm run dev
we are using global.css file for global styling and bundle.css is containing all the component specific styles , bundle.js contains all the javascript function. Now we will see the global.css file:
global.css is self explanatory , it’s containing all the global styles of our application. Now we will look into the Modal component:
Modal.svelte is the modal component , here we are using two features of svelte , those are Event forwarding and Event Modifier. So if we go back to the App.svelte , we are using Modal component and there we are passing showModal and toggleModal function as props.
export let showModal = false;
This is the way by which we determine that showModal is the props of the this component, we add export before the declaration of the showModal variable , and false is the default value of showModal ,means if no props is passed through the component , it will take false as the default value of showModal. Now we can see in the div having class name backdrop is having an on click function which is empty. In Svelte if we keep a function empty , it will search for that function in parent component. The parent component of Modal is App, So in App component we can see that on Modal component we are passing toggleModal function on the on:click. So it will execute that toggleModal function . This feature is called Event Forwarding in Svelte. Again we can see that same function is having a self text added with it in Modal.svelte. This self actually means that onclick function should trigger only when the actual div is clicked , not it’s child. So that if we click outside the modal div it will not trigger the function hence the modal will not close . This feature is called Event Modifier. There are few more values which we can added , we can check the official documentation of svelte for more details. Now inside div having classname=modal1 we are using slot feature of Svelte, means the div which are wrapped by Modal component will automatically render inside this <slot></slot> tag . So our Modal component is wrapping AddPersonForm component, so the form component will automatically get rendered inside the Modal component. Now let’s see the AddPersonForm component:
In AddPersonForm.svelte ,we are creating the form to add a new player. Here we are importing createEventDispatcher , whenever we want to emit a custom event with some data from component to be handled in the parent component we use createEventDispatcher . So we are creating form on:submit we are adding preventDefault event modifier and we are calling handleSubmit function , on the handleSubmit function we are creating an person object having all the details entered like name, level, age, skill and id. Inside form component we are creating some fields like text field for name number field for age where we are doing two way data binding by :
<input type=”text” placeholder=’name’ bind: value={name}>
Two way data binding means whatever user types in the input field the value will get automatically updated ,we don’t have to write any javascript logic for that, similarly we have created number field, and checkbox fields for skills, in case of checkbox we have used group bind approach, means whatever we add any field as checked , those values will be automatically pushed to the skills array. For Level we have used select box, having options like Master, Pro, Moderate and Beginner, And lastly the button Add Player, on clicking the button we are calling handleSubmit function there we are creating an object using the input fields values, which will be passed as a payload to dispatch function named addPerson. This addPerson function will actually update the value of our state people which is defined in our App component. So If we go back to our App.svelte component we can see that AddPersonForm component is having the dispatch function (on: addPerson) ,there we are calling a function addPerson .We can access the value of the payload through event.details, So we are creating a separate object using the input details or payload value and pushing the object inside the people array , and setting the showModal to false, So that the Modal closes and new player got added to the player list. Now our application is ready let’s see the output:
So , we can see how easily we can create our production friendly application using svelte , because the bundle size will be very less. But we should also keep in mind svelte does not give us such a wide range of features like React and Vue. But we can use Svelte for building simple application. This is just a introductory article on Svelte. I want you to deep drive into the concept of Svelte, play around with it and explore new features . I am adding my github link of the entire codebase and official documentation of Svelte as a reference:
1>Svelte Official Documentation:
2>Code :
HAPPY CODING….:)
