1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25

# Elm-like API sample

This page is a one approach of creating API layer top of ef.js.

## Considerations

### Bundle size or runtime performance

If you going to use this API style, you'll face a trade-off between increased bundle size and function call overhead.
By defining everything as separated functions, there is virtually zero runtime overhead but bundle size would definitely increases.

```ts
import { el } from "@pocka/ef";

export function div(setups = [], children = []) {
  return el("div", setups, children);
}

export const p = el.bind(null, "p");

// Enumerate every HTML/SVG/MathML tag...
```

On the other hand, using `Proxy` object like in this page, would bring performance penalty on every function call, although you can avoid this cost by declaring each tag as a function eagerly (see `main.ts`).
You need to choose based on which approach is best suitable for your project.