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
190
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
Tech Talk: a11y testing at the HTO team
pinussilvestrus
0
19
a11y testing
pinussilvestrus
0
67
Taking Templates to the Limit
pinussilvestrus
0
32
What the $ref - Create composable JSON Schemas
pinussilvestrus
0
50
Automatic a11y testing with axe
pinussilvestrus
0
10
Roller coaster mining with Camunda Cloud
pinussilvestrus
0
14
How to break down
pinussilvestrus
0
15
Move from webpack to vite
pinussilvestrus
0
160
JSON Schema Validation @Camunda Modeler
pinussilvestrus
0
200
Other Decks in Programming
See All in Programming
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
580
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
160
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
4
640
Click-free releases & the making of a CLI app
oheyadam
2
110
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
BBQ
matthewcrist
85
9.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
What's in a price? How to price your products and services
michaelherold
243
12k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Thoughts on Productivity
jonyablonski
67
4.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Statistics for Hackers
jakevdp
796
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Optimizing for Happiness
mojombo
376
70k
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