Introduction to Svelte

If you are worried about tons of front-end frameworks and their variations out there, why yet another framework?

The frameworks like Angular, ReactJS or VueJS make it easier, faster to spin up applications. More robust and efficient application development within a team.

They changed the way in which we design, develop, and deliver the applications.

More and more frameworks refine the frameworks and make it, even more, easier to develop simple, fast, and efficient applications.

Angular ❤️

Angular is a complete suite but it is bloated.

React 💙

React is a view only library and uses virtual DOM but React gets complicated.

Vue 💚

VueJS is a simple to write and has the best parts of React and Angular.

Svelte 🧡

Svelte is a new approach to build user interfaces. The Svelte has no virtual DOM.

Svelte makes you write less code and uses the platform.

Svelte has no virtual DOM and uses the platform.

Svelte optimizes the application during the build process that increases your application's performance.

Get the app and start running

Enough of (boring) framework introductions, let us start coding.

Where to start?

"Hello World"

npx degit sveltejs/template hello-world
cd hello-world

You have cloned a template from the sveltejs/template. Now install the dependencies and spin the server using

npm i
npm run dev

You should see a simple Hello World application running on localhost:5000.

Let us dive deeper and look at what is generated.

The Svelte components are defined in .svelte files. The generated application has the App.svelte.

The Svelte components are nothing but a simple HTML file. All Svelte components can have the following three segments:

• Script - to define the JavaScript
• Style - to define the CSS
• plain HTML - just your HTML and Svelte elements

If you have worked with any frameworks listed above then you might know what are props.

Props are attributes that you pass it along the Components.

The export let name inside the script tag says that the name is exported from the component and we can send it the information via the attributes.

The props attached to your components will be first exported out of the component.

<script>
        export let name;
</script>
<style>

h1 {

color: purple;

}

</style>

Any variable (including the props) that we defined inside the <script>component can be used in the HTML component with {variable_name}notation. The {} is used to define the value defined in the script tag.

<h1>Hello {name}!</h1>

The application starts in the main.js. We import the App.svelte (where the App component is defined).

import App from ‘./App.svelte’;

Then we create an App object from the imported App component. Then we define target and also pass in props to the component’s constructor.

The target defines where to render the component in the HTML document.

The props is the place where we will define the attributes.

const app = new App({

target: document.body,

props: {

name: ‘world’

}

});

Finally, export the app from the main.js.

export default app;

There is the rollup.config.js which takes care of bundling and building the application.

import App from ‘./App.svelte’;

Want a shorter alternative, fork this codesandbox

Tic Tac Toe

Let us re-create the classic Tic Tac Toe from the react (official) example with Svelte.

Create a components folder, this is where we will define all the Sveltecomponents except the App.svelte.

We will need the following components:

• Square.svelte - Each square in the Tic Tac Toe will be a separate svelte component.
• Board.svelte - The Board component will hold all the square components. This component will be responsible for passing the data to its child square components and also decide whether the game is still on or finished.
• Game.svelte - The Game component is an overall wrapper around the Board component.

Let us first create Game.svelte component. The Game Component will hold the Board component.

<div class=“game”>

<Board />

</div>

Now we will need to import the Board component.

<script>

import Board from ‘./Board.svelte’;

</script>

Let us style the board a little bit.

<style>

.game {

display: flex;

flex-direction: row;

}

</style>

The Board component will have three rows of three squares in each.

<div class=“board-row”>

<Square />

<Square />

<Square />

</div>

<div class=“board-row”>

<Square />

<Square />

<Square />

</div>

<div class=“board-row”>

<Square />

<Square />

<Square />

</div>

We will need to import the Square component in the <script> section.

<script>

import Square from ‘./Square.svelte’;

</script>

Let us style them a little bit.

<style>

.board-row:after {

clear: both;

content: “”;

display: table;

}

</style>

Then we will define the Square component inside the Square.svelte.

<style>

.square {

background: #fff;

border: 1px solid #999;

float: left;

font-size: 24px;

font-weight: bold;

line-height: 34px;

height: 34px;

margin-right: -1px;

margin-top: -1px;

padding: 0;

text-align: center;

width: 34px;

}

.square:focus {

outline: none;

}
.square:focus {

background: #ddd;

}

</style>
<script>

let value = “”;

</script>
<button class=“square”> {value} </button>

We defined value and used that inside the button element.

When we click the button it should change the value into X. We will use the on:click event handler.

<button class=“square” on:click={() => handleClick}> {value} </button>

The event handler in Svelte is defined on:<event>.

Let us define the handleClick inside the <script> tag.

function handleClick() {

value = ‘X’;

}

Now click on the button, you should see the value of button is changed into X.

There is no this, no complex bindings but a simple variable declaration and changing it.

It is not easy to maintain the state in the child component and then propagating it to the parent. Rather we can move the state to the parent and then make the parent decide on how to maintain the child component. To do this, let us change the Board component and send the value and the on:click event handler through the Board component.

Let us consider both the on:click and value is a prop to the Squarecomponent.

<script>

export let value;

export let handleClick;

</script>

<button class=“square” on:click={handleClick}> {value} </button>

Now we will modify the Board component. Instead of defining each Boardwe will define an array squares and use it.

<script>

let squares = Array(9).fill(‘’);

</script>

and change the HTML into

  <div class=“board-row”>

<Square value={squares[0]} handleClick={() => handleClick(0)}/>

<Square value={squares[1]} handleClick={() => handleClick(1)}/>

<Square value={squares[2]} handleClick={() => handleClick(2)}/>

</div>

<div class=“board-row”>

<Square value={squares[3]} handleClick={() => handleClick(3)} />

<Square value={squares[4]} handleClick={() => handleClick(4)} />

<Square value={squares[5]} handleClick={() => handleClick(5)} />

</div>
<div class=“board-row”>

<Square value={squares[6]} handleClick={() => handleClick(6)} />

<Square value={squares[7]} handleClick={() => handleClick(7)} />

<Square value={squares[8]} handleClick={() => handleClick(8)} />

</div>

We will also need to define the handleClick method.

function handleClick(i) {

squares[i] = ‘X’;

}

👏 Congrats that is awesome. Let us build the real game.

The Game is played alternatively, that is one player marks with X and the other with O. Let us add that condition in the Board component.

<!-- Board.svelte -->

let isXTurn = true;

function handleClick(i) {

squares[i] = isXTurn ? ‘X’ : ‘O’;

isXTurn = !isXTurn;

}

Cool, now we have to calculate the winner.

function calculateWinner(squares) {

const lines = [

[0, 1, 2],

[3, 4, 5],

[6, 7, 8],

[0, 3, 6],

[1, 4, 7],

[2, 5, 8],

[0, 4, 8],

[2, 4, 6]

];

for (let i = 0; i < lines.length; i++) {

const [a, b, c] = lines[i];

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {

return squares[a];

}

}

return null;

}

The above function will return X or O if there is a winner or else just returns a null.

We will have to check this every time when the user clicks the square. Also once a player clicks a square we should not allow any other clicks on that square.

function handleClick(i) {

if (calculateWinner(squares) || squares[i] !== ‘’) {

return;

}

squares[i] = isXTurn ? ‘X’ : ‘O’;

isXTurn = !isXTurn;

}

We will need to show the game status for the players. The game status information is dynamic. That is it will change and there should be someone listen to it and change the view once updated.

In React world we will have the state. In Svelte we bind the components with $. The values will be updated.

$: winner = calculateWinner(squares)

$: status =  winner ? "Winner: " + winner :“Next player:” + (xIsNext ? “X” : “O”);

We will use the status inside the HTML.

<div class=“status”> {status} </div>

<style>

.status {

margin-bottom: 10px;

}

</style>

Now the status is re-computed whenever there is a change.

The Svelte components are slim, no extra boilerplates, no this and it is much closer to the platform. In fact, they are nothing but simple HTML.

Thanks For Visiting, Keep Visiting. If you liked this post, share it with all of your programming buddies!

#javascript #web-development

What is GEEK

Buddha Community

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

Svelte can be used anywhere and for anything you’d use Angular, React or Vue for. It’s a JavaScript tool used for building fast web applications, with a big focus on super slick and interactive user interfaces that are not only incredibly easy to build within the Svelte framework, but are also highly code efficient – never a bad thing.

There’s no performance cost associated with the framework’s abstractions, nor is there that initial dip in performance when an app first opens that’s usually attributed to the DOM diffing version update checking process.

Better yet, there is the flexibility to either build the entire app in Svelte, or to add in segments incrementally to an already existing base of code. Components made in Svelte can operate as stand-alone packages that don’t require the overhead of a conventional framework dependency, and can be used anywhere really.

SUBSCRIBE to Kofi Group: https://www.youtube.com/channel/UC1mBXiJnLtiDHMtpga0Ugaw?view_as=subscriber

---

00:00 - Intro
02:49 - What is Svelte
04:22 - What is Svelte used for
06:01 - Svelte pros
09:08 - Svelte cons
11:00 - Who’s using Svelte
*

Website: https://www.kofi-group.com/

Blog article version: https://www.kofi-group.com/5-reasons-why-svelte-is-improving-ui-development/

Remote jobs: https://www.kofi-group.com/search-jobs/

Kofi Group helps startups outcompete FAANG (Facebook, Amazon, Apple, Netflix, Google) and big tech in the highly competitive, war for talent.

Our videos cover hiring tips and strategies for startups, software engineering and machine learning interview preparation, salary negotiation best practices, compensation analysis, computer science basics, artificial intelligence, tips for other recruiters, and much more!

Hit the SUBSCRIBE button and we’ll see you in the comments!

---

Music - Throwaway 2 by XIAO-NIAO
https://www.youtube.com/watch?v=DqeGWcZ0dMg
https://soundcloud.com/bird-xiao/throwaway-2

---

#svelte #javasript #softwareengineering #startup #faang #kofigroup

#svelte #javasript #svelte.js

Introduction to Structured Query Language SQL pdf

SQL stands for Structured Query Language. SQL is a scripting language expected to store, control, and inquiry information put away in social databases. The main manifestation of SQL showed up in 1974, when a gathering in IBM built up the principal model of a social database. The primary business social database was discharged by Relational Software later turning out to be Oracle.

Models for SQL exist. In any case, the SQL that can be utilized on every last one of the major RDBMS today is in various flavors. This is because of two reasons:

1. The SQL order standard is genuinely intricate, and it isn’t handy to actualize the whole standard.

2. Every database seller needs an approach to separate its item from others.

Right now, contrasts are noted where fitting.

#programming books #beginning sql pdf #commands sql #download free sql full book pdf #introduction to sql pdf #introduction to sql ppt #introduction to sql #practical sql pdf #sql commands pdf with examples free download #sql commands #sql free bool download #sql guide #sql language #sql pdf #sql ppt #sql programming language #sql tutorial for beginners #sql tutorial pdf #sql #structured query language pdf #structured query language ppt #structured query language

Getting Started Building a Svelte App with SvelteKit

Svelte is a lightweight framework for building web applications. When you use it, it looks and feels a lot like other frontend frameworks like React and Vue, but leaves the virtual DOM behind. That, along with other optimisations means it does far less work in the browser, optimising user experience and load time.

In this guide, we'll be going over how to setup your first Svelte application using SvelteKit. Svelte has a number of different ways to make applications, and SvelteKit is one of the official packages from Svelte for doing that. If you're interested in other frameworks, you might enjoy a similar guide we have on making your first Vue application.

#Creating your first Svelte Application

To get started, open up a new terminal window and initiate your svelte application using the command below. Note if you don't have npm installed, you'll need to get it. You can install npm by installing Node.JS, via the link here.

Once you have Node.JS and NPM installed, run the command below. Before you do that though, make sure you use cd to move into the folder you want to create your new Svelte application in.

npm init svelte@next my-svelte-app

When you run this command, you'll auto generate a Svelte template in a folder called my-svelte-app. Svelte will guide you through a number of options. Select your preferences. The image below shows the one's I have selected. For the purposes of this guide, I will be using the Skeleton project.

Finally, run the following command to cd into your svelte directory:

cd my-svelte-app

And then install all of your dependencies using the following line:

npm i

#Svelte File Structure

If you are familiar with other frameworks, then Svelte will feel familiar. Here is an overview of the file structure in Svelte, for the project we have just made:

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

Our basic Svelte application is ready to go. If you want to see how it looks, you can serve it on your local computer on the URL http://localhost:3000 by running the following command in your Svelte application folder:

npm run dev

If you visit http://localhost:3000 in your browser, you should see something like this:

#Creating new pages or routes in Svelte

To make a new route in Sveltekit, simply make a new file within the routes folder. For example, if you make a file called about.svelte, then it will show up at http://localhost:3000/about. Another way you can do this is to make a new folder called about, and put index.svelte in that folder, http://localhost:3000/about will work.

#Try it yourself

Create a new page within your /src/routes folder, called about.svelte. Now when you go to http://localhost:3000/, you will be able to access that page. Similarly, you can try making a folder called about with a file placed inside called index.svelte

#How to run your SvelteKit App on Node.JS

To run your Svelte application on a server or locally on a Node.JS server, you need to use an adapter. If you want to run your Svelte application on a Node Server, install @sveltejs/adapter-node@next via the following line:

npm i @sveltejs/adapter-node@next 

Now we have to change our svelte.config.js file. We need to use the new adapter, and change our kit.adapter object within the config file. You can replace the contents of your svelte.config.js with the code below, but we're only changing two lines - our adapter import, and then adding the build directory in your config:

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// We have changed this to point to a build directory
		adapter: adapter({ out: 'build' })
	}
};

export default config;

#Other SvelteKit adapters

If you want to run your Svelte application on Cloudflare, Netlify, or Vercel, then you need to use one of these adapters, you don't need to do anything. These are all included by default in adapter-auto - so only change your svelte.config.js file if you aren't planning on using a Node.JS server.

#How to build your SvelteKit App for Production

Now that we've configured our adapter, let's build our application. In SvelteKit, it's easy to make your app ready to run in a production environment. Simply run the following command, which will create a new folder called .svelte-kit with all your production ready files in.

npm run build

Now, if you want to preview your production build, simply run the following command:

npm run preview

If you are running your application on a Node.JS server and have updated your adapter, as shown in the previous section, then you can run your new Svelte application locally by running the following command in your Svelte directory:

node build/index.js

Now when you navigate to http://localhost:3000/, your Svelte application should show, only this time it will be ready for production.

#Conclusion

In this guide we've looked at how to use SvelteKit to create your first Svelte application with routes. Let's look at what we've learned:

How to set up SvelteKit and create the basic structure of your Svelte application.

How to use routes in SvelteKit, so you can have multiple pages on your application.

How to update your config file to use the right adapter, based on where you want to deploy your application.

How to build and run your application locally on a Node.JS server.

Next, you can try playing around with Svelte to start customizing your application.

Source: https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit

#svelte #sveltekit 

Introduction to Svelte - Svelte Beginners Guide in 2020

Svelte is a component-based JavaScript framework similar to Angular, React or Vue

How do you get started iwth Svelte? In this video I discuss a beginners guide to Svelte and how it works. This tutorial goes over all the basics and more!

#javascript #web-development #svelte