Vanilla Boot - Developing reusable UI components with Vanilla JavaScript with Eyal Lior
We'll analyze the limitations of popular JavaScript frameworks, the advantages of using Vanilla JavaScript, and how Vanilla Boot offers a minimalist approach to building reusable UI components. The session will cover core concepts like direct DOM manipulation, component-based architecture, dynamic dependency loading, and full rendering control, followed by a walkthrough of Vanilla Boot’s source code and practical usage examples.
Eyal Lior is a Tel Aviv-based software developer with over 25 years of experience, specializing in complex GUIs built with vanilla JavaScript.
## Transcript
1 00:00:02.130 --> 00:00:15.429 Gabor Szabo: Hello, and welcome to the code. Me. Event Channel and the Codema Meetup Group. My name is Gabor Sabo. I personally usually teach rust and python to companies and help companies to start using these languages.
2 00:00:15.770 --> 00:00:23.080 Gabor Szabo: And I have this meeting group, a Meetup group where I usually organize presentations about rust and python.
3 00:00:23.310 --> 00:00:26.109 Gabor Szabo: But this time it's going to be about Javascript.
4 00:00:26.340 --> 00:00:35.859 Gabor Szabo: And so I'm really happy that all agreed to give this presentation, and all the people who joined us in this meeting
5 00:00:36.010 --> 00:00:58.679 Gabor Szabo: feel free to ask questions. Just remember that we are putting it on Youtube. So we can ask in chat if you don't want to be on Youtube. And if you are watching this video on Youtube, then please, like the video and follow the channel and join us in our meeting group. So in our meet up groups, so you'll be able to join in one of our upcoming meetings.
6 00:00:58.960 --> 00:01:00.160 Gabor Szabo: Is that sad?
7 00:01:00.520 --> 00:01:06.620 Gabor Szabo: Yeah, it's your turn to introduce yourself and take over the screen.
8 00:01:06.990 --> 00:01:22.379 Eyal Lior: Okay, so Hi, everybody, my name is real. I am a full stack developer with 25 years of experience lots of experience in doing Web Gui. That's actually where I come from. That's why I have passion for Javascript.
9 00:01:22.510 --> 00:01:41.849 Eyal Lior: I started as a as a web developer web designer building websites when I was a teenager in the late nineties, and that's how I got into the field. So I always loved Javascript, and I loved the flexibility of it, the the reformers of it
10 00:01:42.510 --> 00:01:50.180 Eyal Lior: and and I'll start with a little bit introduction. So you'll see why I developed vanilla boot
11 00:01:51.066 --> 00:01:55.280 Eyal Lior: when when everybody started moving into Javascript frameworks.
12 00:01:55.590 --> 00:01:59.406 Eyal Lior: I was a little bit suspicious about it, because,
13 00:02:00.070 --> 00:02:10.080 Eyal Lior: I like vanilla Javascript. I'm not. I'm I don't like to be constrained, limited, and they felt that this is what the frameworks bring.
14 00:02:10.560 --> 00:02:18.800 Eyal Lior: I had a few years experience working with angular in its earliest versions. Version one and version 2.
15 00:02:19.510 --> 00:02:35.335 Eyal Lior: And so so anybody that has experience with Angle. I was going to be like, of course you didn't like it. It was version one and 2. It was horrible. But now we're in version. I don't know 18 or something, so it's completely different. And
16 00:02:36.090 --> 00:02:44.629 Eyal Lior: and 5 years ago I had, my 1st experience developing a mobile application with the react react. Yes.
17 00:02:44.850 --> 00:02:56.430 Eyal Lior: And since then I developed 3 more applications with React Js. And I reached a point that I'm I cannot handle it anymore and said, I'm not going to develop with react anymore. And I
18 00:02:56.550 --> 00:02:59.770 Eyal Lior: switched a few projects back to vanilla Javascript.
19 00:03:01.030 --> 00:03:16.759 Eyal Lior: Mind that some of my criticism of react is not relevant anymore because it did improve over time. But I'm going to present a project today that's going to enable you to keep using vanilla Javascript to develop
20 00:03:17.372 --> 00:03:31.140 Eyal Lior: applications with components with components just like you would. If you would use react or Anglo, but without the limitations. So let's let me just share the screen and start the presentation.
21 00:03:45.340 --> 00:03:52.620 Eyal Lior: Okay, so you must see. My, you should see my desktop. Now, right.
22 00:03:58.020 --> 00:04:00.150 Gabor Szabo: Yes, we see your whole desktop, I think.
23 00:04:00.150 --> 00:04:06.359 Eyal Lior: Oh, that! That's the vanilla boot website. That's my project. But let me just start the presentation.
24 00:04:09.040 --> 00:04:10.929 Eyal Lior: There it is. So
25 00:04:12.460 --> 00:04:30.180 Eyal Lior: vanilla boot. It's a minimal framework with maximum control, pure Javascript, pure freedom. That's the tagline. It's a lightweight javascript utility designed to streamline front end development without relying on extensive frameworks. When I say extensive frameworks, I mean, angular react view.
26 00:04:30.760 --> 00:04:39.930 Eyal Lior: You name them it enables developer to build application with reusable ui components. Yeah, how's it
27 00:04:40.140 --> 00:04:47.449 Eyal Lior: using standard Javascript and HTML, preserving the flexibility and simplicity of native web technologies?
28 00:04:48.330 --> 00:04:49.180 Eyal Lior: So
29 00:04:50.020 --> 00:04:58.990 Eyal Lior: when I ask people, why do you use frameworks? Because I don't get it like for me, I can. I can do anything with vanilla Javascript
30 00:04:59.370 --> 00:05:01.660 Eyal Lior: with ease, with extreme ease.
31 00:05:01.910 --> 00:05:08.310 Eyal Lior: So for me, it's not clear why people use frameworks, I can.
32 00:05:08.670 --> 00:05:25.839 Eyal Lior: I can guess, make a guess. But I asked people who do push for frameworks for people who I worked with people who are interviewed. Ask them, why do you use frameworks? And these are the 8 most popular answers that I got.
33 00:05:26.400 --> 00:05:33.510 Eyal Lior: The 1st one is the the fear of the free forms of the Javascript. So with Javascript, you can write
34 00:05:33.820 --> 00:05:38.859 Eyal Lior: many parts of code, and and there's no form to it. There's no
35 00:05:38.990 --> 00:05:47.940 Eyal Lior: beginning, and that there's no structural. There's No. 3 like structure for the code.
36 00:05:48.150 --> 00:05:53.166 Eyal Lior: and for someone who's managing a project and is going to give a lot of
37 00:05:53.860 --> 00:05:58.320 Eyal Lior: freedom to developers to to just build it any way they want.
38 00:05:59.050 --> 00:06:23.307 Eyal Lior: It is some somewhat scary, you know. You don't know where they're going to take it. And with the framework it's kind of like binds you to staying with a certain structure. The second thing is, you want to build modular, reusable ui components, and most people don't know how to do it with Javascript. And while it's very trivial and
39 00:06:25.550 --> 00:06:36.430 Eyal Lior: or should I say, it's very straightforward to build ui components with framework. And then there's the virtual dom which means efficient updates and rendering
40 00:06:37.556 --> 00:06:43.993 Eyal Lior: state management. People say Whoa! The framework gives me state management, and
41 00:06:44.820 --> 00:07:13.269 Eyal Lior: it can handle the more complex applications easily. It's easy when it's they, they would say, vanilla is good for small things. But when you have a complete complex app, I want state management and all that stuff built in reactivity, how to update ui on data change, you change the object and the form. Reflects the change to the data. And then there's the routing and navigation of the web app on the client side.
42 00:07:13.730 --> 00:07:25.099 Eyal Lior: And people say there's a rich ecosystem. There's a lot of support for it. There's plugins, extensions, add-ons, and tools. Blah blah! And the cross platform support.
43 00:07:25.330 --> 00:07:43.060 Eyal Lior: So people don't want to be like the old days where they have to test the everything that develop on different browsers and different operating system and the frameworks. It's 1 of the things that they promise. Now you. You might laugh when I switch to the second page.
44 00:07:44.330 --> 00:08:03.270 Eyal Lior: The 1st 2 reasons are the actual reasons. People opt to use frameworks like react and angular. Well, the number one reason is they're afraid of the freedom that Javascript in the browser brings with it, and second.
45 00:08:03.440 --> 00:08:11.231 Eyal Lior: they don't know how to build modular, reusable AI components without framework. Then there's the virtual dom
46 00:08:11.820 --> 00:08:20.439 Eyal Lior: thing that I think that nobody really like 99% of the people who I talk to actually 100% of the people
47 00:08:20.550 --> 00:08:44.109 Eyal Lior: I worked with projects I worked with. It wasn't relevant. State management, not easy at all was never easy. Maybe it's easier today, but certainly in in the previous years it was hell with frameworks rich ecosystem. If you if you if you look at libraries popular
48 00:08:44.624 --> 00:08:52.800 Eyal Lior: mature libraries thing things like aging grid, for example, that gives you the most sophisticated grid
49 00:08:52.960 --> 00:09:18.049 Eyal Lior: for web that you can put in your website or web apps. You can get it for angular for react, for view, for any kind of framework, and also for vanilla. So I think that the vast majority of libraries, certainly the most important ones, are available also for vanilla Javascript. So you don't need to use a framework in order to have those libraries.
50 00:09:19.660 --> 00:09:31.080 Eyal Lior: So let's talk about the state state the complicated world of State.
51 00:09:35.500 --> 00:09:37.566 Eyal Lior: if you want to.
52 00:09:39.220 --> 00:10:09.120 Eyal Lior: actually, you have to use this mechanism of state when you use react. And it's like a technology that you have to learn in order to do very simple things that I will soon show you how you can do it them without react. And we will see what is more simple and what's less simple. So here we have basically a button that says, add, and when you click it, it calls add value, and what it does it, it
53 00:10:09.230 --> 00:10:11.540 Eyal Lior: increments value 2,
54 00:10:11.850 --> 00:10:17.900 Eyal Lior: and then it sets value, one to the value of value 2. So when you read the code.
55 00:10:18.170 --> 00:10:31.229 Eyal Lior: you see that value, one is initialized 7, and we we expect to have the display. Show us Hello, 7. And when you click, it's going to increment value
56 00:10:31.340 --> 00:10:56.319 Eyal Lior: value 2. So it's going to be 4 is going to become 5 and then value one is going to get the value of value 2. So it's going. We expect to see 5. And then, in the subsequent presses of the button, we expect to see 6, 7, 8, and so on. So we start with 7. Then we jump to 5, 6, 7, 8, and so on. But this is not what actually happens.
57 00:10:56.670 --> 00:11:03.850 Eyal Lior: What actually is going to happen is that second?
58 00:11:06.780 --> 00:11:07.950 Eyal Lior: Here we have it.
59 00:11:08.490 --> 00:11:14.830 Eyal Lior: We have Hello, 7. Which is the value of value one. I click it once it says, Hello! 5 as expected.
60 00:11:15.090 --> 00:11:20.209 Eyal Lior: I click again, and it's 5 again, and it's 6 again, and it's 5 again.
61 00:11:20.370 --> 00:11:25.459 Eyal Lior: 5. Again I click. It's 6 again I click it. 5. What is happening?
62 00:11:25.640 --> 00:11:35.580 Eyal Lior: What? What is happening behind the scenes is that this function gets recalled again, everything is restarting.
63 00:11:35.910 --> 00:11:44.009 Eyal Lior: So it's not working as we think it's going to work. And we actually have to learn how
64 00:11:44.190 --> 00:12:11.309 Eyal Lior: what's happening behind the scenes or inside the black box. It's not the black box. It's open source, but no one's going to get into the source code of react. So we have to read a long document to understand how the Use State works behind the scenes. And when does the app being called? And when it's not in order to build something as simple as a counter that increments and integer and prints it.
65 00:12:12.350 --> 00:12:28.770 Eyal Lior: So this code that I've made here it's an example of a very common mistake. It's it has a name, the mistake. It's called reactive state mismanagement, or you can call it state initialization, anti pattern or
66 00:12:29.030 --> 00:12:39.050 Eyal Lior: stale state, an uncontrolled state mutation or redundant state updates so
67 00:12:39.310 --> 00:12:43.480 Eyal Lior: very complicated concepts in order to make something very simple.
68 00:12:45.570 --> 00:13:14.279 Eyal Lior: Now, this is how you would do it without react. If it's just HTML and standard native Javascript, the HTML would say, hello. And then there's a span which is just an element containing anything you put in it. Basically, text, and we can access it by the idea through with the idea of the span. Then there's new line and a button with title 2, and on click, there's an event. Handler, add one.
69 00:13:14.920 --> 00:13:20.389 Eyal Lior: and the Javascript would say this, we have value one initialized to 7 value, 2 initialized to 4,
70 00:13:20.700 --> 00:13:26.650 Eyal Lior: and on the start, on the loading of the page. We're going to get the element full.
71 00:13:26.780 --> 00:13:29.070 Eyal Lior: Do. By the way, do you see my mouth moving?
72 00:13:29.470 --> 00:13:31.540 Eyal Lior: No right. Can you see my mouse.
73 00:13:31.540 --> 00:13:35.110 Gabor Szabo: I I can see, and I'll have a question soon. Okay.
74 00:13:35.390 --> 00:13:52.119 Eyal Lior: And then we set it to value one to 7. Now, when we click the button, we expect Ed one to be called so in increment value 2, we say, value one equals value 2, and the text content of Foo shall be, value one.
75 00:13:52.490 --> 00:13:56.059 Eyal Lior: And let's see how it it's actually working.
76 00:13:57.330 --> 00:14:08.340 Eyal Lior: So this is the Javascript example. See? It's initialized to hell of 7. We click becomes 5, click, 6 clicks, 7, click 8, and so on. So
77 00:14:08.900 --> 00:14:14.160 Eyal Lior: there's less room to make mistakes because there's no
78 00:14:14.380 --> 00:14:21.320 Eyal Lior: complicated 100 pages document to read about how to use state. You don't have state. You just
79 00:14:21.770 --> 00:14:28.339 Eyal Lior: set the variable and set the context, the the content of the HTML element.
80 00:14:29.240 --> 00:14:31.270 Eyal Lior: So you don't need to learn.
81 00:14:31.270 --> 00:14:44.099 Gabor Szabo: I have a question because not I mean, I write Javascript and and stuff like this. But and I definitely not an expert. Why do you use on click? Is is this the
82 00:14:44.430 --> 00:14:51.470 Gabor Szabo: right? That's what you recommend, or or why not attach the event to the document? Whatever.
83 00:14:52.800 --> 00:14:56.740 Eyal Lior: That's the event development. I mean, you can go and attend.
84 00:14:57.158 --> 00:15:07.630 Gabor Szabo: You can. You can write in the HTML on Click, or you can write some Javascript that will attach the click events to the that.
85 00:15:07.770 --> 00:15:22.919 Eyal Lior: Like, if the button would have an idea, I can tell. Get element by idea and then connect the event. Handler. That's that's that's fine, and that's the that's the thing with vanilla Javascript. You have many ways to make
86 00:15:23.160 --> 00:15:40.210 Eyal Lior: things, and people are afraid of it. Some people are afraid of it. I'm not afraid of it, but you do need to have some consistency in a large project. That's true. So the free formness, the free form, nature of Javascript in the browser
87 00:15:40.920 --> 00:15:41.900 Eyal Lior: is.
88 00:15:43.090 --> 00:15:49.664 Eyal Lior: It's a good thing for some people and a bad thing for for others. It's truly a matter of
89 00:15:51.310 --> 00:16:09.650 Eyal Lior: personal preference. But when you, when you work with Javascript vanilla, you don't need to study refs function components. There used to be this thing called class components, and it's not deprecated. But it's not used anymore in react. This was causing a lot of those problems in the past.
90 00:16:10.140 --> 00:16:20.660 Eyal Lior: Higher order components render props, custom hooks, mounting, updating component trees. Lifecycle re-renders use effect, use context.
91 00:16:20.780 --> 00:16:28.410 Eyal Lior: You state all those concepts and and basically all those pieces of technology that you would have to read
92 00:16:28.670 --> 00:16:32.329 Eyal Lior: many, many pages on each one of them to understand.
93 00:16:32.550 --> 00:16:36.340 Eyal Lior: just to make something as simple as a button click that
94 00:16:36.630 --> 00:16:39.680 Eyal Lior: updates updates the data on the document.
95 00:16:41.260 --> 00:17:01.519 Eyal Lior: So the way I see those frameworks is, it's like a if you know the Ruby Goldberg machine, the super complicated machine that that eventually makes something very simple. So you have jsx, which is, it looks like HTML, but it really isn't. HTML, you can't write anything that you put in. HTML in it.
96 00:17:01.670 --> 00:17:22.980 Eyal Lior: and then it goes into the framework. And then you have a piece of code like react, create element and a reference to my button, and in a different way of writing the properties and the output eventually what the framework does it translate to Javascript? So you can write in Javascript or have the framework create Javascript for you
97 00:17:23.300 --> 00:17:27.859 Eyal Lior: that that's what happens behind the scenes. The the framework does this thing.
98 00:17:28.089 --> 00:17:38.680 Eyal Lior: It creates a new element called button. It sets the style to blue. It sets the text to. I'm a button. Click me and then document body append, child. So
99 00:17:39.760 --> 00:17:43.031 Eyal Lior: I say, why have all this big machine
100 00:17:43.730 --> 00:17:48.210 Eyal Lior: generate something as simple as as this simple Javascript.
101 00:17:50.140 --> 00:17:57.810 Eyal Lior: So let's talk about things that you can't do with frameworks which is direct and synchronous dom manipulations
102 00:17:58.340 --> 00:17:59.870 Eyal Lior: inline scripts.
103 00:18:00.570 --> 00:18:05.480 Eyal Lior: Work without the build system like a bundler like webpack
104 00:18:08.230 --> 00:18:14.030 Eyal Lior: and not even getting into typescript global event handling and delegation,
105 00:18:17.340 --> 00:18:23.939 Eyal Lior: accessing and modifying the full HTML structure like the the way it appears in the browser after it's rendered
106 00:18:24.200 --> 00:18:28.290 Eyal Lior: and real time dynamic script and style loading.
107 00:18:29.460 --> 00:18:43.649 Eyal Lior: I wouldn't know. Maybe you can do those things, but you probably have to start to study the framework really good, like. It's not enough that you know how to do it in vanilla. You'll have to study the framework
108 00:18:44.110 --> 00:18:48.509 Eyal Lior: deeply in order to make things that are pretty trivial without the foam, board
109 00:18:48.740 --> 00:18:52.050 Eyal Lior: and custom, event creation and dispatching.
110 00:18:54.690 --> 00:19:02.589 Eyal Lior: And you know, like they they say, focus only on your business and and app logic. And that's what I'm striving for.
111 00:19:02.690 --> 00:19:07.793 Eyal Lior: So let's talk about my project, and enough enough.
112 00:19:08.500 --> 00:19:31.550 Eyal Lior: saying bad things about the frameworks. Let's say some good things about the vanilla book project. It's a non pervasive the guiding. I'm talking about the guiding principles of the project. It is non-pervasive. It's not limiting how you write code, how you write your screens or your modules. You can do anything you could do with vanilla.
113 00:19:31.650 --> 00:19:38.929 Eyal Lior: There's nothing that you can do otherwise with vanilla Javascript that you cannot do when you use vanilla boot.
114 00:19:39.680 --> 00:19:46.929 Eyal Lior: It has a minimalist approach, meaning you don't need to learn the guts of the framework to have full control of your app.
115 00:19:47.600 --> 00:19:51.609 Eyal Lior: It gives you the ability to create reusable components.
116 00:19:51.900 --> 00:19:54.936 Eyal Lior: And one of the features is that
117 00:19:55.560 --> 00:19:58.709 Eyal Lior: it downloads only the components that are being used.
118 00:19:59.258 --> 00:20:09.549 Eyal Lior: You can decide to preload some components in if you want to. Cache them for to have faster loading times but
119 00:20:09.730 --> 00:20:15.330 Eyal Lior: basically you might have an application with a hundred screens.
120 00:20:15.680 --> 00:20:36.419 Eyal Lior: and the user is only using 2 or 3 of them. You don't want to download all the application. So that's 1 thing that the application does that the the vanilla boot does it only downloads the components that are that you need. And I'm not sure that frameworks or the the framework like react, does it?
121 00:20:36.610 --> 00:20:38.330 Eyal Lior: It has this separation.
122 00:20:38.840 --> 00:20:43.169 Eyal Lior: Okay, there's no. J, 6. This is something that I really hated when I worked with react
123 00:20:43.300 --> 00:20:48.800 Eyal Lior: and and not sure if angular is using J. 6 as well, or something like that. But
124 00:20:50.920 --> 00:20:58.260 Eyal Lior: standard. HTML, so this on click thing that you put inside the HTML,
125 00:20:58.390 --> 00:21:07.429 Eyal Lior: this is something you couldn't get away with. If you use J. 6, meaning the thing that looks like HTML, when you develop in react.
126 00:21:07.930 --> 00:21:10.329 Eyal Lior: It's J. 6. It's not the HTML, but
127 00:21:10.580 --> 00:21:20.230 Eyal Lior: you won't use standard. HTML, I like to use standard HTML, so I can use all those and pretty cool little things like on click, or
128 00:21:20.340 --> 00:21:21.070 Eyal Lior: oh.
129 00:21:21.180 --> 00:21:50.640 Eyal Lior: on mouse down, or any kind of thing that you can do in native HTML, I want to preserve those functionality, those abilities. There's no activity, full control of rendering. Nothing happens like we've seen in the example before of React. Nothing happens without you explicitly making it happen. So there's no mystery. Things. Why does it happen? Why does the value reset what's happening? There's nothing gets called behind the scene unless you make the call
130 00:21:52.318 --> 00:21:56.600 Eyal Lior: so nothing is going to go unplanned. Then you like.
131 00:21:56.750 --> 00:22:02.049 Eyal Lior: Well, I have to read a hundred pages document to see what happened
132 00:22:02.740 --> 00:22:27.969 Eyal Lior: this. And there's a simple flow of data between the embedded components. I will show you an example really so real soon. And I've built an example that has a component. And then within it. There are 2 components of the same type, and within each one of them does a child component also of the same type, and they can all talk. They they can all all communicate, and it's pretty simple and intuitive.
133 00:22:28.870 --> 00:22:32.859 Eyal Lior: and there is free form flow of data according to your needs.
134 00:22:32.980 --> 00:22:38.399 Eyal Lior: I don't limit you to a way to make this communication work
135 00:22:40.390 --> 00:22:47.079 Eyal Lior: free form, component architecture, no surprises, nothing to learn, no complex flow required for your code.
136 00:22:47.760 --> 00:22:52.999 Eyal Lior: Every component can be different, fully flex. Full flexibility to this is something that
137 00:22:54.300 --> 00:23:00.180 Eyal Lior: I like to have when I get into building a very complex application is that
138 00:23:00.380 --> 00:23:17.990 Eyal Lior: if I if I know and and I am doing it right now. At work, I I'm building an application that has about more than 150 screens, different screens, different kind of logic and complications. And I don't want to limit
139 00:23:18.499 --> 00:23:23.300 Eyal Lior: or to decide from the get go from the start of the project.
140 00:23:23.790 --> 00:23:30.920 Eyal Lior: How I'm going to build screens in general I don't know. I might get. I might build 30 screens and then
141 00:23:31.648 --> 00:23:39.180 Eyal Lior: bump into a screen. That's really really complicated and has completely different element and needs a different flow.
142 00:23:39.440 --> 00:23:47.940 Eyal Lior: And vanilla boot lets you have like a world of its own in each component. There's no
143 00:23:54.530 --> 00:23:58.540 Eyal Lior: how, how, I don't know how to to explain, but there's no
144 00:23:59.825 --> 00:24:04.289 Eyal Lior: they don't need to. Be like like like one another.
145 00:24:06.000 --> 00:24:11.909 Eyal Lior: Okay, so there's no virtual dom. There's no built in state management like like we talked about.
146 00:24:12.500 --> 00:24:19.558 Eyal Lior: So you don't need to learn the remarks in a walking. I know I'm repeating myself a little bit.
147 00:24:20.410 --> 00:24:23.820 Eyal Lior: The framework is written in short and simple code.
148 00:24:24.090 --> 00:24:31.809 Eyal Lior: There's no stratified object. Oriented hell. It's it's about 370 lines of code. That's it.
149 00:24:31.930 --> 00:24:54.260 Eyal Lior: Right now. I mean, it's a small. It's an early age. It's a it's early stage library. It will grow. But I'm not putting a lot of code in it. I'm trying to keep it minimalist and easy. So even if you would need to look into it inside of the library. It's short, it's simple, and it's not
150 00:24:54.590 --> 00:25:03.220 Eyal Lior: built in in too much of overly designed that you can't really tell. Well, when does this code get called by? Who
151 00:25:04.250 --> 00:25:05.949 Eyal Lior: no transpiling
152 00:25:06.550 --> 00:25:14.950 Eyal Lior: meaning? When when a code isn't transpired, you can just press F, 12 and and debug the code as it is written.
153 00:25:16.090 --> 00:25:23.770 Eyal Lior: So it's easier to investigate the code. In the browser environment. There's no chunking to incoherent little pieces of code
154 00:25:24.310 --> 00:25:31.860 Eyal Lior: and due to no framework as a base and fuel, the dependability
155 00:25:33.180 --> 00:25:40.849 Eyal Lior: and pilties. What is it right here we get long term reliability. So because this is such a small minimalist framework.
156 00:25:40.980 --> 00:25:48.770 Eyal Lior: and most of your code can eventually be even migrated to another library, or you can just
157 00:25:49.390 --> 00:26:00.640 Eyal Lior: move out and leave you. You can migrate from veneer, but really easily, because the code that you write for your application is not
158 00:26:01.630 --> 00:26:04.660 Eyal Lior: built in a very specific way
159 00:26:04.930 --> 00:26:11.829 Eyal Lior: for vanilla boot, vanilla boot give lets you build any way you want your code, your your application logic.
160 00:26:13.025 --> 00:26:16.520 Eyal Lior: So you don't marry the framework.
161 00:26:16.630 --> 00:26:38.999 Eyal Lior: You can leave it or customize it, and you still have your code detached from any kind of logic that you would have if you would use. For example, I use this example because I think 90% of the market use react today when you use react, you build the code around the structure of
162 00:26:39.360 --> 00:26:44.189 Eyal Lior: of those there are components
163 00:26:45.340 --> 00:26:53.760 Eyal Lior: and your code is split and the the flow of data is how a react program expects it to be.
164 00:26:53.940 --> 00:26:58.023 Eyal Lior: And here, rather, it's more
165 00:27:00.200 --> 00:27:07.220 Eyal Lior: you're you're free from this limitation, and you're not marrying the the library.
166 00:27:07.350 --> 00:27:15.230 Eyal Lior: and I want you to keep using it. But but it's I think it's will be much easier to keep being in independent.
167 00:27:16.240 --> 00:27:26.109 Eyal Lior: Okay? So you can create components completely different strategy for each one of them embed. You can embed components in palm components
168 00:27:26.600 --> 00:27:27.514 Eyal Lior: and
169 00:27:29.040 --> 00:27:38.660 Eyal Lior: communicate between components. You can load multiple components again, again, meaning multiple instances of instances of the same component.
170 00:27:38.980 --> 00:27:45.449 Eyal Lior: You can load dynamic javascript or css from any location.
171 00:27:47.151 --> 00:27:51.969 Eyal Lior: Let's let's move on. What about plugins and 3rd party stuff
172 00:27:52.410 --> 00:28:14.129 Eyal Lior: like I said before, there are plenty full of extensions available for vanilla Javascript equal or more than those available for framework. So here's an example of of libraries that I like, and you can use with vanilla Javascript, one js, which gives you actually the ability to create reactive reactive Ui elements
173 00:28:14.675 --> 00:28:17.920 Eyal Lior: without react. So you can, you can actually
174 00:28:18.540 --> 00:28:30.470 Eyal Lior: use Van Js with vanilla Van Js is not mine. It's another project you can like, create dynamically from code. HTML, elements like you would have like you would do with react.
175 00:28:30.770 --> 00:28:35.529 Eyal Lior: So you can add Van Js into vanilla boot.
176 00:28:35.660 --> 00:28:39.459 Eyal Lior: and have all those reactivity abilities
177 00:28:40.080 --> 00:28:50.870 Eyal Lior: in one model in your system or in many modules. But you would not be limited to choose. Okay, I'm I want to activity. So all my application has to be reactive.
178 00:28:51.460 --> 00:28:58.709 Eyal Lior: You can have. There's a project called Vanilla Router, which gives you the same routing mechanism that you have in in
179 00:28:58.830 --> 00:29:11.889 Eyal Lior: frameworks like angular and react ag grid, a great grid technology that I use a lot at work and and for other projects is available for vanilla.
180 00:29:12.410 --> 00:29:31.639 Eyal Lior: W. 2 ui and golden layout, 2 2 very good technologies for building windowing systems in Javascript, where you can have draggable windows that you can put your load your modules in into, and I'm plan. I plan to support them in in vanilla boot. So you can actually
181 00:29:31.850 --> 00:29:33.379 Eyal Lior: very easily write
182 00:29:34.572 --> 00:29:42.620 Eyal Lior: your own components that open inside those windows, you can integrate paypal stripe moment or yesterday
183 00:29:42.790 --> 00:29:47.429 Eyal Lior: digest and data visualization technology. So
184 00:29:48.020 --> 00:29:53.310 Eyal Lior: the idea that you need to use react or angular because they have 3rd party libraries.
185 00:29:53.700 --> 00:29:55.939 Eyal Lior: absolute nonsense. So let's
186 00:29:56.130 --> 00:30:04.859 Eyal Lior: get to the most important part. The example. Here's an example, and and I will. I will show it in a minute. In the browser.
187 00:30:05.020 --> 00:30:06.810 Eyal Lior: What we see in this example
188 00:30:07.150 --> 00:30:12.520 Eyal Lior: is, we see a root component, which is
189 00:30:13.460 --> 00:30:16.229 Eyal Lior: the the whole big black box.
190 00:30:16.610 --> 00:30:22.129 Eyal Lior: and within it there are 2 parent components, and each parent has 2 children.
191 00:30:22.710 --> 00:30:26.890 Eyal Lior: So there are 3 types of components here, there's the root, the parent and the child.
192 00:30:27.130 --> 00:30:32.960 Eyal Lior: and those concurrent instances like we had 2 parents and 2 childs within each parent.
193 00:30:34.010 --> 00:30:45.679 Eyal Lior: and we have here an ordered loader of dependencies. So suppose one of your application windows needs to load many javascript external Javascript libraries.
194 00:30:46.090 --> 00:30:53.209 Eyal Lior: and you need them to load in a certain order one before the other, and you maybe you want to execute
195 00:30:53.350 --> 00:31:04.149 Eyal Lior: some some custom Javascript code after you load some library, and before you load the next one, this is something that vanilla Boots lets you do, and I I show it in the example.
196 00:31:05.710 --> 00:31:13.910 Eyal Lior: Now let me just switch window for a moment and show you the example in the browser.
197 00:31:17.160 --> 00:31:24.950 Eyal Lior: Okay, so this is the live example. Every time I reload it it gets a random column. The random column comes from
198 00:31:25.280 --> 00:31:45.469 Eyal Lior: an external dependency. Now, I'm not going to get into the whole source code. It's not complicated at all. If you can get into the example is, live on the website, and you can do a control U or F 12, and get into the source and and view how it's done, and view how the components are loading. But
199 00:31:46.000 --> 00:31:58.800 Eyal Lior: the thing is, every child component has 2 buttons. Call myself, and call p. 2 c. 1. They they all have call p. 2, parent, 2, child, one. So if I call myself
200 00:31:58.990 --> 00:32:01.250 Eyal Lior: I called my. It says I called myself
201 00:32:01.740 --> 00:32:06.639 Eyal Lior: call myself call myself. Now, if I go here and I say, call p. 2 c. 1,
202 00:32:07.260 --> 00:32:10.510 Eyal Lior: it's going to say, call from child 2.
203 00:32:10.690 --> 00:32:14.159 Eyal Lior: It should say, call from child. Parent one, child, 2.
204 00:32:14.320 --> 00:32:15.510 Eyal Lior: Here it says.
205 00:32:16.140 --> 00:32:33.070 Eyal Lior: Hi, p. 1. i'm c, 1 or Hi, parent one. I'm child, one, and then Hi, parent one, I'm child 2, so we can see communication between the children and the parent and children and children in completely different place
206 00:32:33.990 --> 00:32:35.180 Eyal Lior: in the 3.
207 00:32:36.820 --> 00:32:39.620 Eyal Lior: Let's go back to that presentation.
208 00:32:42.480 --> 00:32:51.970 Eyal Lior: So just I'll get a little bit into the example. So once you want to investigate it yourself, you know what's going on.
209 00:32:52.110 --> 00:32:57.500 Eyal Lior: The 1st the the HTML that you're loading. It's it's called example. HTML,
210 00:32:58.110 --> 00:33:00.470 Eyal Lior: it loads the vanilla book library.
211 00:33:01.220 --> 00:33:07.810 Eyal Lior: It has a div that takes all the width and the height of the screen. We call it example layout.
212 00:33:08.010 --> 00:33:11.289 Eyal Lior: and that's the div where inside everything is loaded.
213 00:33:11.460 --> 00:33:18.579 Eyal Lior: And that's the start of the example. It says, it starts the library and gives it the reference.
214 00:33:18.770 --> 00:33:22.449 Eyal Lior: the to the Div, where we want everything to happen.
215 00:33:22.560 --> 00:33:27.119 Eyal Lior: and then we say, show module, and we pass the name of the module.
216 00:33:27.480 --> 00:33:32.120 Eyal Lior: It's called test grandparent. So basically, there's grandparent parent and child.
217 00:33:32.690 --> 00:33:38.110 Eyal Lior: and we want to 1st load a component called test grandparent.
218 00:33:38.310 --> 00:33:44.369 Eyal Lior: So what the lib. What vanilla boot does is it goes to a library to a folder called
219 00:33:44.650 --> 00:33:59.410 Eyal Lior: that name test grandparent, and it looks for 2 things. This is the the minimal. The minimal model has an HTML file and a Javascript file with the same name as as the folder, and it loads the HTML,
220 00:34:00.160 --> 00:34:07.050 Eyal Lior: and it scans it scans the HTML for divs that have class.
221 00:34:07.260 --> 00:34:35.570 Eyal Lior: The class name vanilla boot component. Whenever there's a div with vanilla boot component as a class. It knows that it's it's a component that needs loading, and it has a name and an idea. And then we go. We say, Okay, the name is test parent. So we go to test parent and load, test parent within test. Parent, you will have the same thing. You'll have a div with the class vanilla boot component, and the name test child. And this is how the child is being loaded.
222 00:34:39.179 --> 00:34:43.920 Eyal Lior: Each component has a vanilla boot component as a prototype.
223 00:34:45.050 --> 00:34:50.050 Eyal Lior: So, for example, if we have the child, this is the the code for the child component.
224 00:34:50.668 --> 00:34:53.109 Eyal Lior: The constructor gets an element.
225 00:34:53.480 --> 00:34:57.909 Eyal Lior: an in an element in the HTML and a link to the parent.
226 00:34:58.150 --> 00:35:00.750 Eyal Lior: and it caused the the
227 00:35:02.680 --> 00:35:08.632 Eyal Lior: the superclass constructor. And then here we see the dynamic loading of of
228 00:35:11.660 --> 00:35:20.370 Eyal Lior: of dependencies. So we're loading a Css file, and then we're loading a javascript. But
229 00:35:20.630 --> 00:35:31.030 Eyal Lior: right after the Javascript is loaded we have an event handle here a function. This will be called after this dependency sample dependency is loaded.
230 00:35:31.920 --> 00:35:39.530 Eyal Lior: and then we have the sample dependency, 2 loaded. Now, if you go to the sources, and you look what it does. Sample dependency dot Js
231 00:35:39.700 --> 00:35:45.730 Eyal Lior: colors of the children in one color. I think it's red or something, and then sample dependency, too.
232 00:35:46.970 --> 00:35:56.619 Eyal Lior: puts a random color to each child. So when the when the example is loading and you see a random color, you know that that
233 00:35:56.730 --> 00:36:01.500 Eyal Lior: sample dependency 2 is the last Javascript loaded.
234 00:36:02.080 --> 00:36:09.690 Eyal Lior: It's kind of like proving the the order of the dependencies and do start is the
235 00:36:09.920 --> 00:36:15.019 Eyal Lior: is a function that is called for every component. When all the dependencies finish to load.
236 00:36:18.140 --> 00:36:21.769 Eyal Lior: we are getting close to the end of the presentation.
237 00:36:23.190 --> 00:36:26.980 Eyal Lior: This is how communication between child and parent work.
238 00:36:27.220 --> 00:36:30.460 Eyal Lior: The component that has a link to the parent
239 00:36:30.780 --> 00:36:43.900 Eyal Lior: can simply call any method you choose to implement in the parent. So I call this method call from child. But this is any method that you would put in the parent component, you can access it directly.
240 00:36:44.190 --> 00:36:49.050 Eyal Lior: and then, once you access it. The parent has the reference to the child instance.
241 00:36:50.440 --> 00:37:00.009 Eyal Lior: So the parent has a function called call from child, and it gets a reference to this to the child and the text that we want to print.
242 00:37:01.660 --> 00:37:12.639 Eyal Lior: and then the the in the parent component you can call a function that you create in the child called parent component, we'll call. This
243 00:37:12.900 --> 00:37:16.959 Eyal Lior: could be anything you put anything, any functions you want to implement.
244 00:37:17.690 --> 00:37:34.300 Eyal Lior: But there is also a mechanism that a utility mechanism that I provide called find component. So if you want to communicate between components without any regard for where they are placed, you just give it the hierarchy. So you say, parent 2
245 00:37:34.660 --> 00:37:42.240 Eyal Lior: CPU, 2 c. 1. So it's the hierarchy of the the idea of the com components.
246 00:37:42.490 --> 00:37:55.110 Eyal Lior: So you can. You, you just every component that loads the library knows the structure, the the 3 of components that that are loaded, and you can access them by just the name
247 00:37:57.550 --> 00:38:01.700 Eyal Lior: final thoughts, vanilla vanilla boot is currently only
248 00:38:01.900 --> 00:38:08.910 Eyal Lior: 370 lines of code. The code is sourced from existing complex and mature projects which serve as repository
249 00:38:09.010 --> 00:38:26.380 Eyal Lior: phone, incremental dismantling and reuse. So basically, this is things that I've used when I built other projects and I dismantled them and brought into vanilla boot to make them more more general and and universal, so other people can use the same mechanism
250 00:38:31.050 --> 00:38:34.900 Eyal Lior: process is carried out methodologically, without haste with each addition.
251 00:38:35.540 --> 00:38:48.125 Eyal Lior: followed by careful observation of user adoption and identification of potential potential the factory needs before further investigation. Right now, it's an early stage project and
252 00:38:50.030 --> 00:39:01.600 Eyal Lior: I don't know where it's going to develop. We'll see who who adopts the project and what feature requests I'm getting. There's certainly things that will
253 00:39:01.930 --> 00:39:11.599 Eyal Lior: that it cannot do right now. I mean, it's not it's not ready to conquer the world, certainly, but for many, many users.
254 00:39:12.110 --> 00:39:24.220 Eyal Lior: for example, if, like me, you are building an application that's going to use be used inside an organization. And it's not going to be a website that's used by millions of concurrent users
255 00:39:24.620 --> 00:39:30.340 Eyal Lior: and most of your applications. Most most of your pages will have one or 2 components.
256 00:39:30.750 --> 00:39:35.209 Eyal Lior: But you're gonna have a hundred or 150 or 200 screens.
257 00:39:35.630 --> 00:39:39.090 Eyal Lior: Then it's perfect. It's perfect already.
258 00:39:39.590 --> 00:39:41.799 Eyal Lior: But if you're going to build a website.
259 00:39:42.300 --> 00:39:49.720 Eyal Lior: and you're gonna have like 50 components all loaded. Once you might want to think about how to
260 00:39:50.130 --> 00:40:09.729 Eyal Lior: pack the components together and not have it load, create 1, 50 or 100 htp. Requests for every component. So the framework is in is in early stage. It's not fit for any kind of use, but it it can be used for most most it projects
261 00:40:10.332 --> 00:40:14.959 Eyal Lior: especially ones that are not for public big websites.
262 00:40:15.190 --> 00:40:16.200 Eyal Lior: It's good.
263 00:40:16.940 --> 00:40:26.410 Eyal Lior: So is it too early to adopt? I would say, no, take it, adopt it. It's really easy and gives you the ability to you. Build in vanilla Javascript.
264 00:40:29.770 --> 00:40:36.459 Eyal Lior: So thank you for your attention, and please visit the website and look at the example. Try to look at the source of it
265 00:40:36.570 --> 00:40:39.409 Eyal Lior: and download it and play with it. And I'm
266 00:40:39.820 --> 00:40:44.440 Eyal Lior: you for any questions, any support that's needed. It's open source.
267 00:40:47.390 --> 00:40:49.249 Eyal Lior: Use it in any way you want.
268 00:40:52.000 --> 00:41:00.040 Gabor Szabo: Well, thank you for your presentation. If there are any questions, then please ask those from
269 00:41:00.260 --> 00:41:02.199 Gabor Szabo: from the people who are here in the
270 00:41:02.570 --> 00:41:07.190 Gabor Szabo: in the presentation. Please ask now. But as we didn't have any
271 00:41:07.520 --> 00:41:10.680 Gabor Szabo: questions during the talks, I guess.
272 00:41:11.760 --> 00:41:12.920 Gabor Szabo: People.
273 00:41:13.220 --> 00:41:18.679 Gabor Szabo: we're satisfied with what what you you said and how you presented it. So thank you very much.
274 00:41:18.890 --> 00:41:26.469 Gabor Szabo: and thanks for everyone who was here at the meeting.
275 00:41:26.720 --> 00:41:40.739 Gabor Szabo: And if you watch the video and you enjoyed it. Then please click on the like button and also follow the channel definitely. So you'll get notified below the video. You will find links to
276 00:41:41.580 --> 00:41:48.165 Gabor Szabo: where to find the the project and and how to get in touch with a and
277 00:41:49.150 --> 00:41:52.400 Gabor Szabo: I think that's it, for now any last words.
278 00:41:52.920 --> 00:41:58.284 Eyal Lior: Thank you for the opportunity to present it. I am very excited about this project, and
279 00:41:59.010 --> 00:42:04.220 Eyal Lior: I think a lot of people will be very happy about it, because it's
280 00:42:04.500 --> 00:42:12.049 Eyal Lior: it becomes hard today to be a vanilla Javascript developer when everybody's using react.
281 00:42:12.310 --> 00:42:16.310 Gabor Szabo: Yeah, I don't use any of the frameworks, so I'll build. I don't
282 00:42:16.430 --> 00:42:26.000 Gabor Szabo: build big things, usually a very lightweight. The the Javascript part. What I I do, but then I usually
283 00:42:26.150 --> 00:42:36.590 Gabor Szabo: either use vanilla Javascript, or or maybe I use Jquery, and but even that is not really necessarily in most cases
284 00:42:36.790 --> 00:42:42.930 Gabor Szabo: so, and thank you very much, and good luck with the project.
285 00:42:43.240 --> 00:42:43.960 Eyal Lior: Thank you.
286 00:42:44.210 --> 00:42:45.620 Gabor Szabo: And bye, bye, everyone.
287 00:42:46.180 --> 00:42:46.930 Eyal Lior: Joe.
Published on 2025-03-13