Everybody, you welcome to my talk. And my name is Akwemiko Dsu and I'm really excited to be doing this with everybody right here. Really excited to be having this talk today because it's my first in a very long while and here I am doing what I love to do again and find it really exciting, very interesting stuff to do today. I'll be talking about something really cool, but before then I'm super excited because this is my very first talk in the past one and a half year already, and really excited to be doing this in this kind of event. I mean, conf 42 Engineering Chaos 2024. Very excited to be doing this with everybody alongside the other amazing speakers doing this. And I really want to give a round of applause to everyone who organized these events and making things work out together here. So here in this talk, it's going to be fascinating and it's really great talk for people love to use react and then explore so many different technologies that works around react and different tools for accessibility with react and all that kind of stuff. Yeah, I think this talk is for you if you're looking to put out something real good for creating stuff seamlessly, I mean, react application seamlessly. So yeah, we would love to now get into the next part of this talk. And yeah, here's just a bit information about myself. My name is Okamiko, I'm just 18 years old and this is something I've been doing for, I mean, keynotes speaking. It's just been something I've been doing for the past four years. And I am just 18, like I said. And I have been a devil practitioner since the past four years already. And one X IBM champion for developers in 2021 of the youngest at the point, and also started coding at the age of eleven. Then I transitioned into devil at the age of 14. But I really do write a lot of code. I'm a very big fan of react next and I'm a very big fan of them. And these are technologies I use in my day to day life. And I really do not have a life outside of tech, as people say. I mean, my friends tell me I don't have particularly a life outside of tech, which is something I think I find very interesting because this is what really keeps me fun. And yeah, you can find me on any social media core of Lagos is in the Andu Koda of Lagos and on LinkedIn. You can check me open. And yeah, I'm nigerian and I'm an unemployed devil. So if you're potentially looking for a devil I can be one for you to hire. So yeah, let's get into the main stuff for today and before you get into this talk, before listening to this talk, I mean there are definitely some things you have to know and these are really important things like crucial stuff like you need to know before or while listening to this talk. You need to have a basic knowledge of JavaScript, how to use JavaScript, and not just how to use Javascript but architecture and all those kind of stuff like how it really works and just the basic things. And you also need to have some experience with using react libraries like Chakra Ui or CSS libraries like Chakra Ui, Towind, buluma, all this kind of stuff like everything, not essentially everything, but you can just pick one to work with because in mysmuild you can use any CSS library to you can work with any CSS library, literally. And also Javascript libraries like react in this context. You need to know how it works, how to use this, because it's really essential to be very honest. And that takes us to the next thing which we have is the key points from this talk. Like what are you going to learn from this talk? I mean in your head you may be wondering, okay, what am I going to take off this talk, what am I going to do after listening to this guy and stuff like that? But first thing is you're going to learn about the architectures of Mysmail, how it was built, where everything runs on like the basic components that makes up mytmail, just everything entirely like on the interface or like the visual development environment which I call the studio. And also you'd get to learn what you can actually do when using mighty mail. Like what can you build using mighty mail and all that kind of stuff. So yeah, that is really all about this in this context. And yeah, let's get to the next. So I mean you may be wondering, I've been talking about mighty mailed. Mighty mailed, mighty mail. What is mighty mailed? What is really mighty mail? So mighty mailed is actually visual development tool for building react applications seamlessly. Because in this context you don't have to write code, it's what you build is what you get. So what you really have to do is just do your things on your own and just drag and drop edit the components, this and that. That's all you have to do when you're using Mightymeld. So it's actually used by react developers or I mean people who don't even have prior experience using react. So it's brought so much accessibility that even if you understand react or even if you barely even understand react, you can actually use it because it doesn't need you to understand all that code and stuff. But I mean, you need to understand the framework you're working with. You need to understand that 100%. And so you don't just make mistakes. So here's the next thing. These are just the basic things that makes up Mightymeld mail. And now we're getting our hands really dirty into the entire architecture of Mightymeld mail because there are three things that makes up mighty mail. And let's just find out. First is the studio. The studio, I call it the visual development environment. And I mean, you still get to learn a lot about that in this talk. The next is also describe. And in this context we're talking about describe as one of the major parts of Mighty Mail. I mean, with the scribe, it's just the main part of everything, India architectures and also the envoy. Envoy is also very essential, but not as essential as scribe is in this context. And yeah, like I said, first thing we'll start with scribe. Scribe is the art of the entire, like Mightymeld mail architecture. Because without describe, communication won't flow well. Without describe, so many things won't work well. And I mean, scribe is in control of, it's just in charge of code generation and updates. When you make a component, when you drag and drop a component and you try to edit and all that kind of stuff, it's all undescribed to actually edit or, sorry, it's all undescribed to actually make so many updates locally and do all that kind of stuff. Then next it's just the main parts of the project, like adds communication with the envoy and sends the communication directly to the studio. So everything is all on scribe in terms of communication and the main part of the project. Now we have envoy, which is literally like very one of the most crucial parts. But I don't think as crucial as scribe. But when you're talking about architecture, you don't leave any part of architecture behind because you don't leave any components behind, rather because you have like three different things in this context and one can do without one and one can do without one. But what I'm just trying to say is scribe, in my opinion, is what I feel like is the most important out of the three. The envoy also provides like mysmail plugin and all that kind of stuff, but it's also really essential. And without this, you can't even launch your application. You can't manage your application very well because this is actually in charge of all these things. And without the envoy, you won't actually see so many things working well. You won't see so many things working well in terms of like the mytemail plugin. Without the envoy you don't get the mysmail plugin. And which, if you don't have all these things, you can't launch your application. Your application will start well, it won't start at all. And yeah, that's just the basic thing about the envoy. And so next, let's just get our hands like a bit dirty, not even a bit dirty, but I mean very dirty, but not for too long. So thank you. So here is just some more explanation on the studio and the envoy. Sorry, and describe an envoy. And of course, the envoy is literally lightweight because it has a lot of responsibilities in it, but it was actually compressed, it was actually compressed to be lightweight because of so many responsibilities on it. Right. I mean, the hand boy just make things real seamless for its users and provide great user experience and developer experience for its users. I mean, it was compressed to be lightweight. And this actually works directly with the scribe to send communication directly also to the studio. And this scribe, as I've always said, serves as the functionality of the entire project. Without the scribe, this is not working. That is not working in terms of the functionality and in terms of code generation and this and that, everything is not really working. So scribe's communication with envoy actually relies on just two things for the communication. It relies on HTTPs and secure sockets in this context. And these things are just used for the communication between scribe and envoy. Right, in this context. So that is just it. And like I said earlier on, this envoy has something really attached to it, and the only thing attached to it is the browser API, which is directly in the plugin and all that kind of stuff. But let's just move into the next part. And as you can see, the studio is what I literally call like the visual development environment. And without this, you are not seeing anything related to my email. And to be honest, in this context, this is the only thing you interact with as a user, right? This is the only thing, basically you interact with as a developer, a person trying to use mightymeld, this is the only thing you interact with. This is where you get to drag and drop edit all these things, but it actually sends some communication directly to describe for code generation, for the code update and all that kind of stuff. I mean, some people actually see my email as a code generation too, but it's not exactly a code generation two. Don't misquote them. Sorry, don't misquote like the fact that it's a code generation two at all. It's not even a code generation two or anything similar. It can only be, right. But it is not because it provides a different service, it provides a different thing. If you want to use it as a code generation too, you can, but that's not the aim, right? So this is just everything literally about the studio. It helps to send all the things to scribe, like the updates to scribe and then scribe provides the updates right in the code base locally. Right. So what it just does is the operations and it requests to the LLM which tries to update the code. So that's just really everything about the studio. This is just where you have everything done and right in the studio, you can see the browser, you can see everything. You can see your layout of your application and everything, right? That is just everything literally about the studio. Now, this is the mighty melt plugin. The mighty melt plugin is attached, right to the envoy. And without this mightymeld melt plugin, trust me, your application is also not running because this is actually something attached right to the envoy. And without this, you don't get to see so many things you see on this studio, for example, like the browser and everything, because everything just works with the browser API. But yeah, there is just a couple of information about this Mytmail plugin. I mean, the Mightymeld melt plugin is attached to different technologies. I mean, you can use this in next, you can also use this in reacts. You can use this in so many, you get to see them at the end of the day. So it just lets you do so many things and get all the features you're looking for in my email and everything. Basically, envoy provides this browser API, right? So everything is all on this mightymeld plugin. And it's just actually insane how this plugin works. But without this, your application is not even starting. So next, Mightymeld melt plugin. So now you can see like the SWC, SWC remix, react and everything. These are just technologies you can actually use with react. You can actually use in Mightymeld mail. You can have your mighty mail plugin embedded into certain technologies. You can actually have all these things really working with. So you're adjustless technologies. So next, Mightymeld mail just lets you do a lot of stuff without writing a single line of code, like just lets you do this do that without even writing a single line of code. And it's actually insane how it works. It's insane. Very insane how it works. But it's just the greatest advantage. And this is why I think people really do miss core, like Mightymeld mail as a code generation, too, which is not. But yes, that is just really everything about Mightymeld mail and its entire architecture. So you can feel free to connect with me on YouTube, okomikosta, Twitter, or any other social media platform. Core of Lagos, using the Andrew core of Lagos and LinkedIn. Of course, my name Opemipo Disu. And if you're looking to hire me, you can do so. Thank you very much for watching my talk and joining in. So I hope to see you, I hope you get to see me in my other talks. And thank you very much. And have a nice one.