Cell-Driven Development with Livebook - Einar Engström & Marko Vukovic

all right uh thank you everybody good to see you friendly faces old faces older faces new faces uh and we have a bunch of people online too the camera is there but I see the list there um so yeah it's a hybrid Meetup we're going to be recording and putting the talks online Mata one of the organizer the other one is Tyler that is online if you are online and you have any questions you can ask Tyler and if you have anything that you need here feel free to tag me we also have my one here from the score that is helping us Host this uh Round of Applause for the score because this office is awesome been super kind to invite us and uh we have three talks for you tonight two are going to be in person and the last one is going to be online um so we we'll also try the hybrid talk setup but first my one is going to say a couple of things and uh and then we'll get started so thank you thanks mat I hope I can uh keep it to a couple of things usually I'm known for dragging things so I I will try to keep things pretty short welcome to the score uh we're actually an old friends of Elixir Toronto we've hosted Elixir Toronto twice this was right before the pandemic and now that the pandemic um does have settled down it's obviously nice to see everybody in person and uh enjoy this office space and you know uh chat with uh each other and and and network and uh obviously take advantage of uh all the beautiful speeches that some of our folks will uh present that being said um I have a few things to kind of go over first thing first key housekeeping items this is pretty much the map of the 10th floor I don't expect you to know what this is I'm going to be pointing out to different direction to to show you where the washrooms are washrooms are all the way down take a ride go through the uh pass through the arcade and then there's our washrooms Refreshments are over the counter as well as uh hot hot drinks obviously soft drinks Emer emergency exit is down the hall right there hopefully we don't have to go through that but just in case and in case you uh need to use our Wi-Fi uh log the score guest and our password is with the north so um as you all know uh the score has been around for quite a while now where the leader in Mobile Sports media and sports bet in Esports uh uh Industries um we engage millions of fan on a daily basis through Innovative digital media and sports betting products but it started from uh in 1997 when uh we were a TV network uh we used to broadcast broadcast sports news via typical TV channels and then we've evolved into becoming one of the leaders in the sports media in sports betting uh uh uh business uh it started uh in 2007 when we incubated a small team of uh developers and we started building uh a little app a mobile app what we wanted to do is to really um cater to some of the folks who didn't want to or didn't have the time to watch TV or uh consume TV uh news via t uh on the TV so we built the the app and that app uh uh proved very uh um very beneficial over the years so by 2008 we build the app on Native mobile IOS and Android applications and by 2012 we've had uh we were Canada's probably number one most popular sports app with the most users and that's when we decided to slowly but surely part ways with the TV network that we built in 1997 and really doubled down on our uh media platform and uh we also Diversified our offering in 2015 by uh building an ort division so we do custom content uh video series on YouTube we have over 2 million subscribers on YouTube um and then uh the pivotal moment actually came in 2019 when we decided to go into sports betting this was around the time when the US Supreme scort started to legalize sports betting in the US and given that we were in the sports media space for a long time it just made a lot of sense for us as a business to really uh cater to uh uh uh our betting uh audiences so uh we started building a mobile app called the score bet and we launched in four states uh New Jersey Colorado Indiana and then um by 2021 you know we've we've built a a huge um uh uh user base and and and we started to talk with the pen National and that's when we were acquired by Pen National for a whopping $2 billion USD so the rest is history it's 2022 now we we've launched in Ontario as you all know sports betting has been legalized in in Ontario since uh April of uh 2022 and we're here to uh make sports betting um uh a household um uh uh item the same way we've been in the sports uh media business over the last uh 20 years or so so I'm not an engineer but I will try to do a a little bit adjusted to what engineering engineering looks like at the score so uh our values are fans first think big Wing together and make a difference and these values are embedded in the philosophy of our engineering teams here at the score so we're really on a mission to become the leader in sports fan experience in every Market we enter into we're a globally distributed team with a Relentless focus on delivering sports fans the ultimate personalized mobile experience so scale I know developers like the word scale scale is what we do and uh we think big so billions of push notifications per month handling hundreds of millions of API calls per day and delivering data in real time to millions of fans uh and lastly collaboration is at the court of our development team's philosophy everyone brings unique perspective and as such we give people the opportunity to really be the owners to help shape and Define what they built how do we do what you may ask we run uh a distributed Elixir uh stack spanning uh hybrid uh multicloud infrastructure that supports millions of uh clients so uh for for cloud we have AWS uh as well as gcp we also have uh Azure for some of our Enterprise applications our backend actually runs on Elixir Phoenix Ruby on Rails Scotland graph grpc Kafka post crust database and kubernetes and our front end and mobile teams use use the latest Technologies such as Swift cotlet and react to build fully native modern and mobile and web applications and next is how you could engage with our brand so uh definitely uh here is a uh there you go yeah so here's a bar a barcode uh that you can scan to uh uh um engage with our brand we you can go there to check our career website our different products some of the efforts uh we we have for our early T Talent jobboard glass doors and Pen entertainment and and some of our other properties here uh at the score in the interactive groups and that would be the end I will give it back to you there thank you so much uh all right Logistics it's going to take 30 seconds and our first speakers are going to be up we have anner Marco and we're going to talk about self-driven development in Elixir which I think means live book but we'll find out you want to move up okay there's going to be a bunch of audio in this talk and uh I think we figure it out if you hear one of those like because the mic e goes I apologize it's my fault um good okay just push once yes once that suggest an encouraging Round of Applause for our speakers you didn't have to um well thank you Matia thank you Myan where'd you go hi uh appreciate being here appreciate the massive crowd I think this must be near record attendance for the Toronto Elixir Meetup so I'm very proud to be here for that as well um welcome to the first talk of the evening my name is Anar this is my colleague Marco here are details our talk is titled cell driven development this is our uh attempt at using smart cells to see where the the possibilities of Elixir live book can take us as early career Elixir developers Marco and I are friends and collaborators um we met each other at doart Academy um I don't know if anybody here is familiar with doy Art Academy it's recently launched by docyard Inc um Second Court is ongoing uh live book at do Academy live book was our platform for learning Elixir and we had such a nice experience with it and over the over the time that we were at Doc Academy and well the months before and since um we've seen all these amazing new features in life book and we thought we might want to give back to this uh this this this space inside of the elix Elixir EOS system so for those who aren't familiar with livebook um it is a multifaceted sort of platform form for the Elixir language and extended uh uh Technologies um it's an interactive notebook you can uh visualize data you can share knowledge you can build applications you can run machine learning tasks uh the features of livebook are many and uh still growing as we hope to show in the coming minutes here um one of the cool things about live book is its extensibility throughout the uh well the software industry at large um livebook features many Integrations with different Technologies uh we can see here we've got SQL hugging face slack post SQL MySQL you get the idea about about about SQL um Amazon Vite map Libre mermaid um and here are some of the categories if you're not familiar with these Technologies here are the categories that they fall into um the point is that live book can take Elixir outside of elixir in a very quick and convenient way right you can deploy apps as I've said before uh using livebook um in the this new feature I think it's only been around for less than a year or so um Jose valim gives an example of of the labor required of building and deploying an app on hugging face uh and it requires all of 15 minutes perhaps and in in the example in this in this YouTube video um you can see that uh he's built a a chat application uh which is uh uh subhub based essentially and it uses whisper uh uh to um ident to recognize identify and transcribe your voice so you just speak into it and then you have your your text messages sent over across the server to whoever is in the chat room with you very simple very easy um so what are we focusing on uh as for the title we're focusing on cells what are cells cells in live book are where you enter your code where you enter your diagrams or where you enter these little automated programs automated client server programs that produce code in the background and are really really neat uh for lack of a better word um there are there's a very simple structure to um smart cells and I apologize if you can't see this clearly but essentially you have elixir on the back end and you have JavaScript on the front end uh again client serve relationship uh Elixir sends out an init message to uh to the client um with the attributes of the smart cell so the fields that comprise the smart cell and then JavaScript returns with a uh with an acknowledgement of that and then you just start sending events back and forth really it's really that simple on on uh on that level right you just send messages from Elixir to JavaScript and then JavaScript back to Elixir the server updates the endpoint um in the browser and you see whatever your data is supposed to show you the default smart cells um if you want to get playing with smart cells um you simply have to download livebook again you can you can download onto your local machine or you can deploy in the cloud and log in you know with user authentication um and then you go you you choose your smart cells the smart cells that you want or actually you just create a new cell block click smart and then here are the default choices uh we're not going to get into those because that's in the purpose of this talk but um we've got machine learning here we've got graphing we've got database interaction we've got messaging and so on and so forth uh one more example to if if you want to learn hands off instead of handson you can go visit the uh this video by Jose Bim where he uh does some graph work with the iris data set okay so why are we here because we created some smart cells um and the first thing you need to do to create a smart cell is a command wherever you want to store your uh where you want to store your project mix new this is the name of one of our cells that would not be what you enter in your machine uh so mix new project name and then you want a supervision Tree in there so that the server knows well so that the code for the server is autogenerated yeah so let's get into it check check check all right thank you Anar um yeah so we just want to create three smart Sal learn how to create them ourselves and then share what we think are cool about the so so the first one we made is qo util it's just the utilization smart cell and we're just going to quickly go through all the callbacks quickly go through all the callbacks that you need to implement one um first so you see we ran mix uh mix news sub so we it creates an application file for you you just have to add this one line Kino smart cell register so that'll include your smart cell when um live book starts up and it'll be in that drop down menu we showed earlier and so then you import these three um libraries jsjs live smart cell lip assets contains the CSS and JavaScript uh for your front end right and then this the name that's going to pop up um the way it works like a handle state in a gen server so it's assigning values uh into to the state and then um same as other other gen servers you have handle info handle event and you do operations on that state so how you initializing it um you can send messages like with hand info and process them same thing uh handle connect so that's when uh someone connects to your live book instance and this is running how are you going to set the state state two attributes that serializes your state for uh two Source usually so two Source there's a button always and this a really cool thing so let's say for the machine learning smart cell if you you know do do stable diffusion you think it's really cool there's a button you press to code and you can just copy and paste that in your app itself so that's another really good feature um and then yeah this is just the jav some of the JavaScript it's not uh we don't want to go tune into detail for this but you have to uh export this function in it context payload and then however you want to do it we use view for some of these but can use whatever you want and then handle events so when you you send events from Elixir to JavaScript you can have event listeners on the client side and update however you want okay boring stuff done let's do some demos so this is quickly how it's going to look like and let me pull it up so this is our first one so just very pretty simple it's just updating uh just using osmon from earling to update the values and then I don't have a GPU but I just added this to cycle through so you can see every it's just ticking on the back end sending updates to JavaScript and then and then uh rendering and in javascripts so this was cool for me because I've I've dabbled in the machine learning Elixir and sometimes like if you want to increase the batch size you're kind of guessing when you're going to go out of memory so this is just a cool fun thing we started off with and so the second of our uh three smart cells is called Keno sound I hope that the name is self-explanatory our catch praise is sonify your workflow the idea is that we live screen based lives we stare at these pixels all day and we are are are used to that sort of experience of of of data and of computing of programming but it doesn't have to be that way moreover there are people who who don't have that privilege right um and so we thought why don't we add something to the live book experience that's not there yet that might benefit other people that also could be fun perhaps and L here we have Kos sound uh it's a kind of call and response what does that mean kenos sound is a smart cell that allows regular cells dumb cells inside of your live book to send commands to the uh to JavaScript in this case a framework called how. JS which is essentially an audio player with uh some minimal features um and that will sing back to you right that that will give you sound as opposed to just a visual rendering of of what you would see when a function um successfully evaluates or when it when it throws an error or when it crashes what have you Jackie would you mind uh muting the mic for a sec all right oh it's here turn turn uh sound does not enjoy the same privilege as other modes of sensing the world and so audio is often difficult to mount and share with other people so again this is literally part of the point why we're doing a sound based smart cell for your Elixir experience is Mars smss there's some feedback where are we getting that from the smart cells the smart cells yeah Jose exactly that's I'm not going to talk now because I want my speaking portion to be on the zoom recording so I'm just going to play around you can sort of follow along as I play consider it done have you tried turning it off and on again crash crash crash crash crash as soon as possible you saved me see you later [Music] rator hello okay just real quick um that was a short series of uh commands that you can throw anywhere inside of your live book remember that the regular cells can uh send messages to the smart cell and then the JavaScript framework will will respond with audio clips right and so there's there's a success message which you would which you would you would throw in a function when you want to hear that when somebody needs to hear or wants to hear that a function is successfully evaluated there's an error message that you send when you want to know that an error has occurred using your ears and so on and so forth but it doesn't have to be simply pragmatic right [Music] the smart cells crash crash crash crash crash as soon it's possible crash crash crash crash crash possible the smart cells crash crash crash crash crash see possible crash crash crash crash crash [Music] possible very basic uh and simple demonstration of where this can go beyond again a simple developers tool um raise a hands if anybody recognized any of the Sounds in that little composition that sound isn't optimal yeah what did we hear say it what did you hear Windows yeah Windows 95 yeah anything else no no close that's from Windows 95 but I think Brio Brian Eno actually composed uh [Music] we've got an Insider here uh there's also know there was also one other sort of mechanical sound I'm curious if anybody heard it you know Reeves exactly do Matrix printer so signs sounds from some of our childhoods um and then of course there was Jose valim saying smart cells and Joe Armstrong saying kind of man manically crash crash crash crash crash soon as possible let it crash okay that's it for Kino sounds uh we've got one more uh very exciting sort of the Dana M of the whole presentation I think H right so this one's not gonna be as fun as that one but we'll see how I do the last one is Kino fly so has anyone here used fly iio not sponsored okay a few people so it's pretty cool lets you deploy containers all around the world near your users and we used it in our course so we just wanted to explore because a lot of these um smart cells they're so flexible but you just end up doing like one thing so we wanted to try interacting with some external apis and seeing what we could come up with so so it's a smart cell that allows you to manage your uh flyo app from one spot and we're going to show you one way that might be useful and hopefully uh it inspires you to come up with other use cases okay that's what it looks like let me pull it up so we have this is um so you just enter your information your API key and your application so right now I have one my app running in Tokyo really far away let's see uh so it's just returning some Json it's really simple but interesting thing is when you install Smart cell you actually install the module that it's in right so you can add helper functions that interact with your smart cell and the user doesn't have to install anything else so if I just Run kinof Fly Lany so this is already installed so this is getting from the state getting the URL of your running app and plotting the latency over time so right now it's pretty boring but let's deploy a new app closer to us and we can do this right in live book so it's being created and it's starting up so we should see this go down yeah to Toronto should be somewhat closer than Tokyo what's my hypothesis uh it does take a while so it's going to automatically shift the traffic closer to you you should be able to see that soon just takes a second there you go so you know it's a cool idea like you can test your endpoint and imagine you can do load testing in like a testing environment and it's all here and you have all the plotting and fun stuff that goes along with that so if I stop it so it's GNA be see if it goes back up yeah and so also one last cool thing so I stopped it in Toronto uh request K coming in it noticed that I have a stopped app in Toronto region so it automatically started up the app in the Toronto region and then reroutes it back so you can see there's a jumping Lany it's going back to Tokyo when I shut it down and then I start it automatically turns on Toronto for me and then reroutes it back there so it's a cool cool thing and it's an interesting way to to explore these things and hopefully it's next time it's sponsored yeah okay uh so those are our three smart cells um we have uh uh things left to do um ideally if time permits uh I would like to sorry we would like to implement full user your customization for Kino sound so if you have a preferred set of sound effects for example uh you know you were a Mac User when you're a child and so you're fond of the Mac startup sound or the Mac error sound whatever and you want to use those or maybe you want to put in your favorite you know Spotify play clips from your favorite Spotify playist whatever you can drop them right in there and assign them to different functions uh GPU detection on all platforms for Kino util the way it's uh setup right now it doesn't recognize AMD gpus I don't know what the Prejudice is there um it's not our fault um quilton latency analysis is set it's there this is I guess uh from uh previous ideas about the future of ours uh improv test Suites by which we mean add tests um we're going to release these and maintain them on next. PM so there'll be among that crowd of great uh live book Integrations that we've seen in an earlier slide hopefully you know um at least the fly.io logo will be now on that page because we've created this smart cell right um and we would like to split konut fly client into its own Library so you can just drop it into your um your your other Phoenix applications if you'd like more meta uh or far-reaching ideas about the future or in other words our hopes and aspirations we would like to see more smart cells it's kind of weird that this amazing replacement for your old school reppel uh which is live book is not seen more participation by Elixir developers right um and smart cells the number of smart cells it being astonishing low astonishingly low is an indicator of that um we we in the process began to feel that well nice to have to use more Elixir and a little bit less JavaScript um that's that's that's just out of preference but it's also sort of a we would I'd say like a uh social pedagogical ethical thing right because if the second you you require JavaScript to be building this great feature of of livebook then it it precludes all these people who are learning Elixir uh because it sets another barrier barrier in front of them right so if they've learned a bunch of Elixir and then they want to go this next step cre a smart sub they have to learn JavaScript well then it's kind of you know kind of De beats the purpose of livebook being a great tool for teaching for example uh more programmatic interaction um uh meaning that we could just have we could set up smart C to uh be doing things on a on a regular basis like if you want a some reports to be autogenerated and um and save to your file system as PDFs like once every two weeks or something you we'd like to be able to you know handle things like that handle requests or requirements like that business requirements more cellto sell interaction uh currently as it is there aren't any SP cells that um that uh allow for that instant messaging and control by regular cells or other places in your system right and then more collaboration we had a ton of fun working on these and um we felt that this this project was a great great tool for learning um and and just like interacting with other developers and we welcome other people to if you want to build some smart cells uh and you know where to start it there is a slight learning curve it's not as as as easy as you know our slides might have shown just reach out to us um or maybe just reach out to one of your friends who has us has a similar Vibe as you and you know go make some smart sells on Friday night whatever so this is the final slide thank you uh to Matia and the Toronto lir Meetup to the livebook team for again creating this what really is a wonderful platform we we kind of have a bias view because it we onboarded into Elixir through live book is so we know exactly how powerful it is um thank you to The Elixir community at large for all these wonderful tools uh in addition to the live book um thank you to the score for hosting us obviously and and to docyard uh who helped us get onto this stage right now thanks we have time for just a couple of questions so Tyler I'll let you look at the chat in case people type and maybe you can speak in a second I have one here from John what you use for the what did you use for the visualization and how did did you find that Library hello uh we use Vue vuejs it's a JavaScript library and other smart cells in the ecosystem like the machine learning one I think uses view so we just took that lead the latency chart oh sorry misunderstood yeah that's just Kino so it's like uh Kino Kino vegalite Vite is a plot uh plotting library and there's bindings and elixir so definitely really cool that's one of the Integrations with veal light you just you add this dependency into your live book and then you have all this P graphing capabilities of megalite Yeah question one second folks from the security standpoint generic was speaking what principles do you got to secure your containers to improve your cyber security posture what products are you guys using again in general yes thank you no thank you um so this is similar like Jupiter notebooks in Python you really you do want to have a container but this is really not meant for like a production app as much Securities they are working on some stuff like secer hubs but yeah usually this is more of like an internal tool demo and just be able to get up and running really quickly cool good point though uh any other questions from here I see what yeah I'll come to you B got this with a lot of yeah thanks for the presentation uh two questions one is I saw some code some JavaScript code where you're importing with es modules from a CDN was that like a pseudo code or was it a standard yeah that is what we use so again other ones in ecosystem they're used doing the same thing like a lot of them will just call the JavaScript library from the CDN but you can bundle it as well so with the import statement sorry with the import statement because I like it's kind of new to me um I thought it was maybe a s CL but um yes so we we did it's this is not the it's not supposed to be here um we don't have the code so this yes can you oh yeah I'm not an expert but um we did some stuff so there's also a CTX import JS function so that you can import your bundle through there and yeah then it's available like it's easy with alpine I did with alpine JS but for this it was a little more difficult so I just did the CDM all right thanks the other question is uh around the uh uh the hooks with alexir tool you built um you mentioned there is communication between the server and the client was it uh the tool was it doing polling or um uh polling or um yeah web sorry yes so polling you mean in terms of updating the state on the the server side yes yeah so uh for in The Elixir was just sending messages in a loop and then it will just handle info and then send a message back up to JavaScript with a new St State and Javas will animate that and everything yeah so it's all message passing server server server client thanks okay thank you thank you for your question

Channel: Elixir Toronto

Views: 518

Keywords: elixir, livebook

Id: lKuFsNy9My0

Length: 41min 50sec (2510 seconds)

Published: Sat Mar 16 2024