JS Framework Vote

[aslink87]

Hey team. Consider this a vote for framework. But it also serves as a way to evaluate contributor activity...

Svelte has been put forth by myself and @jbritian. Other than that React is an option. I haven't seen any discussions about other frameworks so unless someone makes the case (soon) they will be disregarded.

[pveeckhout]

there has been a stack vote a month or so ago:

 frontend:
    react:
      voters:
        - Garud
        - Ignalion
        - madmax
        - one_cog
      total: 4
    svelte:
      voters:
        - jbritain
      total: 1

[aslink87]

Thanks for the info. Was this done on discord?

[nitishdhar]

I have never used svelte, have mostly worked with react and recently with NextJS. How common is svelte considering we are looking to get more contributors participate without an overhead of learning a new pattern. What's the delta or learning curve for someone who knows react and if you were to pick a couple reasons, why would Svelte be a better choice here?

[aslink87]

Your first question is certainly valid as React is the market leader by far, for a number of reasons. I think with open source projects it's a balancing act between what's most popular and what's most attractive - not always the same thing. Perhaps the best course is to go with what the current, active folks want to use and future collaborators can adjust.

Learning curve - once you grasp the routing mechanics and how state works it's quite simple. Here's a Video with a summary. And here's a walkthrough introduction if you're interested. Basically, you will be up and making content immediately, learning how to manage state will take <1hr. This project would be a good first project as it doesn't handle the backend.

You can check out jbritain's branch to feel out the structure. Each svelte file typically has 3 parts:

1. <script> at the top for loading data, writing functions/variables, importing modules, etc.
2. Body section for rendered content. HTML with some svelte syntax like {#each}, {#if}, etc.
3. <style> at the bottom to apply styling to what's in 2.

Reasons:

1. Less boilerplate
2. Simple state management
3. More intuitive syntax.

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a + b}</p>

instead of:

import { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChange (event, setValue) {
    const { value } = event.target;
    setValue(value);
  };

  return (
    <div>
      <input type="number" value={a} onChange={(e) => handleChange(e, setA)} />
      <input type="number" value={b} onChange={(e) => handleChange(e, setB)} />
      <p>{a} + {b} = { parseInt(a) + parseInt(b) } </p>
    </div>
  );
}

I hate to sound like a shrill, and am happy to help no matter what we use! If you aren't interested in learning it then we better stick with NextJS.

[nitishdhar]

Thanks for the summary, to be honest, I am open to taking this opportunity to learn something new and if a couple of folks like you here have some hold on this, we should have the support to keep moving and learn over time. I am aligned with going with Svelte. Updated my vote

[aslink87]

I'm closing this. There was a previous vote on discord that I was unaware of and I do not want to discount those who voted in it. We will be using React for the Frontend.