Svelte

Categorii: Programare

22-Jun-2020 18:33 - 100 vizionari

In minunata lume JS am gasit Svelte, un mediu de dezvoltare aplicatii Internet care chiar se lupta cu greii: Vue.js, Angular, React, AngularDart, …

De doua saptamani studiez Svelte: mai intai copy/paste cateva exemple din tutorial sau teste online cu REPL, apoi o solutie cu websockets, ca o continuare la modulul LiveView, teste Svelte Material UI, teste SMELTE, aplicatii de editare formuri si liste definite in JSON, …

Svelte este rapid (compileaza si redeseneaza aplicatia in mai putin de o secunda), codul rezultat ocupa putin spatiu (in proiectul meu 344 kb cod js compilat (190 kb fara fisierul map) in timpul dezvoltarii si 176 kb cod optimizat la final (64 kb fara fisierul map)) si usor de invatat.

Ca orice mediu de dezvoltare din lumea JS si Node.js, si Svelte vine cu utilitarul sau de construire aplicatii plecand de la un sablon:


# npx este un utilitar node.js
# mai intai trebuie instalat degit
npm install -g degit

# apoi se creaza un proiect svelte bazat pe rollup
npx degit sveltejs/template nume-aplicatie-svelte

# sau un proiect bazat pe webpack
npx degit sveltejs/template-webpack nume-aplicatie-svelte

Dupa ce a fost creata aplicatia dintr-un sablon, dezvoltarea continua cu


# instalare pachete necesare aplicatiei
npm install

# pornire modul de dezvoltare
# in acest mod se compileaza proiectul in mod neoptimizat
# si svelte asteapta ca un fisier din proiect sa se modifice
# si la orice modificare proiectul este recompilat automat (modul watch)
npm run dev

# compilare optimizata si executata o singura data
npm run build

Este plin Internetul de exemple banale in Svelte, dar iata o solutie de meniu definit in pagina de pornire ne mai vazuta si ne mai auzita pana acum, mi-a luat 2-3 ore sa imaginez aplicatia bazata pe svelte-tabs si sunt impresionat ca se poate atat de elegant:


<script>
  import { Tabs, Tab, TabList, TabPanel } from "svelte-tabs";
  import { count1, count2, count3 } from "./store.js";
  import Contor from "./Contor.svelte";
  import Test1 from "./Test1.svelte";
  import Test2 from "./Test2.svelte";
  import qrcode from "./QRCode.svelte";
  import tf1 from "./TestForm1.svelte";
  import tf2 from "./TestForm2.svelte";

  const menu = [
    { title: "Form 1", ob: tf1 },
    { title: "Form 2", ob: tf2 },
    { title: "QR", ob: qrcode, opts: { title: "Server URL", msg: "" } },
    { title: "cnt 1", ob: Contor, bindvar: $count1, opts: { cls: "btn1" } },
    { title: "cnt 2", ob: Contor, bindvar: $count2, opts: { cls: "btn2" } },
    { title: "cnt 3", ob: Contor, bindvar: $count3, opts: { cls: "btn3" } },
    { title: "Achiz 1", ob: Test1, opts: { title: "Ach 1", interval: 1000 } },
    { title: "Achiz 2", ob: Test1, opts: { title: "Ach 2", interval: 500 } },
    { title: "Achiz 3", ob: Test1, opts: { title: "Ach 3", interval: 100 } },
    { title: "Test 3", ob: Test2, opts: {} }
  ];
</script>

<style>
  :global(.svelte-tabs li.svelte-tabs__tab) {
    color: #110101;
    font-size: 1.5em;
    font-weight: 600;
  }

  :global(.svelte-tabs li.svelte-tabs__tab:hover) {
    border-color: #dee2e6 #dee2e6 #e9300f;
    color: #ff0000;
    background-color: #f3e9e9;
  }

  :global(.svelte-tabs li.svelte-tabs__selected) {
    border-color: #dee2e6 #dee2e6 #2b0fc9;
    color: #3f0eaf;
    background-color: #f0f0f0;
  }

  :global(.svelte-tabs div.svelte-tabs__tab-panel) {
    color: #2b0644;
  }
</style>

<Tabs>
  <TabList>
    {#each menu as item}
      <Tab>{item.title}</Tab>
    {/each}
  </TabList>

  {#each menu as item}
    <TabPanel>
      <svelte:component
        this={item.ob}
        bind:count={item.bindvar}
        {...item.opts} />
    </TabPanel>
  {/each}
</Tabs>

Mai intai se importa componentele Svelte in sectiunea <script> … </script>, apoi se defineste meniul ca o lista de obiecte JS si fiecare obiect are proprietati (title, ob, opts, bindvar), urmeaza sectiunea de stiluri, <style> … </style>, unde sunt redefinite stilurile meniului de navigare (nu era necesara, dar mi-a placut mie sa schimb un pic stilul meniului), apoi urmeza sectiunea de html, unde Svelte genereaza meniul conform listei.



Ultimele pagini: RSS

Alte adrese de Internet

Categorii

Istoric


Atentie: Continutul acestui server reprezinta ideile mele si acestea pot fi gresite.