Meeting Svelte.

What is Svelte ?

"Frameworks without the framework"

Rich Harris

It is similar to JavaScript frameworks such as React and Vue

that you write your components using HTML, CSS and JavaScript

and during your build process Svelte compiles them into tiny standalone JavaScript modules.

we can make sure that the browser does as little work as possible.

link tutorial

Rich Harris, Svelte Creator

lecture of svelte

Why don't use Svelte ?

one file for all

no native typescript support, according to the creator

possibility of code getting too big,

because it contains logic, style and tags HTML

no support to Sass/Scss

Svelte is very new and

the current version is 3

Why Svelte?

because learning Svelte is ridiculously easy;

because it is possible to create reactive interfaces

because don`t use new features like JSX, just use web APIs

converts your app into JavaScript at build time

no depedencies, for default

everything is written in native HTML, CSS and JavaScript.

small bundles, accessibility, built-in style encapsulation, declarative transitions

and I don't have to be an engineer to code

how to init ?

Angular

Svelte

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

npx degit sveltejs/template my-app
cd my-app

npm install
npm run dev

Instalando

Angular

Svelte

src/
    app/
    assets/
    environments/
    favicon.ico
    index.html
    main.ts
    ...

public/
src/	
.gitignore	
package.json	
rollup.config.js
...

Estrutura do projeto

Angular

Svelte

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'Hello World';
}

<script>
	let name = 'world';
</script>

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

src/app/app.component.ts

App.svelte

Hello World

<h1>{{text}}</h1>

src/app/app.component.html

Comparative

Angular

Svelte

text = 'Hello World';

<script>
	let text = 'Hello world';
</script>

<h1>{text}!</h1>

src/app/app.component.ts

App.svelte

<h1>{{text}}</h1>

src/app/app.component.html

Data binding

Angular

Svelte

export class AppComponent {
  input: string;
}

<script>
	let input = '';
</script>

<div>
  <label>name:
    <input bind:value={input} placeholder="name"/>
  </label>
</div>

src/app/app.component.ts

App.svelte

<div>
  <label>name:
    <input [(ngModel)]="input" placeholder="name"/>
  </label>
</div>

src/app/app.component.html

Two-way binding

Angular

Svelte

text: string = '';

<script>
	let user = 'Robson';
</script>

{#if user}
    <h1> {user} </h1>
{/if}

src/app/app.component.ts

App.svelte

<div *ngIf="text">

  <h2>{{text | uppercase}} Details</h2>

</div>

src/app/app.component.html

Angular

<li *ngFor="let cat of cats"
  [class.selected]="cat === selectedCat"
  (click)="onSelect(cat)">
  <span class="badge">{{cat.id}}</span> {{cat.name}}
</li>

src/app/app.component.html

For/loop

Svelte

<script>
	let cats = [
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
	{#each cats as { id, name }, i}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
			{i + 1}: {name}
		</a></li>
	{/each}
</ul>

App.svelte

For/loop

Angular

@Input() hero: Hero;

Input prop

src/app/app.component.ts

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

src/app/app.component.html

Svelte

<script>
	export let hero = '';
</script>

<h1>{hero}</h1>

Input prop

Hero.svelte

<script>
        import Hero from 'Hero.svelte';
	let hero = 'Batman';
</script>

<Hero {hero} />
<Hero hero={hero} />

App.svelte

Angular

<button (click)="handle()">
    click me
</button>

Dom Events

app/src/app.component.html

Svelte

<button on:click={handle}>
	click me
</button>

Dom Events

Hero.svelte

Link for Examples

thanks :)