Slide 1

Slide 1 text

What I learned from using Svelte for the demos Modeling Lightning Talk ⚡ Niklas Kiefer

Slide 2

Slide 2 text

2 Background: DRD Edit Demo

Slide 3

Slide 3 text

3 Background: DRD Edit Demo

Slide 4

Slide 4 text

4 New: Navigation + Table Layout Demo

Slide 5

Slide 5 text

5 New: Navigation + Table Layout Demo

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

7 Lessons Learned (1) Reactivity is - Part 1 export let view; export let activeView;
{#if view === activeView} {/if}

Slide 8

Slide 8 text

8 Lessons Learned (2) Reactivity is - Part 2 export let tableData = {}; const HIT_POLICIES = [ /* ... */ ]; $: explanation = find( HIT_POLICIES, hp => hp.name === tableData.hitPolicy ).explanation; function changeHitPolicy(event) { const { target: { value } } = event; tableData.hitPolicy = value; } {#each HIT_POLICIES as { name }} {name} {/each}

{explanation}

Slide 9

Slide 9 text

9 Lessons Learned (3) Component Templating import Table from '../../../decision-table-layout/src/components/Table.svelte'; import ArrowExpandSvg from '../../resources/arrow-expand.svg'; import './NavigationTable.scss'; const noop = () => {}; export let onViewSwitch = noop; export let tableData;

Slide 10

Slide 10 text

10 Lessons Learned (4) Global State import data from '../resources/data.js'; let currentTable = data['Decision_03absfl']; let view = 'drd';

Slide 11

Slide 11 text

11 Lessons Learned (5) Local Styles are equally good

Slide 12

Slide 12 text

12 Lessons Learned (6) Performance measures DRD Editing Demo Navigation Demo

Slide 13

Slide 13 text

13 Summary Reactivity + State Management makes it way easier to build quick demos with Svelte

Slide 14

Slide 14 text

Thank you