Tech Talk: Create varied applications with Svelte

Camunda Tech Talk 18th August 2020

Transcript

1. Create varied applications with Svelte Niklas Kiefer - Camunda Modeling @lutki95 @pinussilvestrus
2. 2 What to get from the next couple of minutes? Why varied applications are important How to use dynamic components How to use variant toggles How to use noop functions How to build this stuff with Svelte
3. 3 Svelte
4. 4 Svelte
5. 5 Svelte
6. 6 Why has my application to be varied?
7. 7 Varied application Web Application
8. 8 Varied application
9. 9 Varied application Web Application Component A Component B Component D Component E Component C
10. 10 What if some components change with different variants of my application?
11. 11 Varied application Web Application Component A Component B Component D Component E Component C n Variants of Prototypes Components differ in certain aspects
12. 12 Example: RPA Prototype Variant A Variant B Variant C
13. 13 Do I have to copy paste my full application???
14. 14 Dynamic components Web Application Component A Component B Component D Component E Component C n Variants of Prototypes Components differ in certain aspects
15. 15 Dynamic components Web Application Component A Component B props.componentD Component E props.componentC n Variants of Prototypes
16. 16 Dynamic components Web Application Component A Component B props.componentD Component E props.componentC n Variants of Prototypes Variant A Component C Component D Variant B Component C Component D Variant C Component C Component D
17. 17 How do I toggle the variants?
18. 18 Variants Toggle Web Application Component A Component B props.componentD Component E props.componentC n Variants of Prototypes Variant A Component C Component D Variant B Component C Component D Variant C Component C Component D Variants Toggle
19. 19 Variants Toggle
20. 20 What if my Variant C don’t have a representation of component D?
21. 21 Noop components / functions Web Application Component A Component B props.componentD Component E props.componentC n Variants of Prototypes Variant A Component C Component D Variant B Component C Component D Variant C Component C noop Variants Toggle
22. 22 Noop components / functions “Instead of using a null reference to convey absence of an object (for instance, a non-existent customer), one uses an object which implements the expected interface, but whose method body is empty. “ -- Null object pattern (Wikipedia)
23. 23 <Demo />
24. 24 Summary • Use variants to demonstrate different solutions of a problem in your application • <svelte:component /> offers an easy-to-use slot mechanism for customizing your application • Use the Null object pattern to ensure your application won’t crash
25. Thank you! Any questions?