Discuss anything related to web development but no technical support questions


Post by gregc »

I don't really want to switch over to writing facebook/react or some of the other popular ones.

But Svelte caught my attention as something I could use to build lightweight pages with, or even all the front end of an enterprise application.

Just wondering if you had any opinions on it?


Post by saki »

I have tried Svelte some 1 1/2 years ago and I liked it at that time mainly for the lightweight apps. It was easy to learn, easy to make it working and integration of Bryntum Scheduler in a Svelte app was easy as well.

I wouldn't dare to recommend Svelte for a very big application – however situation might have changed since I've played with it.

But if you want to have it as simple shell around Bryntum components, to implement a simple page logic, etc. I think Svelte would be a viable option.

We currently do not support Svelte, neither provide wrappers for it similar to React, Angular and Vue, neverthelss, integration should be easy. Here are some excerpts from the old app I've written:

<!-- 
    Bryntum Scheduler component 
-->
<script>
    import { onMount, onDestroy } from 'svelte';

    import { Scheduler } from '@bryntum/scheduler';
    import { ScheduleConfig } from './ScheduleConfig.js';

    // local variables
    let schedulerContainer;

    // externally bindable properties
    export let engine = null;

    onMount(() => {
        engine = new Scheduler({
            adopt:schedulerContainer,
            ...ScheduleConfig
        })
    });

    onDestroy(() => {
        if(engine) {
            engine.destroy();
        }
    });

</script>

<div bind:this={schedulerContainer}></div>

and ScheduleConfig:

/**
 * Bryntum Scheduler configuration file
 */
import { Scheduler, StringHelper } from 'bryntum-scheduler';

export const ScheduleConfig = {
    eventColor : null,
    columns    : [
        { type : 'resourceInfo', imagePath : 'resources/images/users/', text : 'Staff', field : 'name', width : 150 },
        {
            text       : 'Task color',
            field      : 'eventColor',
            width      : 90,
            htmlEncode : false,
            renderer   : ({ record }) => `<div class="color-box b-sch-${record.eventColor}"></div>${StringHelper.capitalizeFirstLetter(record.eventColor)}`,
            editor     : {
                type        : 'combo',
                items       : Scheduler.eventColors,
                editable    : false,
                listItemTpl : item => `<div class="color-box b-sch-${item.value}"></div><div>${item.value}</div>`
            }
        }
    ],

    features : {
        timeRanges : true
    },

    crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    },

    barMargin : 1,
    rowHeight : 50,

    startDate  : new Date(2017, 1, 7, 8),
    endDate    : new Date(2017, 1, 7, 18),
    viewPreset : 'hourAndDay',

    useInitialAnimation : 'slide-from-left'
};

Post by gregc »

nice, thanks for that !


Post Reply