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.
Rich Harris, Svelte Creator
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
If
<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
thanks :)
svelte
By Gabriel Gasparino Rubia
svelte
Lecture about first steps with Svelte.
- 212