ElixirConf 2021 - De Wet Blomerus - Liveview + Presence = Superpowers

[Music] [Music] so a long long time ago a a website creator would write content alongside html and they would put that on a server and if a reader wanted to read the content of that website their browser would make a request of the server the server would respond with the same html and content that was written and the reader could read it and that was very very exciting but uh it's kind of boring now um then around before the the turn of the last millennium uh a bunch of exciting things started happening so uh the the the user would still make a request of the browser the browser would sorry the user's browser will still make a request of the server the server would send back html with a web form and the user could type information in the web form they would click submit their browser would make a request of the server to save this stuff the server would shove it in a database and then the next user to come to view that page the server would go to the database get out the same content that the other user wrote stitch it into the html send it back and now the reader was reading the content written by the other user not just the people making it and that was like this is amazing but today that's kind of boring too and and the other thing happening around the same time is a javascript interpreters getting included in these browsers so you could have code running in the same browser that's displaying the stuff and things could be changing on the page you could click a drop down and the drop down would drop down without even talking to the server at all so um yeah i mean i'm trying to convince you live view and presence gives you superpowers that you know other people won't have and if we look at my buzzword soup there at the bottom build multi-user interactive okay we've already got multi-users because multiple users have been submitting stuff since the last millennium interactive okay the the i guess things are things were interactive but not really interactive interactive by yourself with javascript um they're pretty close but but that last piece was still missing and that came around 2009 the idea of a websocket you know came about and i think 2011 the first browsers with websocket supports were shipped and now we had all the building blocks to build this buzzword soup here multi-user interactive real-time web applications so with a websocket you've heard me describe this dance a couple of times where where the user's browser would make a request of the server either to get stuff or to save stuff or whatever and the server would respond the websocket made it so that there is a connection open the server can just decide right now i'm telling you something and i'm telling you to do something and so this made a lot of things possible um one thing we've all seen and again these things are boring now because this is you know 10 years old but but one user could be typing and their browser client could tell the server hey this user is typing and the server could tell the other user that's viewing the page hey they're typing now and so it can show you a little pencil that they're typing or if they click submit it would go up to the server and the server could shoot it down and you could have a chat client in the browser which okay why is that still a little bit exciting i think the reason why and and the reason why am i talking about something if we could do it 10 years ago why is it exciting is it now look closely at the slide bottom left under the word build easily and i've been giving dates to things you know a long long time ago before the channel of the last millennium about 10 years ago it became this stuff was hard if you wanted to make a real time interactive multiple users interacting with each other in real time right now this user does something that user sees something on their screen right away this stuff has been hard yes all the pieces are there we've all used google docs or some kind of a chat system in the browser but it it takes a lot of effort and it generally takes a team of people working together because all the pieces somebody needs to really go figure this piece out and go figure out this websocket piece or go figure out this piece or go figure out how do well how would the server know which other users would need to know about this thing this user is doing um this becoming easy it only happened in 2019 so this is what's what's new um so yeah we can we can do it easily now and that's that's what's changed so um that's what it feels like when you've got superpowers and you can do things other people can't do that was what it feels like when you're building something in live view and you're like oh my word multiple users can interact with each other and i could just have made that myself that is that's phenomenal so um i've got a demo don't visit yet but try to figure out the internet and i'm sorry that i i just assumed there would be wi-fi here otherwise i would have i don't know showed up with a router or something so um we're gonna have a little live demo um if you can hotspot if you want to use your computer you can hotspot your phone and connect your computer that if the conference wi-fi has been working great for you sure use that but don't don't blame live view if it's slow um or this should work on your phone so anyways we'll get started here um i'll click on the link so i went to quick average.com i've got no internet because my phone's not hot spotted so let's get that going and don't go to the url or you could go to the url but you can have to go to another url again um okay i've got wi-fi if you went to this url you would get redirected actually before we do that well everybody's figuring out an internet um okay there we are and actually while everybody gets there so let's i could i could just make it another room id so let's make it a uh uh electroconf elixir conf okay you all can start showing up there and just so it's not distracting i'll switch back to here um so here was the problem i i was doing elixir back-end stuff you know at work and had done a couple of elixir back-end things you know data processing stuff take things from here put them here munch them whatever but um i hadn't played with with phoenix yet and i wanted to play with it a bit because i knew we'd be doing some phoenix stuff in the future and i wanted something interesting that's actually going to get me going you know i didn't want to build some some credit application that's you know create read upload delete something that wasn't going to keep me interested to to write some code on the weekend or in the morning before work or something so um i we had this problem at work where once a quarter my team gets in a meeting and we evaluate ourselves on how we're doing on our values uh we give a number from one to ten how are we doing on glass half full team over self customer first you know the values that we say we live by how do we feel we're doing on them then we'd have a quick discussion on that especially if people have very different values very different numbers and we would uh the computer went to sleep that's not cool my screen was black a second ago and now my screen's black again i'm back again who knows um all right well we're having a we have a discussion and my manager would put in the average so whatever the average was i'm like i gotta stay but i can't stand still i don't know why but um if i do move too too close to any of the speakers anyways um my manager would take everybody's numbers add up nine people's numbers from chat add them up divide them by nine and write down the average so that three months later when we have the same meeting we can see how are we trending do we think we're doing better do we think we're doing worse let's have the conversation these we said these values are important are we living by them i know by the way salesloft is hiring and we do live by the values we say we live by which is great um so anyways i thought okay all right this this seems like something live view could do and i could use live view for this it's the simplest dumbest little thing but it's clunky to do with zoom chat and excel or whatever so um so yeah here we go so if i i might need to get out of exit the thing switch over all right you all made it yes yes the internet oh wow there's so many of you okay that's like the most users the app has ever had so exciting so um it says i'm only viewing no that's because the the thing went to sleep let's reload here uh no i wasn't an admin let's see okay my internet's not terribly fast either all right come on internet got to reload uh oh got a live demo disaster all right well let's see um could we find anything out about how the app's doing if we went to um dashboard got the phoenix live dashboard going it's the thing just totally overloaded by all these people maybe it's that maybe it's my internet we'll find out soon if we can get this load ah it's crashing anyways we'll keep talking maybe it'll come back maybe maybe it's my internet that won't do it um but anyways we get on there different people throw out a number you won't see other people's number until they have submitted hey here's a we'll try what if what if this room has too many people what if what if there's an electrocon room that's fine oh the elixir con room loaded but yeah i think my internet's not not handling it okay well that's fine let's leave it anyways it worked it works with my team of nine on my gig gig fiber internet at home and so uh the the the the piece that was interesting to me was that i tried you know gave it a shot a couple hours on a saturday and then the next sunday they gave a couple hours and got it got literally got the first version working in a weekend i've got wife and kids i'm not going to be coding all weekend i'm going to steal a couple hours here and there to work on the thing i'm i'm curious about um yeah now i'm curious is it internet is it my phone or whatever let's switch back to the thing so live demo was a disaster let's just call it that but i got it working and it was fun and exciting and even though it's the dumbest simplest little app it was like okay this is this is kind of exciting this is kind of fun there's nothing there's nothing i could have built with with the other technologies i knew that took that little time that my team would actually use my team is actually using this right now so if we crash the app they they might be struggling with sprint planning right now because um we realized hey this works so nicely we should use this for sprint planning so we use it every week now that if if we've got a body of work and we're estimating it for complexity different team members would throw out a number and we don't want to influence each other um so we we use this that you you wouldn't see a number somebody else gave um you don't see people's numbers until everybody has submitted and so yeah it it just came together so how how how did it work the first piece that makes it possible and i think we've heard more talks about this uh at the conference is live view so live view is changing how we build the future of the web and uh i might be trying to convince the wrong room full of people but uh here i go i'm gonna try to convince you anyways um yeah i might be preaching to the choir um there's a book called the innovator's dilemma that i would totally recommend it it tells a story um and the story kind of happens on repeat with like before the time of computers even with like industrial revolution digging equipment and then eventually the computer computer era like different hard drive technologies different storage technologies the story just happens on repeat the same story just happens over and over where an existing technology solves a problem it's the existing technology everybody's using to solve this problem it solves it very well it's very powerful at doing this thing at digging holes or you know doing some industrial revolution thing or storing data um yeah existing technology is doing a great job and then a new technology pops up and it's smaller and cheaper and uh you know it's got some other things it's it's good at but it's not as powerful it doesn't do the main thing that the main technology does as well and so the part of the story that that's surprising that it keeps happening on repeat is that the people who are invested in the old technology dismisses the new technology because well it's not as powerful it can't do it can't do what this thing does so it'll never do anything it'll never go anywhere but because the tech new technology is cheaper lighter less total cost of ownership a few people start using it a few people that do not have the heavy duty needs that the main technology fits start using this new technology and over time it improves and it improves and over time you get to a point where it solves the problem well enough for the majority where it really takes over and uh i believe it is happening with live view right now like we're sitting in the middle of it happening uh where okay a lot of that early early minority is probably here in the room with me but um yeah this this is changing how we build uh software for the web period um all right so a little diagram of live view so there's the the phoenix server and that's the orange bird there's the people's browsers who's connecting that's the little chrome icons there's the black and white thing that looks like a transformer that's a icon for a websocket that i didn't know there was an icon for that until i was giving this talk and i found the other three icons i was like let me see and then the piece the the the purple drop is obviously the elixir icon but that piece is really important the fact that there are three of them because that's the piece that elixir elixir being able to spin up millions of processes on one machine or thousands of processes there are tens of thousands of processes that are actually doing things on one machine um is kind of a party trick until you really need it and to do live view well to do live view with the excellent experience that it does deliver it does use that it spins up a separate elixir process for each connected client which means um and and chris mccord mentioned this in his talk this morning which means other technologies trying to build the web with the same model are going to struggle most other technologies cannot spin up a million processes on one machine okay tens of thousands of processes doing things on one machine elixir is uniquely suited for that and the other piece where it's uniquely suited with its background in the beam in erlang is the idea of having multiple nodes communicating there could be a live view application and if you've been to the talk of about of flight at io you can have a live view application with different phoenix servers in different parts of the world and this stuff still works where um yeah other technologies again are going to struggle to have they're going to have to have some kind of a communication in the background some kind of a third party to to handle that state so live view is the one piece the other piece that i thought man putting these two things together is like discovering that peanut butter and jam goes together is presents so presents let's start with pubs up so pops up tracker gets built on top of that and then presence gets built on top of that so pops up is just a publish subscribe message bus you can publish events on a topic you can subscribe to a topic and if you are subscribed to a topic you will receive all the messages sent on that topic so to go back to our demo that did not work um there so you we could have tried to build that just with pub sub where if every time a new person joins we could publish an event to that room to say that this person joined and then we could start populating that list of of users in the room but what if a new person joins and there were already 10 people there when they joined how would they know the existing list and that is where tracker comes in tracker is an otp behavior meant for and yeah if you don't know what that is google otp behavior tracker is an otp behavior to implement keeping track of the entire list of subscribers for a topic so all the subscribers on this topic do something with them you can you can do all kinds of things with tracker like you could do all kinds of things with a gen server it's a behavior you implement it with your own code um i've actually on a branch of on a branch of yeah the little demo app is is open drawers i'll send you the link it's on my my gitlab but um i have a branch on there where i just wanted to see okay if if i wanted to just use tracker straight up and not use presence i totally could all i did was i just used tracker and i copy pasted all the code from presents and pasted in a file and it worked just like presence so presence is an implementation of tracker that solves a very generic case something going to sleep i'm moving my mouse so it doesn't um yep it's trying to sleep okay presence is an implementation of tracker that solves probably the most general case you would want to use with tracker and it answers two questions who's here and what do we know about them so in the case of my little demo app that didn't work we want to know your name we want to know your number and we want to know if you're only viewing because sometimes our ux designer wants to join and see if the person running the meeting is an engineer and they will be throwing out a number to estimate a piece of work they can't share their screen while running the meeting because then everybody else would see their number and we defeat the beautiful feature of hiding your number until everybody has submitted it so sometimes we run the meeting but the the it's not being shared on zoom so the manager or the ui or the ux designer who would not be throwing out a number for estimating the complexity of the work they can click the little check box to say only viewing meaning my um my number should not be count don't wait for me to submit a number i'm just i'm just viewing here so yeah in our case our presence tracks three things name number and are you only viewing um another thing that the app does is if i asked a question and uh you know we all i i was planning to ask what temperature would you like the thermostat at and you know seeing what you put in there and then if i wanted to clear that and ask you the next question there's a button to clear numbers that button we don't really need to track that as my presence going forward that's a one-time event i just want to clear everybody's numbers so that one i just send a pub sub event and kind of the beauty of how this all works is that as soon as different processes are subscribed to the same presence or being tracked by the same presence there is a there is a um there's a topic there in our case it was the room id um as soon as you have that they are all automatically subscribed to the same pub sub topic so all the processes the the the live view processes would just say hey please track me on this um track me on this presence track these things about me but also send me updates about it as soon as you've done that you could just send a pub sub event that all of them will listen to so i just send a clear numbers pub sub event and all of them will clear the numbers so yeah that that works really well and if if this this talk i was aiming more for beginner and intermediate and i was more this talk is more to try and convince you to give live view a try so yeah if you're already sold on live view sorry you made it into the wrong room um you know try not to walk out be nice but um the the if if somebody wanted to give an advanced talk or if you wanted to dig into something kind of computer sciencey tracker would be it because tracker deals with eventual consistency across many nodes and you know there are computer science white papers there that i have not read that um you know out lies out the algorithms that it uses for eventual consistency and stuff so yeah it's really cool this stuff works across this stuff would work across multiple servers in multiple continents or data centers or whatever um very cool stuff okay and yeah this is same diagram as before but the the arrows are different the arrows are not two-way i'm just trying to give an example of one of these pub sub events going through so from from the browser on the left a an event would go up to the server and it will broadcast that event to all the other live views and they will over the websocket send the uh send the update to all the other connected uh all the other connected browsers over the over the websocket and the beauty of this is you're not having to set up websockets and you know deal with all of those internal things that used to be so hard to do it just it just works um now what so i've convinced you you've got superpowers i've convinced you you can do things that other people could not necessarily do you've got a technology stack that the things you could implemented in it would be hard to implement in other technology stacks what to do about it well i'll give you my opinion if you are making product decisions if you're making choices about should we build this or should we build that normally you have to look at okay how much value does it give our clients and how much time is it going to take right two features give about equal value to the clients well this one's going to take two days this one's going to take two months we build the one for the two days first something i think if if you're using elixir something that you should consider is does it have some kind of a real-time aspect to it does it have some kind of a real time component because if you do have competitors and again i'm not saying take the start with the technology that's cool and go throw it at your users i'm not saying that start with your users see what they need and build what they need however if you see anything that would help them something that they need that is real time in nature something that your users need that requires them to get a real-time change on the screen based on something else that's happening in the system something some interaction that while they are on the phone with your support team or with you or with their customer they are real time collaborating with something that something the other person does shows them something on the screen because of something that other person did right now those kind of features if you can provide value there your competitors will have an extremely hard time they're going to have an order of magnitude more developer hours and effort to build something like that and maintain something like that or if you're looking for a side project to just play around with yeah that building something real time is just more fun and it's more like hey this this actually this actually gets me going and it interests me if um if in my case i really like working with people who are new to programming um and the struggle often is well you probably should build something before your first job so if if you if you know people in your life that's trying to learn how to program i would seriously consider trying to talk them into trying something with live view um especially something real time because they can build something really basic really simple but because it's real time it's it's kind of fun and exciting and an employer would more likely notice you know they could build a blog with a lot more effort than i put into my little thing or they could build a to-do list but it's been done so many times that the the fruit for real-time interactive applications is just so low-hanging that things like the little thing i made if this stuff was easy um i don't know some big calculators website would have implemented it a long time ago but because it is so hard and we've got superpowers we can build those real-time interactive things um yeah so and uh yeah if if you're trying to also if you're trying to sell somebody on elixir don't don't try and convince them on oh it's got all this concurrency or got all this or all that um most of those things people who are not into the tech generally doesn't care but if you tell them hey we could deliver a real-time thing to our users a real-time interactive thing um that people will be much more interested or if if you're a consultant building things for other people look to solve those real-time problems or look to tell them hey i i'm an expert in real-time interactive applications or whatever that because again if if they're looking at your skills versus another programmer using another technology you're gonna stand out a lot better and they're gonna they're gonna see what what you can do and go oh wow okay well could i find some somebody else to do this kind of real-time interactive thing outside of elixir um i don't think so and again i'm open to being wrong if i'm wrong about elixir being capable of doing something here that other languages cannot do well please come and tell me about it afterwards or just put up your hand during question time and let me know that hey no other languages could totally do the same thing because what i noticed is hey wait a minute um this thing that would be really tough with the other web technologies is all of a sudden easy so yeah that's it for me go go change the world with your with your powers but yeah definitely got some time for questions [Applause] um i have not tried fly.io so my thing is hosted on a five dollar a month digital ocean droplet i'm comfortable with docker because i've you know been doing it for a while so for me i i deploy with docker and it was easy enough that my silly as my little app is it has continuous delivery but um i had i thought five dollars a month is going to be the cheapest possible way to do this and i kind of wanted to understand how it runs but spoke to mark erickson today about flight at i o and their free tier would totally serve my needs so yeah it would be free that they could host it on on flight at io i believe gigalixer would also do it um i think i haven't messed with it but i've heard there are some limitations with heroku and where yeah something with heroku wasn't playing nicely with this new model of you know with their free tier at least i'm sure if you hand them money they'll do whatever but yeah i'd look at first i'd fly at io and then at gig elixir but either one is probably going to have a free tier that'll that'll serve those needs all right well thanks a lot um i'm around if anybody want to chat with me thank you so much

Channel: ElixirConf

Views: 1,185

Keywords: elixir, liveview

Id: UMls-TTFfvA

Length: 32min 14sec (1934 seconds)

Published: Sat Oct 23 2021