What I learned from using Svelte for the demos

Modeling Lightning Talk ⚡️

Transcript

1. What I learned from using Svelte for the demos Modeling Lightning Talk ⚡ Niklas Kiefer
2. 2 Background: DRD Edit Demo
3. 3 Background: DRD Edit Demo
4. 4 New: Navigation + Table Layout Demo
5. 5 New: Navigation + Table Layout Demo
7. 7 Lessons Learned (1) Reactivity is - Part 1 <script> export let view; export let activeView; </script> <div class="wrapper" style="display: {view === activeView ? 'block' : 'none'}"> {#if view === activeView} <slot/> {/if} </div>
8. 8 Lessons Learned (2) Reactivity is - Part 2 <script> 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; } </script> <select on:change={changeHitPolicy}> {#each HIT_POLICIES as { name }} <option selected={name === tableData.hitPolicy}> {name} </option> {/each} </select> <p class="hp-explanation">{explanation}</p>
9. 9 Lessons Learned (3) Component Templating <script> 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; </script> <div class="navigation-table"> <div class="buttons"> <span class="arrow-expand btn btn-sticky" on:click={() => onViewSwitch('split-screen')}> {@html ArrowExpandSvg} </span> <button class="edit-drd btn" on:click={() => onViewSwitch('drd')}> Edit DRD </button> </div> <Table { tableData } /> </div>
10. 10 Lessons Learned (4) Global State <script> import data from '../resources/data.js'; let currentTable = data['Decision_03absfl']; let view = 'drd'; </script> <Wrapper view="drd" activeView={view}> <DRD decision={currentTable.id} /> </Wrapper> <Wrapper view="split-screen" activeView={view}> <SplitScreen tableData={currentTable} /> </Wrapper>
11. 11 Lessons Learned (5) Local Styles are equally good
12. 12 Lessons Learned (6) Performance measures DRD Editing Demo Navigation Demo
13. 13 Summary Reactivity + State Management makes it way easier to build quick demos with Svelte
14. Thank you