Ryan Carniato, creator of SolidJS, has been involved in the progress of Marko. He describes it as “built particularly to manage the significant general performance needs of eBay’s platform.” Considering eBay draws 307 million monthly people, Marko can just about certainly manage your use situation.
Let’s commence our exploration of Marko with its component technique. Marko has a person of the most basic component definition and discovery systems still devised. You can see a very simple component definition listed here, a coloration picker. Observe that in the most important index.marko file, there is an HTML element called
, together with a house made up of an array of hexidecimal colors. How does Marko obtain the
The remedy is that Marko begins at the directory the place the component usage is found, then, beginning at the sibling directories, moves up hunting for a /component directory made up of the required component definition. If no such component is found in that app code, Marko will turn to mounted dependencies and scan them as very well.
Be aware that Marko lookups upward, so that directories in independent branches are not knowledgeable of every other. This gives a kind of scoping for the parts.
In our situation, Marko doesn’t have to appear much, mainly because there is a /parts/coloration-picker/index.marko file. (Marko also will load parts from a file with the component title in the parts directory, or a file inside of the component directory with the component title as folder and file.)
If you appear at the /parts/coloration-picker/index.marko file, you’ll see the coloration-picker component definition proven in Listing 1.
Listing 1. coloration-picker.marko
import getDefaultColors from '../../util/getDefaultColors.js'
this.condition.selectedColor = coloration
Let’s just take a closer appear at that class definition. It defines two strategies.
The initial technique is
onInput(). This is a lifecycle technique that receives an input argument, and makes it possible for for modifying the component’s condition (a lot more on condition under).
Observe the input variable. That is a reserved identifier in Marko that resolves to the attributes handed in from the guardian above. Try to remember that the most important component contained a house on the element
colors that pointed to a difficult-coded listing of hexidecimal colors. People are now accessed by the little one component by using the
input.colors house. Properties are absolutely reactive, meaning the technique will ensure that anything dependent on the props will be updated.
The next technique on the class is
handleColorSelected, which is a customized occasion handler. You can see that handler in use in Listing 1 the place the footer is positioned:
Translation: When the
on-coloration-chosen occasion is brought on, simply call the
handleColorSelected technique, passing whichever arguments are present.
State in Marko
State in Marko is comparable to React in that it is anticipated to be immutable, meaning that a person will have to assign a new condition to update a single house. Marko does supply a way to drive-set off an update of condition:
Like in other reactive frameworks, condition in Marko types the inner condition of the component. The reactive technique is responsible for carrying out updates of the UI and other values that are dependent on that condition.
Iterating and boosting gatherings in Marko
Now let’s get a appear at how the footer component does two factors: iterates around the coloration props and triggers its
Listing two. coloration-picker-footer