RX 24 - Project Helix: Taking Lava to the Next Level - Jon Edmiston

Transcribed Content

Okay. You guys ready? Alright. Well, this has been the presentation I've been looking the most forward to at RX, But truthfully, it's the one I've been able to walk through the least for Rx. So this is a new project that we've been working on at Triumph. We call it project Helix. It's been kind of an experimental project that we've been working on for about like eight months. Have you ever, when you're working on an idea, you know how like 70% of the idea is going work but does that last like 30%, you just can't figure out and it keeps you from doing anything? I've had some ideas for many years on how we can add to lava but there's been a few things I just couldn't figure out. Well, it was right before Christmas, I'm going through Hacker News, I have a little app that goes through Hacker News and I just quickly skim for new things and something caught my eye and I just kept going and then there's something in my mind, no you need to go back to that. I don't know what that said. I thought it said something about HTML or something. I'm like, I need to go back and read it. And when I read it within like three minutes, like everything had unlocked of all how all these ideas can work. So I'm gonna move fast. There's a lot to cover. Don't worry, there's documentation. So we'll go through that. This is still like an experimental phase. It's really a next generation of what I believe Lava can do. How many people in the room were writing Lava before the entity command and before the SQL command? Yeah. So you know what it was like back then. You did think it was pretty cool, like we thought we were kings, right? But when the entity command came out, we felt like, oh, how did we live before this? I hope this is that. So my goal and it's a high goal and you can judge it at the end, my goal is that I want you to think of what you can do with lava today. I wanted to kind of remind you of this scene. There's audio too. The audio adds something to it. Okay. If I want to keep the audio up and my other goal is that when you leave the room that you'll feel like what you'll be able to do in the future will kind of remind you of something more like this. Yeah. I think it's going be transformative of what you can do with Lava. So you might be asking yourself, Lava, what's wrong with lava? Lava's amazing, and it is. We're not trying to diss on lava. I love lava. I love thinking about lava and adding new things to lava, but problem with lava, if we're fair, is it's very static. You get one chance with your lava, it gets run and then presented and then until you reload the page, you often don't get to do more. So it's not interactive. How do we make Lava interactive? That is without the dreaded JavaScript. Like who likes JavaScript? Yeah, there's a couple in every crowd. Yeah, there's a couple in every crowd. But if you don't want to learn JavaScript or you don't want to have to use JavaScript, that's the key of what we wanted to provide. Okay. So before we can go forward, we have to go back to the future. We're going to take a little brief history because some of this is theoretical and I think it's really important to understand the theory of some of this. We'll go back to the future. Quick warning, the flux capacitor is a very powerful tool. It can light cities. Nuclear energy can light cities but what else can nuclear do? Blow it up. Yeah. So we're about to give you a very powerful tool that is very dangerous, so responsibility must be had. It's the truth with lava today, but it's even more so with this. So please pretend that this is not without some safety precautions. We are definitely handing you a loaded gun with no safety and you have certain responsibilities now with that. Okay. So enough of that, let's hop in our time machine and let's go look at the history of HTML. I feel very lucky to have lived through the history of HTML. This is what I would call the definitive, totally objective, roller coaster ride of HTML enthusiasm. So 1993, we get first v one of HTML. We thought again, we thought this is amazing, is so powerful yet so easy, this is great. And then you know, okay, well we kind got used to it, where's the magic? They came out with two point we're like awesome, this is great, we have new things. And it kind of went down, kind of waned again. Then we got three and this came with CSS and we thought this is really cool. But then we're like, I don't get it. CSS, how does that work? When we first saw CSS, those of us back then, we just didn't get it. What was wrong with our table layouts? Like tables, we could just nest the tables and it just worked. We don't need the CSS. Version four, we figured out, oh, that's how you CSS. Got it. Got it. Got it. Got it. We hit our first desert. Like from version four, took a long time. We didn't get anything new. We're like, oh HTML, that's great. Now we have to learn JavaScript Java, all these other things to do anything fun. And then the promise of removing of the blank tag. That kind of excited us for a while. They took away that blank tag. Great. Except we kind of missed it after they took it away. It's like, I actually maybe I kind of liked it. And then HTML five's coming out. We got so excited, HTML five, and then we realized, well you didn't really do anything except create another couple little tags that for most of us don't even use. So we hit another desert. Now what's interesting is there's a college professor in Montana who came up with some concepts about how we could have taken HTML to the next level, how we should have how what HTML should have turned into and that's what we're talking about today. A piece of it, the unlock piece piece which is called a technology called HTMX. This is like the dream of where HTML should have gone. The innovation of HTML should have gone. There's a website you can go to. It is a JavaScript library, the key is you don't need to know anything about it. We've handled all the details in the JavaScript for that. But this is a great website to go to for documentation. He also wrote a book on hypermedia systems. This gives you some technical knowledge but more importantly it gives you the theory of what he thought HTML should have turned into. Now I don't think it's too late. I actually think he's onto something and I think the HTML bodies will eventually adopt some of this stuff. Unfortunately, if I'm being honest, he's a brilliant man but he's also a bit of a jerk online and he's really not endearing himself to the standards bodies so that's going be little bit harder. There's actually a brand new e book out about HTMX. If you go online you're going find a lot of people who love HTMX and you're going find a lot of people who hate it. People who hate it are usually the JavaScript gurus so you know, they can just take and leave it. So what do we get? We get the power of JavaScript without the JavaScript. Okay? So let's look at a quick demo. Sorry, I'm going to have to control from over here and view over here. How many times have you wanted to have a site kind of like this? You have a series of articles maybe and you want to have a little modal pop up, that's a Bootstrap modal so it didn't really take me anything to do that. I just have to use the Bootstrap markup and it just works. And every time you click on another article, it brings up different information. Now notice there's no page reload, it's just loading more content. You could do this today but you'd have to load all that content on page load and if you had hundreds and hundreds of articles, that probably wouldn't work out. We're dynamically going back and getting different running lava several different times when we do this. So you might say, how does this black magic work? So here's the markup. Can you read it all? No. So we're going to zoom in PowerPoint. There's no magic here. It's just a content channel and all it's doing is it's loading the little cards onto the page. Okay? And then we have our Bootstrap modal down here with no content, just waiting to get its content. The magic is right here. Here's our button. So it's just a Bootstrap button and basically what it's saying is when I click on it, the click is the trigger for this, we're just putting attributes onto our button. When I click on it, I want you to go make an HTTP get to this endpoint and whatever it returns, just replace the target here. Put that content wherever this ID is. So if you notice this ID matches this ID, so whatever HTML comes back from this endpoint, just put it here and we're done. The rest of these two data toggles are for Bootstrap. So it's pretty simple. When I click, go to that endpoint, get the HTML, I don't know anything about it and put it right here. So it's all HTML based, no JavaScript and that's all it takes. Now you might be wondering okay what what unholy magic is back here? Yeah, there's none. It's just lava like you know. Nothing magic. There's no This is plain old lava. Right? So what are you thinking? I'm hoping you're kind of thinking like this. That that's what I thought. Was like, that's it? The unlock is how do I make Lava interactive without having to know JavaScript? It's that simple. Now there's so much more to it. You might be wondering, wait where is that lava coming from? How are making that HTTP method? Oh I bet you're using the lava webhook. Anybody uses lava webhook? It's kind of cool but it's not very powerful and it's not very fun to use. So what we've done for you is we've created this new capability, we call them Lava Applications. So Lava Applications is a model that you can create and it has a slug. The slug in this case is group toolbox. And then it has a series of endpoints. So we're basically just calling these endpoints. So in this case the endpoint would be something like group toolbox slash my groups and the HTTP method is get. So there's really not we made a more powerful Lava webhook with a lot more features because as you can see, you can secure this in a lot of really neat and creative ways. You can't really secure Lava webhooks very well. This solves all of that. And it's very easy. Like this is what you would do to define an endpoint. You just basically put your Lava template right here and then you give it what Lava commands are available. So this is like Lava webhooks plus plus. Does that kind of make sense? Seems pretty easy, right? Okay. Now to help you out, you're like okay, what about this htmx thing? You talk about this htmx thing, what do I have to know about that? I see the attributes but that can't be it. And you're right, there is a block that we're using here. You could do this all in the HTML content block if you'd like but you'd have to make a script reference to HTMLX. Pretty easy, one line of lava. But we've actually created a block that does it all for you and actually adds a few little other niceties along the way. Okay? So we saw one demo, let's just take a look at another demo. Okay this is a search demo. Have you ever wanted to be able to search, you know how like the cool kids with no JavaScript as they search like things are automatically showing below it? But in Lava we can't really do that, we have to like type and then hit a button because we don't know, we don't like JavaScript. We might know it but even if we know it, we don't like it. Except a few people in here. Sorry I cannot see my mouse. Have you guys seen my mouse? Oh there it is. Okay. So we're gonna type here. So if I type like AI, notice I start getting search terms that say AI. If I change that to Rise, I get the article that has Rise in it. So I get like active search without having to know any JavaScript. So let's take a look. Again, how does this work? Well this is how it works. That's the HTML to start with. So it's just an input. Remember when I started out, was just an input, right? So here's my input, give it a little name of q because that's what queries a lot of times we use that pattern. Give it a placeholder. In this case I say the trigger is when the input is changed and delay for five hundred milliseconds. So if the person is typing, don't keep making a request but as soon as they stop typing for five hundred milliseconds, that's a change. Go make this HTTP post. In this case, I decided to use a post not a get. It kinda doesn't matter but you know, for best practice this is probably more of a post. And I guess go call this endpoint and the target is gonna be the ID of the div named articles. So it just takes all the content that came back from this endpoint and just replaces it right there. It's pretty easy. Right? You guys getting it? Now you might be wondering, okay, what is this other thing? What's this search? That's just a special thing for search boxes. If you read the documentation it'll unpack it more but there's really no magic, just put search there and it's fine. So you might be wondering, okay, what about the server side? Let's take a look at that code. Again, there's no real magic to this. Just an entity command and we're just for looping across it. Nothing magic. Okay, let's take a look at another demo. Have you ever wanted to do infinite scroll? Like you want to like load a few things and then as you scroll down you do more but you don't like to do JavaScript so you don't want to do JavaScript. Well now you can just go, this is so easy, you JavaScript guys are wasting your time. If you look at the cursor you can see it's like getting bigger, infinite scroll like super super fast and no JavaScript, all lava. Okay. Let's look at the code. Oops, sorry, gotta go back to PowerPoint for that. Well that's what we start with. It's just a div that says, hey, let me just zoom in on that. That trigger says on load, call this which is going to get my first batch of articles. So I've chosen not to preload any articles. You could do that, you could bring down the first five or 10 with the initial page load. I'm getting me a little lazy. I'm just saying hey no, When this page loads, go get the articles from page one here and just swap it with the div. I can't see it that far. What does that say? Yeah. So there's a div down there called that and we're just going to put that content inside there. Okay? Now the server side is it's not hard, it's just a little bit more. Sorry, unscroll before we go forward. There's no magic here, okay? At the top we're just going get our page number and we're going to increment the page number by one and we're going to go do an entity command to get all the articles that we want that are between for our page. And everything else is just HTML except there's this one other bit of HTML I'm going to put here and it's going to say hey, if this is the last item on the page, add these attributes which is basically putting the same callback to this reference and just incrementing the page number and the trigger oh snap. Going back. Someday I'm gonna learn to bring an extra monitor. No. You think I would learn no. There we go. Control, now pull. So trigger, reveal, so as I scroll down and that bit of HTML is now revealed onto the page, that's what's going to trigger it. That's what gives me the infinite scroll capability. So far do you think you guys could do this? It's so easy, it almost seems like, wait, there's something else to this. It must be harder and it's not. It really is that easy. Okay. So now what if what if what's the other limitation of Lava? It's not interactive but what also can't you do with Lava? Yeah. What if you could update data with Lava? I've always wanted to do this but you know what, why I never did it was because like well how do you make the page interactive to actually hit the save button and go back without reloading the page because that's not a pleasant user experience. Well we now bring to you the modify person command or what I should say, modify entity command. Because this is just an entity command that you can modify data. So at the top I'm just gathering bits of information that I want to save. I'm saying hey go load person ID 12. The property nickname, give it this value. The property connection status value ID, give it this property. And the attribute employee employer should be this value. So here we can update not only the properties of the entity but also their attributes and the attributes would just be their raw value. So now you're starting to see how dangerous this could be, right? Yes. So does that blow you away? I'm guessing many of you are probably kind of I gotta unscroll one more level. That's kind of how I felt when it unlocked. Was like infinite power. Is that how you're feeling? A little bit. Okay. It gets better. Okay. What about validation? What if that save didn't go quite right? Well we also have this validation down here that you can add that says basically if if the modify did not work, if there was an issue, it'll give you validation messages down here that you can then do whatever you want with. You can pass it back, you can do all kinds of stuff with the validation. Okay, we're going to pick up pace because we are trailing behind. What if sometimes you have to make two modify entity commands? So say you need to take a person and you want to put them in a group but you have to create the group first. Right? So here we are up at the top creating the group. Now if I pass it an ID of zero, we go, well, that's saying don't load the group, just make a new one. So zero is like the magic. If you pass it the ID of zero, we know go create the group and then we create the group member and put the person in it. What happens if the group creating the group is successful but there's a validation issue or business logic issue on the modified group member? Well now I have a group and I failed on creating the group members so now I have this group just hanging out there that I didn't even really want. Well that's why we created this DB transaction. So if anything fails inside this DB transaction it rolls back everything that was added. So this gives you roll back capabilities. Yeah, we thought of a lot of this. Now to be honest, some of it was thinking after we tripped on it and realized, how's that gonna work? It's not like we go into this going, what we need is all this. No. We I'll be honest. We we trip. Okay. So let's take a look at what we can do now with what we just talked about. Okay. So here's my little here's my little form. So I got Ted Decker, email address and his employer. I can hit edit. Oh, someone's been messing around in here. That's okay, we'll just clean it. Notice no page reloads. It's just all smooth. Pretty cool right? Okay. But then we have another problem. That's pretty cool but Rock has a lot of controls. How many controls did I say Rock had? 80 something, yeah. Do you want to write all the markup for those controls? No I don't. Here's an example if I just wanted to create like a campus picker, this is all the markup I'd have to do to create a campus picker and that's just the output markup. Really the logic I'd have to put in there is like go read from cache a list of all the campuses and then well only get the active ones and all that, like all that logic. It's literally like hundreds of lines of logic that you'd have to write. Oops, sorry, wrong way. Well hold up, we don't want to do that. And that's just the campus one. Here's a date picker. Do you really want to do that? I didn't want to do that. So we created a whole bunch of short codes for you. So this is a campus picker short code. All you do is just give it this top one line and you just say what the value is, what statuses you want and what selected ones, which campuses are selectable. So we've basically recreated all the dot net controls as short codes and you can just use them. So it makes your life way easier. Yeah, you're welcome. Actually if I'm not lying, we just do it to make our own lives easier. It helps you guys too but Okay but what I said validation. Validation on the server is nice but what about validation on the client? Do know how hard that is? Well don't worry, money for nothing and your validation for free. Does anybody not know who ZZ Top is? Good. You're smart not to raise your hands. So in this case I didn't give it a last name and that block, remember I said that block was the HTML content block plus plus, it's doing this validation checking for you. So if you're familiar with HTML validation attributes, you just say it's required and then that works for you. Or you say the minimum length is 12 characters and it does that for you. Or you do the regex expression is this and it does that for you. So pretty cool. But that also works on the server. So if Rock determines you didn't do something right, Rock can pass the validation back to the client for you and take care of it all for you. So you don't have to even worry about that. It it just magically handles all of that. So what do you guys think? Is that like a game changer? Do you do you feel like current lava is like primitive? I won't make monkey noises. Okay. But there's one more thing. All of this works inside of Magnus. So front end, back end, you can control all of that and do all that editing right inside of Magnus. In fact what we did too is we've everything in the red is kind of this new Helix capability so we've allowed you to actually keep your client code and your server code like together inside of Magnus so you don't have to like keep jumping all over the place. Kind of condensed it down. How many people went to Michael Garrison's session on rigging? Yeah, was that like a game changer too? We've actually included the concept of rigging inside of these lava applications. So you can still do it the way he taught you and that's a great way to do it using persistent datasets but each of your lava applications also has rigging and so you can define rigging in your lava applications. The cool thing about doing that is you'll have access to that rigging inside of your lava application and your endpoints but you'll also have access to that rigging on your content block, on the Helix content block. So you have rigging available on the front end and on the back end which is pretty pretty cool. Okay. Like I said, there is documentation. I drastically skimmed over this. There's a lot of other details. We spent a lot of time creating the site helix.triumph.tech that outlines and goes into much, much more detail on everything I just described. What I showed you oh, now I realize my slide is not quite right. What I showed you from the gallery, this is actually a web page you can go to also. So if you go to gallery.triumph.tech/helix, we have all those things that you can interact with. That form with Ted Dekker, we actually are modifying a specific record in our database so please don't write anything inappropriate in there and hit save. We'd appreciate that. But you can play with all of those different little samples and you can grab the markup. So when I showed you the markup inside my PowerPoint, you can also grab it right here. So this is like your little cheat sheet. There's also a lot more recipes on the htmx site. You'll have to kind of translate that just a tidge for Rock but it's really easy. They have a ton of different recipes also. Okay. Coming back over. Okay. This is a free plugin so you can it's not available yet. I'll talk about the release schedule. The first question you might have is like why are guys doing this as a plug in? I'll get that. Good reasons. Helix is dynamic configuration rich tool. We've prototyped it and we've used it a little bit ourselves but it will change. Like this is very experimental and if we put it as a plug in, we can update it on our own schedule and not have to wait for release versions. If you guys like it and if successful, which we think it will be, our plan is just donate it to core and it would be in core. So in the long term future of this is definitely we we hope that it would go in core but we want to innovate, we want to have some trips, hazards, we want to be able to blame that on ourselves, and we want to be able to update that thing almost even on a weekly basis if we have to. There also could be some possible breaking changes like I mentioned and allows again for for quick bug fixes and updates. The release schedule is we'd like to get a few churches, just a couple churches doing an advanced pre alpha of this, telling us what's working right, challenges might be there. Then we go into like a public beta where you can download it out of the shop and try it and then do an official release. And then once we get past maybe version one, we would hope to then put it into core if you guys want it in core. We also wrote it in a way, the plug in such a way that when it when or if it was put into core, you don't have to change anything. So you don't have to worry about like redoing anything. We've made sure that everything was transparent core or not core. So make sense? Okay. So were we successful in our two goals of showing everything being very primitive and then you feel like you're going get extra power? Good. I'm guessing that there's lots of questions so if you've got questions, we've got mics.