DEV Community: CorvusEtiam

MVC Calculator in "almost" Vanilla JS

CorvusEtiam — Tue, 13 Aug 2019 15:53:03 +0000

For whom is it?

Javascript ★★★☆☆
Typescript ☆☆☆☆☆
HTML ★☆☆☆☆
CSS ★☆☆☆☆

A little bit of Typescript Love

First things first, I should explain myself what I mean by "almost" Vanilla JS.
I mean Typescript, one of rare good things in webdev.

But, but... that's not Vanilla JS!?

It is close enough. Don't worry, I am not going to use some type level magic to implement TicTacToe in pure types, I am not insane enough nor that smart. If you are looking for people who love to write angry Lisp, which looks like this:
Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key'

Loads of angry pointy brackets. Nope, no such stuff. Only semi-complex thing we will use are enums and type annotations. Both are pretty readable, and quite easy to understand.

If you never saw enum in your life, that is how you would make in Vanilla JS

const Color = Object.freeze({
   RED : 0,
   GREEN : 1,
   BLUE : 2
});

With some Object.freeze added on top. They make it much easier for us to understand, what exact values you want to pass. Strings are passe. Seriously, strings are slow and hard to search. Use enums Luke!.

Type annotation looks like this:

function sum(a: number, b: number) : number { return a + b; }

What's the point? The point is, if you for example pass string into this function, typescript compiler will be angry at you and if you want to change anything in you code it will scream at you at every error.

I don't know about you, but I prefer if compiler scream at me if I mess up, because otherwise this mess can very well end-up in my or yours browser.

Everyone makes mistakes... and autocompletition in VS Code is so good.

Typescript Love -- OFF

Now, we will need to setup everything... Gosh.
Ok, I am just kidding. Just click on this Big button on top of this blog post. It will open codesandbox.io editor for you, which is pretty cool.
It supports most of the stuff from Vs Code (they share editor widget), works plenty fast and it will make whole setup a breeze.
If for some reason, you don't wont to use this service and prefer to have everything on your own machine.

(Psst, what are you? Some cave-dweller? In age when we overshare every single tidbit about our live in Social Media, an place all our data in the cloud.
). Don't worry. I am with you!

You can archive exactly the same thing with those commands.

npm init
npm install parcel-builder typescript
tsc --init
parcel ./.html

After downloading half of the internet, which tend to happen each time you use you NPM, open localhost: in your browser. For me it is localhost:1234

Now open your html file. It is most likely empty.
Because it is not HTML+CSS tutorial just copy this.

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <style>
      .grid {
        display: grid;
        width: 300px;
        height: 300px;
        grid-template-rows: 90px 90px 90px 90px;
        grid-template-columns: 90px 90px 90px;
      }
    </style>
    <div id="app">
      <label for="calcValue">Value: </label>
      <input type="text" id="calcValue" />
      <button class="op" data-op="eq">=</button>
      <p>
        Current operator:
        <span id="currOp"></span>
      </p>
      <div class="grid">
        <button class="num">0</button>
        <button class="num">1</button>
        <button class="num">2</button>
        <button class="num">3</button>
        <button class="num">4</button>
        <button class="num">5</button>
        <button class="num">6</button>
        <button class="num">7</button>
        <button class="num">8</button>
        <button class="op" data-op="plus">+</button>
        <button class="num">9</button>
        <button class="op" data-op="minus">-</button>
      </div>
    </div>

    <script src="src/index.ts"></script>
  </body>
</html>

But I don't know about...!

There are few things, which I have to explain. Ok, happy?

Everything CSS and display:grid -- just go to CSSTricks Complete Guide to CSS Grid
data-op attribute -- those are user-defined attribute. There is pretty cool guide about them on MDN. You can access them in your JS with html_element.dataset.op, they can hold some state and data for your app.
src/index.ts that is Parcel for you. It will automatically detect and generate resources for you. It is super cool and plenty fast. Much easier to use then webpack.

And I use classes for non-stylistic purpose. If you want to make it fully-Kosher, just change those num and op classes into respective data-attributes.

Time to start, for real!

Now time for some JS. But first, let me talk about design first.

It is not pretty, but it explains what I am planning to do.
First there is Calculator, which is our entry point.

It loads out application. It is responsible for creation of our controller.
This is master class, which should contain all the logic.

CalculatorView is responsible for setting up all event handlers, styling and possible all operation with DOM.

CalculatorState should be as plain and simple as possible. It makes sense to put there stuff responsible for fetching data, storing stuff into local storage.
I mean, general state management. It shouldn't have too much logic. Simple is better!

Why not just put it into one class? That kind of design makes it easier to untie you code later on and extend it. It is also easier to read. Minus is, it is longer and less procedural...

CalculatorApp

Let me start from easiest part.


enum Op {
    Eq = 'eq',
    Minus = 'minus',
    Plus = 'plus'
};

function calculator_app() {
    //// setup view
    //// setup state
    ///  setup controller
}

calculator_app();

That's all. Rest will take place inside classes.
Additionally I added enum, which will represent all buttons, which are not digits. Currently we support only 3 operations.

Now enter the View

CalculatorView

I will use classes. They are mostly the same to ES6 ones. You may change it into old school function and bunch of prototypes. It will be exactly the same. We wont use any fancy features here.

class CalculatorView {

Now, one of the TS-things. We need to declare types for our member variables.
Those should be pretty self-explanatory.
Before : you have name, after the type of your variable. Most of them, as you may already guessed are types of different DOM elements. It is pretty useful, because later on we will see cool autocompletition for those.

The only unknown over here is the CalcController. This is not yet defined, but if you remember out little diagram, that is a place, where everything will happen.

  root: Element;
  controller?: CalcController;
  input: HTMLInputElement;
  current_op: HTMLParagraphElement;

  constructor(root: Element) {
    this.root = root;
    this.input = this.root.querySelector("input#calcValue") as HTMLInputElement;
    this.current_op = this.root.querySelector(
      "#currOp"
    ) as HTMLParagraphElement;
  }

  init() {
    this.root.addEventListener("click", ev => this.click(ev));
  }

Some initialization. Nothing super important. Only thing, that may look weird to you is that, I setup only one event handler for my whole CalcApp.
You could do the same setting up handler for each button. Frankly, I found it harder to read.
Here I rely on something not always fully understood and probably worth post by itself -- Event Bubbling up frow low level DOM Elements to they parents and so on.

  click(ev: Event) {
    const target = ev.target as HTMLElement;
    if (target.classList.contains("num")) {
      this.controller.handle_digit(target.innerText);
    } else if (target.classList.contains("op")) {
      const op : Op = target.dataset.op;
      switch (op) {
        case Op.Minus:
        case Op.Plus:
          this.controller.handle_bin_op(op);
          break;
        case Op.Eq:
          this.controller.handle_eq();
          break;
      }
    }
  }

  set_current_op(op?: Op) {
    if ( op !== undefined ) {
       this.view.current_op.innerText = op.toString();
    }
  }

  set_input(inp: string) {
    this.view.input.value = state.input;
  }
}

And our event handler. Nothing to complex. I used as operator to change (cast) types from default EventTarget to HTMLElement.
All the real work happens within Controller.

CalculatorState

Now, time for another simple component. Just with a little twist this time.

type State = {
  op?: Op;
  values: number[];
  input: string;
};

First we will define new typed object litteral. The little ? sign tells you, that value may be undefined.
Why do we need it? It will be more obvious in the moment. Trust me.

class CalcState {
  controller?: CalcController;
  state: State;

  constructor() {
    this.state = {
      values: [],
      input: ""
    };
  }

  update_state(callback: (old: State) => State) {
    const state = callback({
      op: this.state.op,
      input: this.state.input,
      values: [...this.state.values]
    });

    this.state.values = state.values;
    this.state.op = state.op;
    this.state.input = state.input;

    this.controller.render(this.state);
  }
}

And here we place rest of state class. Why I designed it, this way?
There are a lot of approaches to implement MVC pattern. Of course we could keep with Java-style getters and setters. Frankly, that would be even easier. I took a bit different route.
Why? Because this is a bit easier to debug. You have less points of failures and can put all your checks in one place. It keeps you view logic as simple as possible. In more complex app, View will be responsible for templating, and pushing all your data from state to the user.

State is your data. It is most important part of the whole app, even if it won't do much.
Every time, you want to change state, you should make those updates from within callback.
This is also a reason, to make additional State type.

Frankly, whole CalcState class could be fully generic and work for any kind of state.
There are one important detail.

Spaghetti is great... for dinner!

When you want to change anything in our View, you shouldn't call it directly.
State shouldn't even know about your View. All the communication should happen with the use of controller, otherwise you may make God of Pasta, very angry.

CalcController

Now, our biggest and most complex classes.
CalcController, the mastermind of all operation.

class CalcController {
  view: CalcView;
  state: CalcState;
  handlers: OperationMap;
  constructor(state: CalcState, view: CalcView) {
    this.state = state;
    this.view = view;
    this.state.controller = this;
    this.view.controller = this;

    this.view.init();
  }

First some initialization and passing our controller instance into State and View.
We also initialize our View.

  handle_bin_op(op: Op) {
    this.state.update_state(state => {
      state.op = op;
      if (state.input === "") {
        return state;
      }
      state.values.push(Number(state.input));
      state.input = "";
      console.log(state);
      return state;
    });
  }

  handle_digit(digit: string) {
    this.state.update_state(state => {
      if (state.input === "" || state.input === "0") {
        state.input = digit;
      } else {
        state.input = state.input + digit;
      }
      return state;
    });
  }

  handle_eq() {
    this.state.update_state(state => {
      if (state.values.length === 0) {
        return state;
      }

      if (state.input !== "") {
        state.values.push(Number(state.input));
      }

      const a = state.values.pop();
      const b = state.values.pop();
      console.log("%s %d %d", state.op, b, a);
      if (state.op === Op.Plus) {
        state.input = (a + b).toString();
      } else if (state.op === Op.Minus) {
        state.input = (b - a).toString();
      }
      return state;
    });
  }

And rest of the logic. See, how we are not changing any state data or view data directly.
Everything is neatly connected.

  render(state: State) {
    this.view.set_current_op(state.op.toString())
    this.view.set_input(state.input);    
  }
}

And this is only place, where we update whole view.

What's the point?

Ok, my React is doing all of that for me. It works fine. Why would I need something like this?

Look at how our state is implemented, our updates. React works similarly under-the-hood.
Try to reimplement it in React. See, how similar it will be. Of course it will be all within one class or even one function.

The thing is knowing all of that, you may a little bit better understand, that there is no single method and that, your React/Vue/anything else is not a magic and for small projects you don't need all of that.

There is pretty cool tool I found recently and even wrote short guide on, known as Svelte.
It is super cool, because it will generate most of the stuff I shown you here for you.
Write a little bit modified JS and you will get whole thing super small and for free.

I would love to hear, what do you think about my article.

Cheers!

Budget Poll App from Scratch in Svelte 3

CorvusEtiam — Tue, 30 Jul 2019 09:58:40 +0000

Welcome in our third installment. I finally uploaded whole project to GitHub. You can clone it and test out on your machine.

What changes were made to finish the project?

We are lacking one component: Balance page, with final data about our little money poll.
Secondly I find out, that a bit of clean up would make whole experience a lot better.
And we had few bugs on our way. I will try to explain to you those changes and why I made them. Still, this is beginner level project and we don't have many occasions to use complex patterns in code.

I wrote a bit of CSS to make our project a little bit more readable. It is still missing bunch of details, but I will have to live with it. I will fix them, but currently the whole thing is working well.

Balance page

You should start with new file named Balance.svelte.
It will be super simple.

<div>
    <h2>Poll Table Balance</h2>
    <table>
        <thead>
            <tr>
                <th>No.</th>
                <th>Person</th>
                <th>Paid</th>
                <th>Balance</th>
            </tr>
        </thead>
        <tbody>
            {#each $pollState.people as person, index }
            <tr>
                <td>{index + 1}.</td>
                <td>{person.name}</td>
                <td>{ format_currency(currency, person.amount) }</td>
                <td>{ format_currency(currency, person.amount - average_amount ) }</td>
            </tr>
            {/each}
        </tbody>
    </table>
</div>
<div>
    <h2>Summary</h2>
    <div>
        <h3>Person Polling money</h3>
        <p>{ $pollState.people.length }</p>    
    </div>
    <div>
        <h3>Average amount per person</h3>
        <p>{ format_currency($pollState.poll.currency, average_amount) }</p>    
    </div>
    <div>
        <h3>Money owed to other person</h3>
        <p>{ format_currency($pollState.poll.currency, compute_owed_money()) }</p>
    </div>
</div>

All the Svelte-JS is explained earlier. There are only two new parts.

Variables average_amount and function compute_owed_money.
We are using function call over here in template -- compute_owed_money() and can get away with it, thanks to few minor details. Normally, I would push it into reactive variable to make it work ALWAYS.

This time I went with simplistic approach. Why? What is so simplistic or non-optimal here, you may ask. Ok, first things first.

When rendering the template code, functions inside evaluate just once. What I mean is that, if we didn't force reload in template on state changes template would stay intact.

<script>

    let arr = [1, 2, 3, 4];

    function test() {
        return arr[Math.floor(( arr.length ) * Math.random())];
    }

    function update() {     
        arr.push(arr.length); 
        arr = arr;      
    }
</script>
<div>
    <p>Random value is: {test()}</p>
        <button type="button" on:click={ (ev) => {  update(); } }>Click me</button>
    <ul>
    {#each arr as item}
        <li>{item}</li>
    {/each}
    </ul>
</div>

Ok, this is pretty small example. The test function will pick random value from our array arr.
Function update push new value equal to size of array into arr. And assign it again to itself, to force reactive behaviour in Svelte.

It will update our list rendering of <li>{item}</li>'s.
But what will be value inside {test()}? Will it be equal, even if our array change size?

Test it. You may use REPL provided by svelte.dev.
Why then our list changes and our test(), do not and it renders only once?

Now let me change one thing here.

<script>
    let visible = true;     
    let arr = [1, 2, 3, 4];

    function test() {
        return arr[Math.floor(( arr.length ) * Math.random())];
    }

    function update() {     
        arr.push(arr.length); 
        arr = arr;      
    }
</script>
<div>
    {#if visible}
    <p>Random value is: {test()}</p>
        <button type="button" on:click={ (ev) => {  update(); } }>Click me</button>
    <ul>
    {#each arr as item}
        <li>{item}</li>
    {/each}
    </ul>
    {/if}
    <button type="button" on:click={ev => { visible = !visible; }}>Hide and Show</button>
</div>

Try it, try to click hide and show button, then Click me button few times.
Do you have idea, why this works like that? It is because, when we are hiding parts of templates with {#if ...} or rendering with {#each} or using {#await}, we are forcing updates in template, when variable changes.

Or for that matter whole content of template.

How to achieve something like this then? How to update our test() value or owed money.
And why, our compute_owed_money() works?

First things first, the easiest way would be to add additional variable and inside update() assing to it our result of test().

As far as computed_owed_money() is concerned, our {#if } wrapper, that takes care of updating the content of the panel is inside FormPanel.svelte.

Yep, those components update like inside a tree. From top App.svelte to bottom Balance.svelte.

To compute our owed money without this {#if ...} for example when you want pure CSS hide-and-show, the easiest way to achieve it is to use stores API directly.

Remember how those $ sign worked right. Now, time to be come a bit pourer and loose few dollars.


import { pollStore } from "./globals.js";

$: average_amount = ($pollState.poll.amount / $pollState.people.length);

function compute_owed_money(people) {
    let acc = 0;
    for ( let i = 0; i < people.length; i++ ) {
        let diff = (average_amount - people[i].amount);
        if ( diff > 0 ) {
            acc += diff 
        }
    }

    return acc;
}


let owed_money = compute_owed_money($pollStore.people);

let unsub_owed = pollStore.subscribe(store => {
    owed_money = compute_owed_money(store.people);
})

Here we go. We use things hidden behind syntactic sugar normally.

You can read more about it on svelte.dev store API docs about writable.

Every time, our store will change, it will issue call to function inside pollStore.subscribe, and pass store value as argument to this call.

Quick talk about CSS

I am not going to put all this CSS here. What is actually important is that, you can get with Svelte3, the CSS modules for free. It will automatically add special class with hash-like names and generate proper CSS code in single bundle.

Summary

I learned a lot from this project and gained pretty big respect for what Svelte3 gives you for:

free
faster
and without setting up webpack which is my little personal horror.

My components are small, fast. Whole code feels like written in almost raw JS and not with use of any compiler/framework/unicorn.

Still, this is very much beginner project and I will love to try Svelte on bigger stuff.

What impressed me, was very little final size.
Whole bundle of javascript weighted around 60kB even with development stuff enabled and without minification.

React with everything given by default, full-minifaction in dev-build weighted 5 times more. Maybe the sizes are not large, smaller than most of the images.
The difference is: image can be fastly rendered on screen. JS can run any computation at all. And they all take time/processor/heat-up your phone and you are both get some pour sod in small village somewhere a little bit more angry than necessary and you add up a little bit of sand to the climate change.

Svelte feels like a better Vue. I think I will try to reimplement this or some similar project in Vue. I have some more ideas to try out.

What do you thing about this series? Did you like it? What were too hard to understand or weirdly written? What would you change? I would love to hear from you.

Goodbye, and have a nice day.

When pointers bite you in Javascript.

CorvusEtiam — Wed, 24 Jul 2019 17:46:03 +0000

That will be short and quick. If you already have background in any lower level language, then there will be nothing new. Still, I would love to hear your opinion.
If you still think that pointer in programming is:

a) white arrow on your screen
b) weird black magic

Don't worry. With webdev we always thing, we can get away from machine into perfect (almost, crying in CSS hacks intensifies) world of web-browser.

Sometimes those abstraction leak, or to say it better, show weird things happening behind a curtain. Frankly, those things are not weird at all.
It is just how machine is build, and memory works.

Ok, first things first. What is a pointer?

Pointer can be understood as indirection. Address of different object/variable/function etc.
Address itself do not store data*, but with address we can access original value.

Why should I care about it?

Let me start with simple example.

let arr = [1, 2, 3, 4, 5];
let o = { something: arr }

o['something'][0] = 4;

console.log("%o", o);
console.log("%o", arr);

What just happened?
Why assignment work this weird? Or rather, still who cares. It works that way, doh.

Well, because it is pretty important every time you work with complex data structure and I am not talking about some complex tree. I am talking about Date, Array, Object. Anything that is not primitive type.

Why primitives just works? Because, they are cheap to copy. Object are not, and you have to force JS, to make copy for you, because it moves around references aka. alias to your stuff.

Just like pointers they are not value themselves, but rather something, pointing to your original variable. JS doesn't show them in syntax, and they are always on. They can be pretty useful if your code looks like that:

class A {
   constructor(config) {
    this.options = config.a;
   }
}

class B {
   constructor(config) {
    this.options = config.b;
  }
}

var config = { a : { 'name' : 'X' }, 'b' : { 'name' : 'Y' } }

Change your config and it will change also new A(config).options.

Reference is just an alias. With one key difference really. You cannot assign to those references new values.

Wait, what?

let arr = [1,2,3,4];
function a(arr /* reference to Array object */) {
    arr = "hello"; /// it becomes local variable arr. Original is not changed 
}
function b(arr /* reference to Array object */) {
    arr[1] = "hello"; /// it changes inner element
}

console.log(arr);

Guess, what will be inside arr after executing a(arr) and b(arr).

Remember in JS by default you pass aliases or references and not copies. Only primitives like Booleans, Numbers and Strings are copied.

Alias isn't different from pointer under the hood. Safer, less functional, easier to use -- yes. Still it is just a alias into other value -- pointer.

See ya!

Building Svelte 3 Budget Poll App [2]

CorvusEtiam — Mon, 22 Jul 2019 16:47:42 +0000

Where we ended

In my last post I covered basics of Svelte3 installation and usage. We created git repository and made multipage form component and panel component.
Now, we will try to design our content panels.

Starting up

Open up our repo in your favourite editor and add few files. We will need component for each panel.

Initial Poll Data component like name and full amount -> PollHeader.svelte
People joining up to the poll -> PollContent.svelte
Final table containing computed amounts for each person -> Balance.svelte

Please, create now those 3 files. We will also need to add 2 new store into globals.js.
We will name them: peopleStore and pollStore.

export const peopleStore = writable({
    people: []
})

export const pollStore = writable({
    name: null,
    amount: 0,
    currency: null
})

Now, we will import and use our first component containing app logic PollHeader.
Inside App.svelte you have to import, just like the last time both new PollHeader component and new store.

Your HTML template withing App.svelte should look like (stripped from script, style, and wrapper elements for brevity)

<FormPanel index={0}>
    <PollHeader />
</FormPanel>

Now lets design our PollHeader.

PollHeader Component

<script></script>
<style>
    .container {
        display: flex;
        flex-direction: column;
    }

    .group {
        display: flex;
        flex-direction: row;
    }

    .group label {
        width: 30%;
        margin-right: auto;
    }

    .group input {
        flex: 1;
    }

    .group select {
        flex: 1;
    }

    .push-right {
        margin-left: auto;
    }
</style>
<fieldset>
    <legend>Poll General Data</legend>
    <p>Please provide name of the poll and amount</p>
    <div class="container">
        <div class="group">
            <label for="pollName">Poll Name: </label>
            <input type="text" id="pollName" required>
        </div>
        <div class="group">
            <label for="pollAmount">Poll Amount: </label>
            <input type="number" id="pollAmount" required>
            <select id="pollCurrency">
                <option value="" selected disabled>Select Currency</option>
            </select>
        </div>
        <div class="group">
            <button class="push-right" type="button">Save</button>
        </div>
    </div>
</fieldset>

First, we made our basic component template. One thing, you may notice is that, we use again class .container here.
We used it before. This is pretty important. Svelte3 can compile your CSS into modules eg. replace normal class names with hashes to make them easier to work with. What is more important here is that, you don't have to worry about them.
If you want to use some global css in svelte it is also possible. Just define your css in public/global.css and use as any other css files.

Now, I don't want to spend to much time on CSS. You can read about it here:

CSS Tricks Guide to FlexBox -- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
MDN Margin and section about margin: auto -- https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Now, we need to make sure that:

Our button is disabled, if all fields are not filled in
Find a way to get values from fields into variables

In React land that would involve writing large amount of accessors, functions, and JSX.
Here we will archive it in much more quicker manner.

Svelte follows the way, paved by Vue, with custom, two-way binding. Here it is even easier, thanks to nature of Svelte.

<script>
import { pollState } from "./globals.js";

let name = "";
let amount = 0;
let currency = null;

let changed = false;

$: filled_in = (name !== "") && ( amount > 0 ) && ( currency != null ) && changed;
$: disabled = is_filled_in();

function save() {
    $pollState.poll = {
        name,
        amount,
        currency
    };
}

</script>
<!-- parts of html omitted for brewity -->
<input type="text" id="pollName" required bind:value={name}>
<input type="number" id="pollAmount" required bind:value={amount}> 
<select id="pollCurrency" bind:value={currency} on:change={ev => { changed = !changed; }}></select>
{#if filled_in }
<button class="push-right" type="button" on:click={save} {disabled}>Save</button> 
{/if}

We are lacking one thing. Our select has one option, what's more. That option is disabled one with message to the user.
Time to change that.

<select id="pollCurrency" bind:value={currency} on:change={ev => { changed = !changed; }}>
    <option value="" selected disabled>Select Currency</option>
    {#each Object.entries(CURRENCY) as entry }
    <option value={entry[0]}>{entry[1].name}</option>
    {/each} 
<select>

Is it better than React and normal JS functions. Hard to say, here we get pretty simple {#each}{/each} statement.
It gives as basic iteration. Of course, our iterated element, here CURRENCY can be any JS expression.
If you need something different, you can write function for it.

And time to define currencies, which you should next import inside PollHeader script tag.

/// place it in globals.js and import inside PollHeader
export const CURRENCY = {
    "PLN" : { name: "złoty", format: "{} zł" },
    "USD" : { name: "dollar", format: "$ {}" },
    "EUR" : { name: "euro", format: "{} EUR" }
}

Of course, you could always provide them with property.

PollContent component

Time for classic CRUD app. Let me start with how this part will look like.
It should contain few key parts:

Table representing our current data
Set of controls
Block with edit component

The best idea for now, would be to wrap those parts into components. Let us try this approach

Inside PollContent.svelte we will put:

<script>
    import { pollState } from "./globals.js";
</script>
<div>
    <h2>{ $pollState.poll.name }</h2>
    <!-- Our table with data  -->
</div>
<div>
    <button type="button">Add Entry</button>
    <button type="button">Update Entry</button>
    <button type="button">Delete Selected Entries</button>
</div>
<div>
    <!-- Our data input part -->
</div>

Ok, why we need pollState store. I will try to follow this naming convention. If something is in globals and ends with state, you should think about it as store.

To make all of it easier, let me define few more components here. First one, will be PollTable.svelte and PollInput.svelte next.

<script>
    import { pollState } from "./globals.js";
    import PollTable from "./PollTable.svelte";
    import PollInput from "./PollTable.svelte";
</script>
<div>
    <h2>{ $pollState.poll.name }</h2>
    <PollTable />
</div>
<div>
    <button type="button">Add Entry</button>
    <button type="button">Update Entry</button>
    <button type="button">Delete Selected Entries</button>
</div>
<div>
    <PollInput />
</div>

PollTable

Generally it should be understandable enough. Only hard part is here ternary if inside <td>.
You should remember that, you can put any JS expressions inside braces.
This person.amount > 0 expression checks if one person paid money or owe all of it and set class based on that.

Function get_person_by_timestamp do one thing. Iterate over our dataset and find person with matching timestamp.
Why not index?

Question for later: How would you add sorting later on?

<script>
    import { format_currency, pollState } from "./globals.js";

    function get_person_by_timestamp(ts) {
        for ( let i = 0; i < $pollState.people.length; i++ ) {
            if ( $pollState.people[i].timestamp === ts ) {
                return i;
            }
        }
    }

    function select_checkbox(ts) {
        let index = get_person_by_timestamp(ts);
        $pollState.people[index].selected = !$pollState.people[index].selected;
    }
</script>
<style>
    .paid {
        color: green;
    }

    .owe {
        color: red;
    }
</style>
<table>
    <thead>
        <tr>
            <th>-</th>
            <th>No.</th>
            <th>Person</th>
            <th>Paid</th>
        </tr>
    </thead>
    <tbody>
        {#each $pollState.people as person, index }
        <tr>
            <td><input type="checkbox" on:change={ ev => select_checkbox(person.timestamp) } /></td>
            <td>{index + 1}.</td>
            <td>{person.name}</td>
            <td class = "{ person.amount > 0 ? 'paid' : 'owe' }">{ format_currency(person.amount, person.currency) }</td>
        </tr>
        {/each}
    </tbody>
</table>

We want to keep track of which checkbox was selected. It is probably easiest by just adding boolean, selected field into globals.js in each object representing person.

Now lets open our browser finally and use some buttons. Fill values in first panel, click Save and Next later on.
Problem is, if you click previous, you will see everything disappears or rather, there are no value being kept.
Why?

There reason is that, our {#if <smth>} template will remove and re-add parts to the DOM.
How to solve it?

Going back to our FormPanel

We have two solutions here.

First one is to swap our {#if} template with good old css display: none;. It is pretty good, works fine.
Our code may look like this now.

<style>
.multiform-panel {
    display: block;
}

.multiform-panel.hidden {
    display: none;
}
</style>
<div class="multiform-panel { index !== $controllerState.current ? 'hidden' : '' }">
    <slot></slot>
</div>

But let me show you second way and introduce you to onMount lifecycle hook.
Inside our PollHeader.svelte we will do something like this:

<script>
    /* let me import onMount */
    import { onMount } from "svelte";
    import { CURRENCY, pollState } from "./globals.js";

    onMount(() => {
        name = $pollState.poll.name || "";
        amount = $pollState.poll.amount || 0;
        currency = $pollState.poll.currency || "default";

    })

    let name;
    let amount;
    let currency;
    /* rest goes here */
</script>

Lifecycle onMount is runned every time component is... guess what. Mounted into DOM. Which way is better?
I think, the onMount is good a bit cleaner.

PollInput

<script>
    import { onMount, createEventDispatcher } from "svelte";

    import { CURRENCY, pollState } from "./globals.js";

    export let currency; 

    let dispatch = createEventDispatcher();

    let name;
    let amount;
    let timestamp = null;

    let is_update = false;

    function get_person_to_update() {
        for ( let i = 0; i < $pollState.people.length; i++ ) {
            if ( $pollState.people[i].selected ) {
                return $pollState.people[i];
            }
        }

        return null;
    }   

    onMount(() => {
        let updated = get_person_to_update();

        currency = $pollState.poll.currency;

        if ( updated !== null ) {
            timestamp = updated.timestamp;
            name = updated.name;
            amount = updated.amount;
        } else {
            name = "";
            amount = 0;
            timestamp = null;
        }
    });

    function dispatch_save() {
            dispatch('save', { name, amount, currency, timestamp: timestamp });
    }
</script>
<div>
    <div>
        <label for="name">Name: </label>
        <input id="name" bind:value={name}>
    </div>
    <div>
        <label for="amount">Name: </label>
        <input id="amount" bind:value={amount}>
        <span>{ CURRENCY[currency].name }</span>
    </div>
    <div>
        <button type="button" on:click={ ev => { dispatch_save() } }>Save</button> <!-- [3] -->
    </div>
</div>

Ok, what is it going on here? You can see, by now, we are creating custom events. This is another mechanic used to pass state between components. If your component looks like input, custom events are good idea, how to pass data. It resembles normal DOM operation and is pretty easy to use later on. Our code now.

We do that with:

Creating new event dispatcher with createNewEvent, it will give as back function.
We write small helper function, important detail is that, we don't need to write to components for updating and creating items. I will use timestamp inside object as a marker. This object is accessible by event handler by using something like ev => ev.detail
I put our helper and bind it to click event on button.

Now, we need to fill out PollContent.

Going back to PollContent

Rest should be at least understandable. We will update PollInput with few props and add .

First we want our input box show up on click of the button.
We need variable named open inside script block and edit our control buttons in this way;
Logging was added to make it cleaner in console, but can be freely removed.

<div class="group horizontal">
    <button type="button" on:click={ev => { console.log(ev.target.innerText); open = true; }}>Add Entry</button>
    <button type="button" on:click={ev => { console.log("%s -- not implemented yet", ev.target.innerText); }}>Remove Selected</button>
    <button type="button" on:click={ev => { console.log(ev.target.innerText); open = true; }}>Update Selected</button>
</div> 

{#if open }
<PollInput on:save={ ev => { create_or_update(ev.detail) }} currency={$pollState.poll.currency}/>
{/if}

I added on:save event handler into the PollInput tag. This is how you can listen to custom events. In exactly the same way as before.

And that is how I implemented create_or_update function.

function create_or_update(obj) {
        let { name, amount, currency, timestamp } = obj;

        if ( timestamp == null ) {
            let people = $pollState.people;
            people.push(create_person(name, amount));

            $pollState.people = people;  
            open = false;
        } else {
            for ( let i = 0; i < $pollState.people.length; i++ ) {
                if ( $pollState.people[i].timestamp == timestamp ) {
                    $pollState.people[i].name = name;
                    $pollState.people[i].amount = amount;
                    $pollState.people[i].currency = currency;
                    $pollState.people[i].selected = false;
                }
            }
            open = false;
        }
    }

Pretty simple. Those additional assingments are not necessary, but I like to keep them, because in Svelte assignment is special.
Assignment run the whole reactive machinery. This is way, if you modify stores or reactive properties, you want to assign on each change.

Only part left is Remove Selected button, but I would leave as an exercise for a reader.

Again if something isn't clear please ask or read up on svelte.dev. Examples are pretty cool too.

See you soon!

How to build Budget Poll App in Svelte3

CorvusEtiam — Sun, 21 Jul 2019 13:12:20 +0000

Introduction

I would like to start by explaining myself, why I use yet-another-almost-unknown-framework, where most people just stop at using Angular, React, Vue and maybe one or two more. Well, best explanation would be something about combination of both small learning curve which is comparable with raw HTML5 and old-school tech, speed, small size and low amount of boilerplate.

Here I would like to preset for you, how to build small, usable, money polling app. It is not much and it wont win any beauty pageants for websites.

It would be good idea, if you have good grasp of HTML5, Javascript.

Money Polling?

Let me show you, some simple example. You are going with your friends to grab a pizza together, but there is a problem. The best pizzeria in town doesn't accept card payment, ATM is far away and not everyone has enough cash on hand to fully split a bill. What do we do? It is pretty simple. We take receipt and split it equally between everyone. Everyone pay as much as they could, and later on we will repay bills between each other or just sent each other money using our smathphones. Easy? Yes.

How normal person do it?

Take calculator
Divide recipe by number of people
Average price per person - money placed in a poll => How much rest of people owe to this guy/gal or how much they are in debt.

How dev do it?

Open Excel
Go to: algorithm for normal person

How webdev do it?

Built website for it.
Sit alone at restaurant because rest of your friends made a deal, few hours ago and happily go home. Restaurant owner looks weird at you now.

Again why Svelte and not React?

DISCLAIMER: I am planning to do the same in React.

This is how, classic input component for basic data data within out app look like in both:

class BasicInfo extends React.Component {
    render() {
         return (
      <fieldset>
        <legend>Poll</legend>
        <p>Provide name and amount of money for your poll</p>
        <p>
          <label htmlFor="pollName">Name: </label>
          <input
            type="text"
            id="pollName"
            name="pollName"
            onChange={ev => this.props.onChangeName(ev.target.value) }
          />
        </p>
        <p>
          <label htmlFor="pollAmount">Amount: </label>
          <input
            type="number"
            id="pollAmount"
            name="pollAmount"
            onChange={ev =>
              this.props.onChangeAmount(parseInt(ev.target.value, 10))
            }
          />
        </p>
        <button type="button" className="active"
          onClick={() => {
            this.props.onSave();
          }}
        >
          Save
        </button>
      </fieldset>
    );
  }
}
}

Yuck, and it is not all of it. Seriously, mine code took almost twice as much, because of the additional type annotations from react. It is still missing large chunk of code for constructor and default props and state.

Now for svelte.

<script>

    const CURRENCY = {
        "PLN" : { name: "złoty" },
        "USD" : { name: "dollar" }
    }

    let name = "";
    let amount = 0;
    let currency;

    function save() {
        /// here goes save function. Cut for brewity
    }

    $: is_filled = ( name !== "" ) && ( amount > 0 ) && (currency !== undefined);
</script>
<fieldset>
    <legend>Poll Start</legend>
    <p>Please provide basic data about poll</p>
    <label for="pollName">Poll Name: </label>
    <input type="text" id="pollName" bind:value={name} required>
    <label for="pollAmount">Poll Name: </label>
    <input type="number" id="pollAmount" bind:value={amount} required>
    <select bind:value={currency}>
        <option value="default" disabled selected>Select Currency</option>
        {#each Object.entries(CURRENCY) as entry }
        <option value={entry[0]}>{ entry[1].name }</option>
        {/each} 
    </select>
    {#if is_filled }
    <button type="button" on:click={save}>Save</button>
    {/if}
</fieldset>

Don't worry if you are not understanding all of it.
Most important part here is that, Svelte code in original project took around 32 lines of code to implement all of this.

I lied... Sorry.

Seriously, Svelte is not a framework. If you visit their site SvelteDev, you will find only some weird text namely: CYBERNETICALLY ENHANCED WEB APPS.
Which sounds like hip-words said to bunch of managers, to sell yet-another-useless-project to them. Don't worry, it is not that bad. What they probably meant to say with it is that: Svelte is not a framework. Not at all.

You should think about as something like Typescript, Vue Single-File-Templates or Babel. It is the tool that generate boilerplate for you. Compiler of sorts, just not be scared. There is not many dragons inside...

Time to start

First we should setup our environment. There are two possible paths for you now.

Use codesandbox.io and login with Github credentials. Then click on "Create Sandbox" button and frow "Client Sandbox" tab pick Svelte Sandbox.
Setup svelte locally with editor. I use VSCode, but something like Notepad++ will work good enough. You just need editor with HTML5 support.

I will show you second path.

Installation

You should have working nodejs and npm on your system. Also we will use git for good practice. If not, grab an https://nodejs.org/en/download/.
Secondly open shell or command line and type in

npx degit sveltejs/template budget-poll

Npx is tool which wraps npm. It download and install tool provided as second argument and run this tool with rest of arguments provided.
Here we use degit. Tool written by Rich Harris, author of Svelte, to setup project by cloning template from git repo and placing everything in folder named budget-poll.
He loves to reinvent a wheel, but he does some wonderful stuff with it.
Now standard git setup and project install:

cd budget-poll
git init
git add *
git commit -am "Initial setup of budget app"
npm install

After a while, and downloading solid chunk of internet we have working environemt. Now just type in npm run dev and open browser with adress showing up in your terminal. For me, it was localhost:5000.

General components layout

First things first, we should think about how our components will be laid out.
We need few things. I would love to split budget input into few parts and add some way to go between those pages.
That means we need both MultiPanelForm and FormPanel components.
Let me write it inside out App.svelte.

<script>
    // App.svelte content
</script>
<MultiPanelForm>
    <FormPanel>
        <!-- First panel -->
    </FormPanel>
    <FormPanel>
        <!-- Second panel -->
    </FormPanel>
    <FormPanel>
        <!-- Third panel -->
    </FormPanel>
</MultiPanelForm>

Ok, looks simple. If you ever saw how to use JSX it is similar. Or frankly, just as you would write it in HTML5.

Those uppercased non-standard tags are our components. To use those we will need to import them from elsewhere.
To do that, add with App.svelte script tags those ES6 style imports. Remember to use relative paths and add extension to your file names. Svelte will not be happy, because they do not exist yet. Get over it big boy, we will do it in a moment. Also remove property props: { ... } from main.js. You are not going to use it.

import MultiPanelForm from "./MultiPanelForm.svelte";
import FormPanel from "./FormPanel.svelte";

Now, you think this is easy. Now there will be madness of JSX, styles in js and whatnot, just like in React land.
Well, let's find out.

MultiFormPanel

Create file named MultiFormPanel.svelte. This is out first, reusable component. It contains free parts enclosed in tags.
Add those to the file.

<script>
    /// mostly JS and some svelte-specific extensions
</script>
<style>
    /* css styling for your component */
</style>
<form>
    <!-- html part of component and svelte templating -->
</form>

What are does svelte-specific extensions and templating? Ok, give me a second.
Create another file, named FormPanel.svelte and copy this layout to the newly created file. Just replace form tag with a div.

When you open browser, svelte should render everything correctly. I mean, you wont see nothing except empty form, but it works. Now, time to deal with those custom components withing components.
We have to provide target, a place of some sorts to place those components within.
A slot! How to do that?

Time to edit MultiFormPanel.svelte and add some html.

<form>
    <div class="container">
        <slot></slot>
    </div>
    <div class="controller"></div>
</form>

Ok, I jumped forward a little bit. If you know any react JSX than, you will notice, we are not using any className here, or any weirdly named tags. Just old school html plus custom (or not so custom), slot tag.
Slot is a place were children of this component will go automatically. To better understand this, open svelte.dev page and read up in pretty great, interactive tutorial.

We will also edit: FormPanel and enter this html.

<div class="multiform-panel">
    <slot></slot>
</div>

Ok. With some generic HTML, now we need to add functionality. First buttons except that, they should appear only
when certain criteria are met.
But first we need a way to store on which page we are exactly.
Create globals.js file in the same ./src dir and type in there, these text.

/* writable is a way to keep global state in svelte, just like context api, 
just simpler and easier to split in smaller parts
*/
import { writable } from "svelte/store";

/* here we define and export controllerState store. We can now subscribe in other files to this store and update its content */
export const controllerState = writable({
    current: 0
})

Now time for some cybernetical enhanced js... or just normal js with a few extension to make less boilerplate possible.

Open MultiFormPanel.svelte and first add two control buttons. Those buttons should appear when certain criteria are met.
To archive this we will use templates similar to those known from Mustache template.

<div class="controller">
    {#if prev_active}
    <button type="button">Previous</button>
    {/if}
    {#if next_active}
    <button type="button">Next</button>
    {/if}
</div>

Both prev_active and next_active are boolean variables. Let us define them now.

<script>
    import { controllerState } from "./globals.js";

    export let last_page;

    let prev_active = $controllerState.current > 0;
    let next_active = $controllerState.current < last_page;
</script>

We get few new things here. First export let last_page. This is how svelte implements properties.
Just export let <prop_name> = <default_value> and you are ready to go.

Now you can, edit <MultiFormPanel> in App.svelte to <MultiFormPanel last_page={2}> to pass properties withing.

What are those dollar sing for? I didn't import that one, do I?

Yes... From a certain point of view...

Those are syntactic sugar over.

let prev_active;

controllerState.subscribe(val => {
    prev_active = (val.current > 0);
})

Thanks to them, you can access store as any ordinary variable now.

Problem is... it didn't work. We need a bit more code here.
First let me make only panel which index prop is equal to $controllerState.current visible.

In FormPanel.svelte:

<script>
    import { controllerState } from "./globals.js";

    export let index;
</script>
{#if index == $controllerState.current }
<div class="multiform-panel">
    <slot></slot>
</div>
{/if}

And add index prop inside App.svelte.

This is how, it should look like.

<MultiPanelForm last_page={2}>
    <FormPanel index={0}>
        <!-- First panel -->
    </FormPanel>
    <FormPanel index={1}>
        <!-- Second panel -->
    </FormPanel>
    <FormPanel index={2}>
        <!-- Third panel -->
    </FormPanel>
</MultiPanelForm>

To make switching working open MultiFormController.svelte and in <script> block add few things.

function next_panel() {
    $controllerState.current = $controllerState.current + 1;
}

function prev_panel() {
    $controllerState.current = $controllerState.current + 1;
}

And add to coresponding buttons those events. Just like this:

<button type="button" on:click={prev_panel}>Previous</button>

And similarly to the Next button.
Something is not right. Buttons do not change as they should. How to deal with the updating variables "prev_active" and "next_active".

They were assigned once, and we did not change them. Will they recalculate automatically?

Nope. Nothing can be that easy! We will need to sweat a little to do that.
Inside MultiFormPanel.svelte, in <script> block. Time for some black-magic.

Ready!

Set! Go!

    let prev_active = $controllerState.current > 0;
    let next_active = $controllerState.current < last_page;

You have this. Now to make everything reactive we will need to change things. How?

Here comes, one of the best concepts in Svelte.
Just swap let with $: and you are ready to go.

$: prev_active = $controllerState.current > 0;

Wait!? What? How?

Remember, what I told you about Svelte being compiler and not framework. It gives them ability to alter language itself.
It is most often pretty much not problematic. Here we get almost for free, full-blown reactive variable.
Anytime $controllerState.current will change, it will update prev_active and next_active.

Final stuff

git add src\*
git commit

And write some useful git commit. Now press <ESC> and type in :wq! and press <Enter>. If you need more help, read up on editing with Vim or change your default vim editor to nano or something...

Thanks for reading. We will be back for more!

Some stats.

React:

took me: 120 lines of code to archieve almost the same.
compiles on my bad laptop in: 70 seconds or so, when used with Parcel
Involve merging children and enhancing them with props. If not Typescript and Parcel I would be very angry

Svelte:

40 lines of code in components.
Easy CSS with built-in support for modules
Resulting code generated is much smaller.
Easy to use, easy to read version.
It is possible to use typescript in Svelte too!