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

2 Background: DRD Edit Demo

3 Background: DRD Edit Demo

4 New: Navigation + Table Layout Demo

5 New: Navigation + Table Layout Demo

6

7 Lessons Learned (1) Reactivity is - Part 1 export let view; export let activeView;

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}

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;

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

11 Lessons Learned (5) Local Styles are equally good

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

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

Thank you