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
6
a11y testing: tech talk
pinussilvestrus
0
3
Tech Talk: a11y testing at the HTO team
pinussilvestrus
0
39
a11y testing
pinussilvestrus
0
82
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
28
Roller coaster mining with Camunda Cloud
pinussilvestrus
0
18
How to break down
pinussilvestrus
0
43
Other Decks in Programming
See All in Programming
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
500
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
contribution to astral-sh/uv
shunsock
0
530
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Ktorで簡単AIアプリケーション
tsukakei
0
100
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
What's new in Spring Modulith?
olivergierke
1
170
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
460
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Producing Creativity
orderedlist
PRO
347
40k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
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