WEBVTT 1 00:00:00.240 --> 00:00:02.720 You might be thinking why Eon on the first place. 2 00:00:03.000 --> 00:00:03.520 Let me tell you, 3 00:00:03.560 --> 00:00:06.800 as a developer, Eon is a web based component framework 4 00:00:06.800 --> 00:00:09.720 designed to build amazing cross-platform UI's. 5 00:00:09.960 --> 00:00:11.680 It's fast, and light 6 00:00:11.720 --> 00:00:15.040 and it provides all the utilities you need to build amazing applications. 7 00:00:15.080 --> 00:00:16.400 Eon is not just a core, 8 00:00:16.440 --> 00:00:17.960 right out of the box 9 00:00:18.000 --> 00:00:21.080 there's a full library of UI Web Components. 10 00:00:21.120 --> 00:00:21.840 But remember, 11 00:00:22.000 --> 00:00:24.520 if you like so, you can also create your own with ease. 12 00:00:24.560 --> 00:00:29.600 Eon has an easy learning curve, since it respects the DOM API 13 00:00:29.720 --> 00:00:31.760 and has no tool dependencies. 14 00:00:31.920 --> 00:00:35.000 This means that you or your team won't have to waste time learning new stuff, 15 00:00:35.120 --> 00:00:38.160 setting up tedious and fatiguing environments and building your code. 16 00:00:38.200 --> 00:00:40.200 Developing with Eon is a breeze. 17 00:00:40.240 --> 00:00:42.680 In fact, it's platform independent. 18 00:00:42.720 --> 00:00:44.920 This means that you could use it with your favorite technologies 19 00:00:44.960 --> 00:00:47.160 and progressively adopted as you go, 20 00:00:47.160 --> 00:00:49.160 without the need of redesigning your workflow. 21 00:00:49.200 --> 00:00:52.200 Listing all what Eon has to offer might be too much for a single video. 22 00:00:52.320 --> 00:00:56.000 But let me show you how easy is to get started doing awesome stuff with it. 23 00:00:57.040 --> 00:01:03.040 Simply import Eon Web Components using the import function and its relative path. 24 00:01:07.040 --> 00:01:12.320 Once imported, you can use them like any other HTML element 25 00:01:13.400 --> 00:01:15.400 and immediately see the results. 26 00:01:15.560 --> 00:01:18.040 How convenient is that! 27 00:01:18.840 --> 00:01:21.840 Now we're going to create a custom element, which is divided in three parts: 28 00:01:22.840 --> 00:01:24.840 style, structure, and logic. 29 00:01:25.600 --> 00:01:28.680 Use the element function to declare the component. 30 00:01:29.760 --> 00:01:32.080 Now, we can add some content to our template. 31 00:01:32.240 --> 00:01:34.680 This could be any valid HTML. 32 00:01:34.920 --> 00:01:37.800 In this case, we'll use just plain text. 33 00:01:38.320 --> 00:01:41.560 Finally, we can add some style to our Web Component. 34 00:01:42.360 --> 00:01:45.280 For now, we'll change its font to cyan. 35 00:01:47.480 --> 00:01:51.360 Now, we import the custom example 36 00:01:51.880 --> 00:01:54.840 and use it declaratively in our "body". 37 00:01:56.360 --> 00:01:59.040 Since everything can become a component itself, 38 00:01:59.040 --> 00:02:03.120 this is how you can split your application in small reusable modules. 39 00:02:03.960 --> 00:02:06.680 Eon has very powerful interpolation engine. 40 00:02:06.960 --> 00:02:11.040 This means that we can bind any kind of data to our template. 41 00:02:11.120 --> 00:02:16.800 In this case, we'll bind text to our template using the curly braces and the "at" sign. 42 00:02:20.040 --> 00:02:26.080 Eon is reactive. This means that any change made to its data will be reflected on the fly 43 00:02:26.120 --> 00:02:28.120 without the need to update it manually. 44 00:02:28.720 --> 00:02:31.160 This means that you'll have more time to spend on what really matters 45 00:02:31.200 --> 00:02:33.000 instead of updating the UI. 46 00:02:34.560 --> 00:02:37.040 Now, we can add some logic to our component. 47 00:02:37.720 --> 00:02:41.960 We'll add a data property named value and use it in our template. 48 00:02:45.440 --> 00:02:48.880 We will also create a function that will increment that value. 49 00:02:53.200 --> 00:02:58.080 Finally, we'll call this function from the button "on click" event. 50 00:03:02.960 --> 00:03:07.080 As you can see, each time I click the button the value gets incremented 51 00:03:07.440 --> 00:03:10.600 This barely scratches the surface of what Eon has to offer 52 00:03:11.000 --> 00:03:12.840 but shows how powerful it is. 53 00:03:13.160 --> 00:03:14.960 Thanks for watching this video. 54 00:03:15.080 --> 00:03:18.120 Remember, there are more tutorials on the documentation section. 55 00:03:18.160 --> 00:03:21.120 Please, stay tuned for more updates!