Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What I learned from using Svelte for the demos
Search
Niklas Kiefer
March 17, 2020
Programming
1
220
What I learned from using Svelte for the demos
Modeling Lightning Talk ⚡️
Niklas Kiefer
March 17, 2020
Tweet
Share
More Decks by Niklas Kiefer
See All by Niklas Kiefer
Optimizing tidy: Practical Insights with the React Compiler
pinussilvestrus
0
5
a11y testing: tech talk
pinussilvestrus
0
3
Tech Talk: a11y testing at the HTO team
pinussilvestrus
0
38
a11y testing
pinussilvestrus
0
81
Taking Templates to the Limit
pinussilvestrus
0
44
What the $ref - Create composable JSON Schemas
pinussilvestrus
0
64
Automatic a11y testing with axe
pinussilvestrus
0
27
Roller coaster mining with Camunda Cloud
pinussilvestrus
0
18
How to break down
pinussilvestrus
0
41
Other Decks in Programming
See All in Programming
実践AIチャットボットUI実装入門
syumai
7
2.5k
Le côté obscur des IA génératives
pascallemerrer
0
130
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.2k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
CSC509 Lecture 06
javiergs
PRO
0
240
私はどうやって技術力を上げたのか
yusukebe
43
17k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
540
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
220
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
230
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
400
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
4 Signs Your Business is Dying
shpigford
185
22k
Designing for Performance
lara
610
69k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Automating Front-end Workflow
addyosmani
1371
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Fireside Chat
paigeccino
40
3.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Transcript
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 <script>
export let view; export let activeView; </script> <div class="wrapper" style="display: {view === activeView ? 'block' : 'none'}"> {#if view === activeView} <slot/> {/if} </div>
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 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 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 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