What’s Exported Fragment in Web Development
TLDR: an exported fragment is a part of the template of component, which can be exported and controlled by the parent, it can help to make simpler web apps with performance and size advantages.
Many UI frameworks have wrapper-components like Content, Actions which perform the role of wrappers, some of them do not have any logic/code. So using it as an independent component looks like overhead.
SMUI and Smelte are some of the most popular UI frameworks for Svelte. Let’s review an issue here.
1. Inflexibility
Let's look at component Card (Smelte):
You can see that you can add slot title and slot media, it’s good, but slots don’t let you change position/order. What if I need slot title after media?Slots just don’t let you do this.
So slots are not so good for such cases and it’s better to use child components instead, which you can place where you need.
2. Overhead
Let’s look at Card from framework SMUI
There are no slots, it uses components (Content, Actions in the example above), so it’s more flexible, but pay attention to what they do:
They just insert one div with class. Is it worth creating a whole component with state and context just to insert one div element? It makes an overhead (memory, performance and bundle size) to compare with just inserting one element.
3. Logical affiliation
Another point is that “inner” components like Card.Title, Card.Actions — they are expected to be used as part of component Card, so by idea they are not independent components as is now. Though it’s not a big problem.
How can it be improved?
All these 3 clauses can be fixed by exported fragment (you can define a part of template which can be exported from component, read more about fragments).
Advantages of exported fragment:
1. Flexibility — you can place it where you want (as a component)
2. Lightweight, it’s just a fragment (not a whole component)
3. It’s inside a main component (it’s a dependent code)
4. It shares a scope with a component (see below)
Exported fragment shares the same scope (the same variables and functions) with a main component, so it can let you make more simple solutions e.g. if you need some communication between main component and fragments.
The example below contains a component Chip which let you places items ChipItem in arbitrary places: version with sub-components on Svelte, version with exported fragment on Malina.js
Let’s compare these 2 ways:
No big difference here, we just call component Chip and insert items inside.
Next is component Chip with Item:
These 2 snippets gives the same result, first one looks more complicated because it has to do some communication (context + store) to share “value” and “index”.
In second example, variables “value” and “index” are available for component and fragment “item” — the same scope, so it doesn’t require any communication and the component itself comes out more simple.
By the way, an exported fragment is more compact — less bundle growth, less memory/CPU usage to compare of creating a whole component.
I checked how fast bundle grows with an exported fragment — I added one more fragment/component and checked bundle size:
Base example, bundle size in bytes:
Svelte: 9170 (3214 brotli)
Malina.js: 4289 (1820 brotli)
Malina.js (fragments): 4110 (1783 brotli)
Example with extra component + 2 invokes:
Svelte: 10616 (3494 brotli)
Malina.js: 4769 (1961 brotli)
Malina.js (fragments): 4485 (1885 brotli)
Bundle growth (brotli):
Svelte: +280 bytes
Malina.js: +141 bytes
Malina.js (fragments): +102 bytes
As you can see, bundle is smaller and grows more slowly with an exported fragment. A brief test showed me +8% of performance.
Conclusion
Exported fragment gives a more flexible way to control a child component, and to move and duplicate fragments of a child component. You can use it when your component (fragment) is just a wrapper or has deep connections to a main component.
As a result, it can give simpler, more compact, and faster solutions.
It’s not a replacement for components, it’s just one more feature for some cases.
Follow Malina.js on twitter if you don’t want to miss benchmark “Vue vs Svelte vs Malina.js” ;)
Links
- Source code of examples
- Online editor (REPL)
- Malina.js on GitHub, on Twitter
- Article: How ‘Fragments’ can help with your Web Development
More content at plainenglish.io
