Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
working on this documentation...
working on this documentation...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Atomico has been designed to be simple even in complex situations, in this guide you will know some patterns that Atomico offers to create webcomponents at an advanced level.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
This guide will know the essentials to start developing webcomponents with Atomico
Thanks for being here and getting started with Atomico. Let's talk a little about what Atomico offers today:
Development agility, Atomico's functional approach simplifies code at all stages of development.
Lightweight inside and out, Atomico allows you to create a component with less code and with a low dependency impact. Approximately 3kb.
Really fast, Atomico has a good performance in the browser and an agile development experience. Let's understand what a webcomponent created with Atomico looks like:
Let's analyze the code in parts ...
What have we imported?
c
: Function that transforms the functional component into a standard customElement.
html
: Function to declare the template of our component, you can also use JSX.
css
: Function that allows creating the CSSStyleSheet (CSS) for our component as long as it declares the shadowDom.
Our component function receives all the props (Properties and Attributes) declared in component.props, the component function declares all the logic and template of the webcomponent. An important rule within Atomico is "every component created with Atomico must always return the tag".
Atomico detects the prop (Properties and Attributes) of the component thanks to the association of the props object, this through the use of index and value allows you to define:
index: Name of the property and attribute.
value: type of the prop.
From the example we can infer that Atomico will create in our webcomponent a property and attribute called message
and this can only receive values of the String
type.
Atomico detects the static styles of your component thanks to the association of the styles
property:
styles accepts individual or list CSSStyleSheet (CSS) values, the return from the css function is a standard CSSStyleSheet, so it can be shared outside of Atomico.
To create our standard customElement we will have to deliver our functional component to the c function of the Atomico module, the c
function will generate as a return a customElement that can be defined or extended.
With Atomico you can do this and more
A micro library inspired by React Hooks, designed and optimized for the creation of webcomponents.
Atomico simplifies learning, workflow and maintenance when creating webcomponents and achieves it with:
Scalable and reusable interfaces: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code.
Open communication: with Atomico you can communicate states by events, properties or methods.
Agnostic: your custom Element will work in any web-compatible library, eg React, Vue, Svelte or Angular.
Hi, I'm Atomico js and I bring you the React syntax for webcomponents, I think you and I get along very well 😊.
Atomico, like React, allows a declaration of components using only functions, example:
From the example we will highlight the following differences:
In Atomico you only use one import.
useProp
is like useState
, but with the difference that useProp references the state from the webcomponent property defined in counter.props
.
counter.props
allows us to create the properties of our webcomponent, these are like React's propTypes, but with a big difference they are associated with the instance and can be read and modified by referencing the node, example document.querySelector("my-counter").count = 10;
ReactDom.render
needs a reference to mount the component, in Atomico you only need to create the my-counter
tag to create a new instance of the component.
The <host/>
tag is similar to <> </>
for React, but <host/>
represents the webcomponent instance and every component created with Atomico must return the host tag
This is only readability, but in Atomico by convention we do not use capital letters when naming our component, these are only used when creating the customElement as in line 16, since Counter
is instantiable.
Ahora quiero invitarte a que conoscas como declaras un estilo usando Atomico.
It is common to see the use of libraries such as Emotion or styled-components to encapsulate styles in React, but these add an additional cost, be it for performance or bundle, in Atomico there is no such cost.
It is normal for React to create components that you then instantiate within other components, for example:
with Atomico there are certain differences:
The constructor in Atomic is the product of the c function and is the one you will use to register your webcomponent, example:
According to the previous example, you can instantiate MyComponent as a JSX Component, example:
This instance type allows autocompletion at the JSX level and type validation at the Typescript level.
This will be useful for reusing templates, but always remember stateless.
Performance: Atomico has a comparative performance at Svelte levels, winning the third position in performance according to in a comparison of 55 libraries among which is React, Vue, Stencil and Lit.
First let's say that Atomico is light since it has a size close to 3kB vs React + ReactDOM that have a size close to 60kB, now if your project is already written in React I can integrate Atomico progressively since a component created can be instantiated as a component for React thanks to , example:
Magical , isn't it?... well now let's speed up your Atomico learning path: