Why Svelte is our choice for a large web project

Post by ComputerGuru » Wed, Mar 11, 2020, 6:49 PM UTC

sam_goody wrote: post #108

ComputerGuru wrote: post #35

Earlier quoted context omitted.

Someone on HN recommended it to me before, so I’ll just pass this along: look at intercooler JS for making individual “live widgets” on a well-designed graceful degradation site like you describe.

Also Alpine.js, which has got quite a community behind it (somehow promoted by Laravel, IIRC). It is less than intercooler, but provides timesavers for simple sites like described. A compromise between a framework and none.

Post by hinkley » Wed, Mar 11, 2020, 7:48 PM UTC

inopinatus wrote: post #107

hinkley wrote: post #95

Earlier quoted context omitted.

What I found on several consecutive projects was that less the HTML generation resembles the final HTML, the harder it is for people to keep the CSS selectors wired up correctly. Getting text into the page as fast as possible at the cost of layout issues is a sucker's bet. You can't ship until it looks good, and the longer features are in-flight the worse management feels about the team's abilities.

A utility-first compile-time CSS framework (eg Tailwind) should be a perfect fit for this scenario, on multiple levels

Post by troyk » Wed, Mar 11, 2020, 9:46 PM UTC

leppr wrote: post #120

jiofih wrote: post #119

Earlier quoted context omitted.

Passing components is totally supported, and you can use slots. There isn’t a single issue I identify with in that GH thread...

Slots are currently an unwieldy band-aid. https://github.com/sveltejs/svelte/issues/1037 (open since 2017) https://github.com/sveltejs/svelte/issues/2079 The simple usage of passing a component to a component, which almost every decently-sized project will make use of, has no convenient syntax, only workarounds: // parent.svelte import Nested from './nested.svelte' import Child from './child.svelte'; // child.svelte…

  
    import RedThing from './RedThing.svelte';
    import GreenThing from './GreenThing.svelte';
    import BlueThing from './BlueThing.svelte';

    const options = [
      { color: 'red',   component: RedThing   },
      { color: 'green', component: GreenThing },
      { color: 'blue',  component: BlueThing  },
    ];

    let selected = options[0];
  

  
    {#each options as option}
      {option.color}
    {/each}
  

  {#if selected.color === 'red'}
    
  {:else if selected.color === 'green'}
    
  {:else if selected.color === 'blue'}
    
  {/if}

Post by leppr » Wed, Mar 11, 2020, 10:57 PM UTC

troyk wrote: post #125

leppr wrote: post #120

Earlier quoted context omitted.

Slots are currently an unwieldy band-aid. https://github.com/sveltejs/svelte/issues/1037 (open since 2017) https://github.com/sveltejs/svelte/issues/2079 The simple usage of passing a component to a component, which almost every decently-sized project will make use of, has no convenient syntax, only workarounds: // parent.svelte import Nested from './nested.svelte' import Child from './child.svelte'; // child.svelte…

I'm evaluating svelte and have yet to do much, however handling dynamic components is a key requirement, and appears to be supported like so: import RedThing from './RedThing.svelte'; import GreenThing from './GreenThing.svelte'; import BlueThing from './BlueThing.svelte'; const options = [ { color: 'red', component: RedThing }, { color: 'green', component: GreenThing }, { color: 'blue', component: BlueThing }, ]; le…

Post by Can_Not » Thu, Mar 12, 2020, 3:26 AM UTC

sw19 wrote: post #118

Can_Not wrote: post #112

How is it that 23 hours in and nobody is pointing out that svelte/sapper just freezes on runtime errors without the ability to show an error page or report them to a tracker like sentry/rollbar/etc.? This is one of the biggest barriers to being production ready or fit for use in large projects.

Wow is that true? My team has been considering moving to Svelte and not having Sentry integration would be a dealbreaker.