- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
Cateva cuvinte despre Svelte.js, ce este si ce poate face
Ok, hai sa invatam svelte.js
Svelte este un framework modern creat de Rich Harris si este similar cu alte framework-uri precum vue.js si react.js, dar totusi face anumite lucruri putin diferit fata de acestea.
Daca ne uitam la documentatia oficiala vedem ca de fapt este un compilator care transforma codul scris de tine in javascript nativ. Asta inseamna ca, in final, codul care va ajunge pe serverul de productie nu va avea nicio dependinta. De asemenea, spre deosebire de alte framework-uri, nu se bazeaza pe DOM-ul virtual, ci lucreaza cu DOM-ul real, rezultatul fiind un cod foarte bine optimizat.
De asemenea, as zice ca svelte.js are ce-a mai simpla sintaxa dintre toate framework-urile moderne de javascript.
In aceasta serie de articole o sa scriem o simpla aplicatie de todo-uri. Pe langa asta, o sa aruncam o privire si peste SvelteKit care este un framework peste svelte similar cu next.js pentru react sau nuxt.js pentru vue. Pe langa asta, o sa invatam si cum am putea folosi svelte intr-un proiect de laravel.
Astea fiind zise, hai sa incepem.
Am sa instalez svelte folosind linia de comanda, exact cum este explicat pe site-ul oficial:
npm create vite@latest myapp -- --template svelte
Perfect, acum putem intra in folder-ul proiectului si sa rulam
npm install
si evident
npm run dev
Acum putem deschide proiectul in VSCode si va arata asa:
Acum, daca am rulat npm run dev avem si un url pe care il putem accessa din browser si va arata asa:
npm run dev
browser
Acum hai sa ne uitam la folderele si fisierele din proiect.
Putem observa ca aici avem entrypoint-ul aplicatiei, main.js in care importam o componenta App.svelte si creeam o noua instanta a aplicatiei putin mai jos:
const app = new App({
target: document.getElementById('app')
})
Putem observa ca aplicatia se leaga de un element cu id-ul app, iar daca ne uitam in index.html putem observa ca avem un div cu id-ul app:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Svelte</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
Acum, daca ne uitam la App.svelte o sa observam cateva lucruri interesante aici. Daca ati mai folosit Vue.js, mai alex single file components acest fisier trebuie sa para foarte cunoscut.
<script>
import svelteLogo from './assets/svelte.svg'
</script>
<main>
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" class="logo" alt="Vite Logo" />
</a>
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
</a>
</div>
<h1>Vite + Svelte</h1>
<div class="card">
<Counter />
</div>
<p>
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
</p>
<p class="read-the-docs">
Click on the Vite and Svelte logos to learn more
</p>
</main>
<style>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.svelte:hover {
filter: drop-shadow(0 0 2em #ff3e00aa);
}
.read-the-docs {
color: #888;
}
</style>
Se poate observa ca avem fisierul impartit in 3 sectiuni, partea de scripturi unde sta javascriptul, partea de template unde sta HTML-ul si cea de styles unde avem CSS-ul.
Daca folositi VSCode ca mine, va recomand sa va instalati aceasta extensie https://open-vsx.org/extension/svelte/svelte-vscode
Oke, acum ca am discutat despre setup-ul initial si structura de fisiere, hai sa facem o componenta noua numita Counter.svelte in care sa adaugam o sectiune de scripts si una de template asa:
<script>
</script>
<div>
Counter-ul va sta aici
</div>
Acum hai sa ne intoarcem in App.svelte si sa o importam:
<script>
import svelteLogo from './assets/svelte.svg'
import Counter from './Counter.svelte'
</script>
Si pentru a folosi noua componenta trebuie doar sa punem acest tag in template unde vrem sa fie afisat:
<Counter />
Daca vrem am putea sa trimitem si proprietati catre componente, de exemplu counter-ul nostru ar putea accepta un titlul asa:
<Counter title="curs scris pentru invata-programare.ro" />
Iar in fisierul acestei componente (Counter.svelte) putem accepta proprietatea astfel:
<script>
export let title = 'Titlul meu default';
</script>
<div>
<h2>{title}</h2>
Counter-ul va sta aici
</div>
Daca ne uitam in browser o sa vedem urmatorul lucru:
Un lucru foarte interesant legat de reactivitatea acestui framework, nu e nevoie sa scriem prea mult cod, ca in react (de exemplu setState() ) au in alte framework-uri, aici e suficient sa exportam variabila dorita si este in mod nativ reactiva.
Acum hai sa facem counter-ul sa mearga.
Am adaugat partea de template, adica HTML-ul din fisierul de Counter.svelte:
<script>
export let title = 'Titlul meu default';
let count = 0;
</script>
<div>
<h2>{title}</h2>
<div>
<div>Counter {count}</div>
<div>
<button>Decrementare</button>
<button>Incrementare</button>
</div>
</div>
</div>
Acum, pentru a asculta evenimentele am sa folosesc sintaxa de on astfel:
<button on:click={decrement}>Decrementare</button>
<button on:click={increment}>Incrementare</button>
Acum, trebuie sa definim aceste functii, decrement si increment in partea de script-uri:
<script>
export let title = 'Titlul meu default';
let count = 0;
function decrement(){
count--;
}
function increment(){
count++;
}
</script>
Oke, acum, daca nu am scris ceva gresit, ar trebui sa ne uitam in browser si totul sa functioneze.
Acum hai sa ne uitam si la proprietatile reactive, similar cu Computed properties din Vue. De exemplu, poate vrem sa calculam o alta valoare ce depinde de state-ul altei valori o putem face asa:
<script>
export let title = 'Titlul meu default';
let count = 0;
$: double = count * 2;
function decrement(){
count--;
}
function increment(){
count++;
}
</script>
<div>
<h2>{title}</h2>
<div>
<div>Counter {count} Dublu {double}</div>
<div>
<button on:click={decrement}>Decrementare</button>
<button on:click={increment}>Incrementare</button>
</div>
</div>
</div>
Dupa cum se poate observa, sintaxa este $:, iar in interfata am pus si variabila {double}, care sa va actualiza de fiecare data cand count se va actualiza.
De asemenea putem sa ne folosim si de cunoscutele hook-urile de lifecycle, de exemplu putem face diverse actiuni cand componeta este montata.
Pentru a face asta putem apela functia onMount care primeste un callback:
<script>
import { onMount } from "svelte";
export let title = 'Titlul meu default';
let count = 0;
$: double = count * 2;
function decrement(){
count--;
}
function increment(){
count++;
}
onMount(() => {
console.log("componenta a fost montata");
})
</script>
<div>
<h2>{title}</h2>
<div>
<div>Counter {count} Dublu {double}</div>
<div>
<button on:click={decrement}>Decrementare</button>
<button on:click={increment}>Incrementare</button>
</div>
</div>
</div>
Atentie: aceasta functie trebuie importata din svelte.
Acum daca ne uitam in browser observam ca a fost executat si codul din onMount:
Acum hai sa ne uitam la two-way data binding.
Pentru aceasta parte a tutorialului hai sa crea o noua sectiune in zona de template in care sa punem un formular si facem o variabila noua pe care o sa o folosim pentru two-way data binding:
<script>
import { onMount } from "svelte";
export let title = 'Titlul meu default';
let count = 0;
let textulMeu = '';
$: double = count * 2;
function decrement(){
count--;
}
function increment(){
count++;
}
onMount(() => {
console.log("componenta a fost montata");
})
</script>
<div>
<h2>{title}</h2>
<div>
<div>Counter {count} Dublu {double}</div>
<div>
<button on:click={decrement}>Decrementare</button>
<button on:click={increment}>Incrementare</button>
</div>
</div>
<div>
<form action="#">
<input type="text" bind:value={textulMeu}>
<div>{textulMeu}</div>
</form>
</div>
</div>
Dupa cum puteti observa, am folosit bind:value si variabila textulMeu creata mai devreme.
Acum hai sa ne uitam la conditionale. Pentru a demonstra aceasta functionalitate am sa pun un if dupa div-ul cu count-ul:
{#if count > 7}
Whoa, ce numar mare
{/if}
iar acum, acest text va fi afisat doar cand contifia din if este indeplinita, adica count > 7.
De asemenea, putem folosi si else, iar aceasta este sintaxa
{#if count > 7}
Whoa, ce numar mare
{:else}
Nea, numarul asta e prea mic...
{/if}
Oke, hai sa discutam putin si despre bucle si instructiuni repetitive.
Am sa imi definesc un array cu lucruri prin care sa iterez si sa le afisez in browser.
Asta este array-ul meu:
const todos = [
{
id: 1,
title: "Termina de scris cursul de svelte",
isCompleted: false,
},
{
id: 2,
title: "Cumpara bacon",
isCompleted: false,
},
{
id: 3,
title: "Cucereste lumea",
isCompleted: false,
},
];
Acum am sa merg in template si am sa imi defines un div in care sa iterez prin fiecare element din lista de mai sus:
<div>
<h2>Elemente array</h2>
<ul>
{#each todos as todo}
<li>{todo.title}</li>
{/each}
</ul>
</div>
Acum, daca ne uitam in browser ar trebui sa vedem elementele din lista afisate.
Cam atat in aceasta prima lectie, continuam in urmatoarea lectie de svelte.js
Comentarii