@jnroji

@EliRP95

Elizabeth Rodriguez

Frontend at Sngular

@EliRP95

Jon Rojí

Frontend at Sngular

@jnroji

Why do I need a component system?

📚

CONTEXT AGNOSTIC

(work in an isolated environment)

search...

 🔎

FILL A GAP

(use slots and avoid overcharging)

subscribe

 ✉️

CONTEXT AGNOSTIC

(work in an isolated environment)

FILL A GAP

(use slots and avoid overcharging)

🔮 Using slots 🔮

DUMMY VS SMART

(don't be a smartass)

SINGLE RESPONSIBILITY

(even if the component is dumb)

subscribe

 ✉️

Iterations are a must!

 🖌

my-comp

my-comp

Input

Output

Output

Lerna

Typescript

PROPS

CONSUMED

my-comp

PROPS

my-comp

username!

my-comp

name: string

PROPS

name!

my-comp2

name: string

PROPS

my-comp3

nickname!

name: string

PROPS

my-comp

name: string

 🎁

 ☠️

PROPS

 🎁

PROPS

Utility types 💖

PROPS

CONSUMED PROPS

my-comp

CONSUMED PROPS

my-comp

{ ... }

Server

CONSUMED PROPS

my-comp

{ ... }

Server

🙌🏻 Contract 🙌🏻

{ name, email, accounts }

CONSUMED PROPS

my-comp

{ ... }

Server

{ name, email, accounts }

CONSUMED PROPS

CONSUMED PROPS

my-comp

{ ... }

Server

{ name, email, accounts }

🖌

❗️

CONSUMED PROPS

http://www.jsontots.com/

https://github.com/vojtechhabarta/typescript-generator

react-redux-typescript-guide

TypeScript 💖 State Managers

Decorators 💖

Decorators 💖

DECORATORS

subscribe

 ✉️

DECORATORS

subscribe

 ✉️

DECORATORS

DECORATORS

Vue https://github.com/kaorun343/vue-property-decorator

LitElement https://lit-element.polymer-project.org/api/modules/_lib_decorators_.html

Angular - Native

React - Use your own

🌟 MAKE YOUR OWN DECORATORS 🌟

OPTIONAL CHAINING

@jnroji

@EliRP95