You might be thinking why Eon on the first place.
Let me tell you,
as a developer, Eon is a web based component framework
designed to build amazing cross-platform UI's.
It's fast, and light
and it provides all the utilities you need to build amazing applications.
Eon is not just a core,
right out of the box
there's a full library of UI Web Components.
But remember,
if you like so, you can also create your own with ease.
Eon has an easy learning curve, since it respects the DOM API
and has no tool dependencies.
This means that you or your team won't have to waste time learning new stuff,
setting up tedious and fatiguing environments and building your code.
Developing with Eon is a breeze.
In fact, it's platform independent.
This means that you could use it with your favorite technologies
and progressively adopted as you go,
without the need of redesigning your workflow.
Listing all what Eon has to offer might be too much for a single video.
But let me show you how easy is to get started doing awesome stuff with it.
Simply import Eon Web Components using the import function and its relative path.
Once imported, you can use them like any other HTML element
and immediately see the results.
How convenient is that!
Now we're going to create a custom element, which is divided in three parts:
style, structure, and logic.
Use the element function to declare the component.
Now, we can add some content to our template.
This could be any valid HTML.
In this case, we'll use just plain text.
Finally, we can add some style to our Web Component.
For now, we'll change its font to cyan.
Now, we import the custom example
and use it declaratively in our "body".
Since everything can become a component itself,
this is how you can split your application in small reusable modules.
Eon has very powerful interpolation engine.
This means that we can bind any kind of data to our template.
In this case, we'll bind text to our template using the curly braces and the "at" sign.
Eon is reactive. This means that any change made to its data will be reflected on the fly
without the need to update it manually.
This means that you'll have more time to spend on what really matters
instead of updating the UI.
Now, we can add some logic to our component.
We'll add a data property named value and use it in our template.
We will also create a function that will increment that value.
Finally, we'll call this function from the button "on click" event.
As you can see, each time I click the button the value gets incremented
This barely scratches the surface of what Eon has to offer
but shows how powerful it is.
Thanks for watching this video.
Remember, there are more tutorials on the documentation section.
Please, stay tuned for more updates!