[00:00.000 --> 00:11.440] Now we have Arjan's Japanese and it's going to talk about how live view can be used to [00:11.440 --> 00:12.640] keep you warm. [00:12.640 --> 00:13.640] So give it up. [00:13.640 --> 00:14.640] Alright. [00:14.640 --> 00:20.120] Now thank you everybody. [00:20.120 --> 00:22.920] Nice to see such a big turnout. [00:22.920 --> 00:29.440] When we last organized this deaf room I think three years ago it was a much smaller room [00:29.440 --> 00:33.600] and it was really packed but now it's not packed but it's obvious because it's a bigger [00:33.600 --> 00:39.440] room so I'm very glad that everybody's here. [00:39.440 --> 00:46.320] So my name is Arjan's Japanese and I'm going to talk a bit about knitting today with you [00:46.320 --> 00:48.120] and also a bit about live view. [00:48.120 --> 00:53.920] So I'm going to give a little bit of background about my project and about what I'm doing [00:53.920 --> 00:59.000] and then I'm going to talk about live view and how I use it and then I'm going to wrap [00:59.000 --> 01:01.080] up. [01:01.080 --> 01:05.320] So let's start with some background. [01:05.320 --> 01:13.800] I've been programming since I was a little kid yesterday in the when we had a beer together [01:13.800 --> 01:20.400] I talked about what is your first OTP release that you used and mine was actually R13. [01:20.400 --> 01:24.760] So that's a bit and you can guess my age a bit. [01:24.760 --> 01:29.600] It's from 2009 so I've been using Erlang since 2009. [01:29.600 --> 01:35.960] Before that I used PHP a lot but then I got introduced by somebody to Erlang and that [01:35.960 --> 01:42.560] actually Mark Warrell had a bit the same story as Jose Valim had when he created Elixir. [01:42.560 --> 01:44.880] Mark wanted to create also a web framework for Erlang. [01:44.880 --> 01:50.160] Elixir was not yet born and so he created Zotonic a web framework. [01:50.160 --> 01:54.880] And I'm still a contributor to that and it's still alive although it's not as popular as [01:54.880 --> 01:58.680] Elixir or Phoenix for that matter. [01:58.680 --> 02:03.880] But then later I got used to programming in Elixir and I've been doing that since for [02:03.880 --> 02:04.880] quite a bit. [02:04.880 --> 02:11.120] So my background is I studied AI I have a master's in that back when AI was not hot at all. [02:11.120 --> 02:15.360] It was the middle of the winter of AI nobody wanted to do anything with it but I thought [02:15.360 --> 02:17.480] hey why not. [02:17.480 --> 02:22.800] But then it turned out I did not really do anything with AI for a long time so I just [02:22.800 --> 02:28.160] became a regular web developer doing first PHP like I said and then Elixir. [02:28.160 --> 02:33.920] But I'm still interested in AI in hardware and software and also in art actually because [02:33.920 --> 02:40.120] after when I stopped or graduated from AI school I went to the Art Academy, the Rietveld Academy [02:40.120 --> 02:48.400] in Amsterdam and I decided to proceed the career in art or at least try to do something [02:48.400 --> 02:53.880] more creative outside of pure computer science. [02:53.880 --> 02:59.600] So one of the let's talk about that a bit and because it gets me slowly to the knitting [02:59.600 --> 03:00.840] stuff. [03:00.840 --> 03:07.960] So I worked with Clazine van de Zans, Gilpe Lodz, she's a friend of mine and an artist [03:07.960 --> 03:12.520] slash interaction designer and together we did quite a lot of projects that were related [03:12.520 --> 03:19.720] to this kind of stuff so for instance we built an app where you could interact with a fake [03:19.720 --> 03:23.440] social network from the Dutch golden age. [03:23.440 --> 03:27.440] So you would walk around in a museum and then you would walk next to a Rembrandt painting [03:27.440 --> 03:34.000] and then Rembrandt would send you a private message and wanted to become your friend. [03:34.000 --> 03:40.840] And that way it actually told a story about that golden age that was also already like [03:40.840 --> 03:41.840] a social network. [03:41.840 --> 03:51.080] It told the story of history basically through the current situation and it's still used [03:51.080 --> 03:54.840] by children mostly for education. [03:54.840 --> 04:02.320] Other similar kind of project is where in Ghent where we created augmented reality installation [04:02.320 --> 04:07.440] where there was actually a chat, a little chat going on here and there was an archaeologist [04:07.440 --> 04:14.320] who was chatting to you about the objects that you would scan. [04:14.320 --> 04:18.720] Another project that was really nice during COVID actually was Distance Disco. [04:18.720 --> 04:24.240] And due to disco which is like an app where you dance silently with your headphones on [04:24.240 --> 04:29.000] and you're matched to somebody else and then you have to basically mimic how you dance [04:29.000 --> 04:34.560] and then based on if you find somebody who dances like you then you're probably dancing [04:34.560 --> 04:39.120] to the same song because everybody listens to another song. [04:39.120 --> 04:43.560] I gave a talk, that was written in Erlang actually, the back end for that, like with [04:43.560 --> 04:49.200] processes for everything and matching people together. [04:49.200 --> 04:51.680] That's another talk. [04:51.680 --> 04:55.760] Another talk that I actually did three years ago here was with this printer, it was also [04:55.760 --> 05:00.720] a project for Clazine where she created like some kind of interactive cooking installation [05:00.720 --> 05:02.740] from the future. [05:02.740 --> 05:08.240] So you first would have to interact with this Google speaker over here and then the speaker [05:08.240 --> 05:13.360] would tell you, ask you a few very personal questions like do you believe in God and do [05:13.360 --> 05:18.160] you value your privacy and what would you do if, I don't know. [05:18.160 --> 05:23.240] And based on those information there would be a little recipe printed out and you would [05:23.240 --> 05:29.440] get instructions on to make something in that installation. [05:29.440 --> 05:36.680] So it was only logical that when Clazine got some new projects that she thought of me [05:36.680 --> 05:43.560] and she thought of, hey I have this, I have now this customer which is our customer. [05:43.560 --> 05:47.640] It's, I don't know, was some art collective of people who will approach Clazine to make [05:47.640 --> 05:49.800] some kind of installation for a conference. [05:49.800 --> 05:54.880] So like a conference like this where there would be somewhere a back channel with information [05:54.880 --> 05:57.560] on how the people in the conference are doing. [05:57.560 --> 06:03.760] So for instance a graph of the mood or tweets or pictures etc. [06:03.760 --> 06:09.560] And she thought, hey why would we show it on the screen, why not show it in a knitting? [06:09.560 --> 06:13.200] Which is logical, right? [06:13.200 --> 06:17.240] And then she thought of me, this doesn't work, sorry, I have to do it like this. [06:17.240 --> 06:21.840] Because actually ten years ago I already hacked a knitting machine once together with two [06:21.840 --> 06:26.920] very talented people who did actually most of the knitting, I just did most of the software [06:26.920 --> 06:29.480] around it. [06:29.480 --> 06:35.920] But this was also a long time ago, you can I think still look this project up. [06:35.920 --> 06:43.480] So Clazine thought, well I want to make like a giant knitting for a conference where everything [06:43.480 --> 06:47.440] that is happening in the conference gets knitted out and then we have like this big carpet [06:47.440 --> 06:56.200] that you can still look out after, like a big blanket of conference feedback. [06:56.200 --> 07:02.040] So she asked me like do you want to do this project and I was like yeah why not. [07:02.040 --> 07:08.040] Because it was for me, it's not like I do this kind of stuff full time, it's more that [07:08.040 --> 07:13.360] I do it because I just like it and whenever Clazine has an idea I just do it. [07:13.360 --> 07:19.920] So we went on to eBay or Markplatz actually and we bought this pass up electronic knitting [07:19.920 --> 07:27.280] machine which is a machine from I think 30 or 40 years ago, Swiss made so very well made. [07:27.280 --> 07:32.560] Some people describe this machine as the Rolls Royce under the knitting machines. [07:32.560 --> 07:37.560] So I thought hey this is a nice machine to look at and to see if I can make it knit what [07:37.560 --> 07:39.720] I want. [07:39.720 --> 07:44.120] So I bought it and I put it in my home. [07:44.120 --> 07:49.360] So now I have a room which is basically the knitting room because it's a large machine, [07:49.360 --> 07:52.080] it's like I couldn't bring it unfortunately. [07:52.080 --> 07:58.280] I would have and I thought well it's like a printer right, it has pixels, every knitting [07:58.280 --> 08:04.720] is a printer, it's a pixel and I just write a printer driver for it basically. [08:04.720 --> 08:12.520] Now well it's not that easy as it turns out, unfortunately and over the last couple of [08:12.520 --> 08:18.200] months I've grown a lot of respect for the whole knitting industry, robotics things [08:18.200 --> 08:22.360] because there's actually a lot more to it than just, now we as a software developer [08:22.360 --> 08:27.200] we're very lucky to be in such a stable environment where we just write code and it does something [08:27.200 --> 08:34.700] or it doesn't something but there's nothing in between, it's not hardware, it is kind [08:34.700 --> 08:41.360] of, it's kind of interesting to learn and also I found out there's actually YouTube [08:41.360 --> 08:49.560] videos of people operating this machine and those people are usually like 60 year old [08:49.560 --> 08:58.600] women but they can do it so well there's like a lot of instructions how to do that and there's [08:58.600 --> 09:04.080] a lot of parameters to tweak and a lot of weird tools that you have to use to get it [09:04.080 --> 09:10.920] right but eventually I got it somehow working. [09:10.920 --> 09:14.920] It's basically the parameter space of like you have to have a certain knit, you know [09:14.920 --> 09:19.200] a certain thickness of the yarn and you have to like the proper tension of the yarn because [09:19.200 --> 09:23.960] otherwise you get loops, it is unbelievable how much, it's like it's basically like trying [09:23.960 --> 09:29.680] to learn to play the violin or trying to yeah something like that and like playing, trying [09:29.680 --> 09:34.600] to play the violin without a proper instructor present or the instructor has died already [09:34.600 --> 09:38.240] because it's such an old violin. [09:38.240 --> 09:48.200] So I have a very small clip of me knitting if it's here, hello, oh there we go, it takes [09:48.200 --> 09:56.800] a while and there's no release, no sound, oh that's very short but this is basically [09:56.800 --> 10:02.600] how it goes so the machine is there, there's yarn coming in from the top and the machine [10:02.600 --> 10:09.400] goes over the needles, there's a lot of needles here and then once this carriage goes over [10:09.400 --> 10:14.240] it basically the needles hook into it and make it like a yarn or knitting and the knitting [10:14.240 --> 10:19.240] comes out underneath. [10:19.240 --> 10:25.720] And how did I want to automate this, I have to watch my time a bit and so I'm going okay. [10:25.720 --> 10:34.600] I actually found online some Germans who actually used this machine before to hack it because [10:34.600 --> 10:39.160] there's actually, damn it, this doesn't work. [10:39.160 --> 10:44.960] So what I wanted to replace was this, how you used to program it was basically there [10:44.960 --> 10:49.760] was this big flow chart in this manual where you would need to press the buttons in a certain [10:49.760 --> 10:54.240] combination and then set the dials, everything and then upload the pattern and the way you [10:54.240 --> 11:01.040] upload the pattern is you basically take a piece of matrix paper like with a grid and [11:01.040 --> 11:08.560] you make some of the cells you make black and that's basically your pattern so you draw [11:08.560 --> 11:14.240] pixel art on a paper and you feed the paper into this scanner because this is kind of [11:14.240 --> 11:21.360] a scanner and then this thing somehow says okay well I've now remembered that pattern [11:21.360 --> 11:26.400] and then this machine communicates with the thing that goes and the carriage that goes [11:26.400 --> 11:31.600] back and forth and that actually then nits that pattern. [11:31.600 --> 11:40.040] I did not try to do that because it sounded very hard and so instead I found this space [11:40.040 --> 11:46.000] from the hackerspace Bamberg in which they used an Arduino because this is the connector [11:46.000 --> 11:49.920] that you need to plug into the console so I basically replaced the whole console with [11:49.920 --> 11:55.440] an Arduino so on one side there's the Arduino communicating with the carriage and then out [11:55.440 --> 12:01.120] comes digital signals, just a serial protocol that goes back into the computer and then [12:01.120 --> 12:07.120] the computer can tell you know knit this pattern, knit that pattern etc. [12:07.120 --> 12:12.480] If you have more questions about this I can answer a lot, I'm not going to do it right [12:12.480 --> 12:19.040] now but basically the new user interface that I'm working right now looks a bit like this [12:19.040 --> 12:26.480] so it's just basically a browser and also because I wanted to use live view for something [12:26.480 --> 12:33.440] so that's we're finally getting to that subject, yes. [12:33.440 --> 12:38.480] So this knitting interface shows a bit, it shows well basically where the machine is [12:38.480 --> 12:46.760] at in the knit process and it shows the current color that it is knitting, it shows whether [12:46.760 --> 12:51.800] you have to move it left or right because there is a motor, you can enable the motor [12:51.800 --> 12:57.120] so the knits automatically but you can also do it manually. [12:57.120 --> 13:01.800] So there's a little counter, it has a start-stop button and it has several configuration things [13:01.800 --> 13:06.040] like because it's a very big knitting machine so you have to specify or you have to knit [13:06.040 --> 13:12.880] it here or knit it there, it's so wide and then you can upload a pattern so you can type [13:12.880 --> 13:19.320] in 1 to 0's here basically literally you can type in 1 to 0's and it will then create [13:19.320 --> 13:25.000] a pattern and then there's a state machine that will loop through that pattern to send [13:25.000 --> 13:30.040] the proper instructions to the Arduino. [13:30.040 --> 13:34.840] So I'm going to demo that a bit later because first I want to go a bit into the detail of [13:34.840 --> 13:41.760] this live view, well it's not only live view, it's basically just a Phoenix or just an [13:41.760 --> 13:45.720] elixir project that has several parts. [13:45.720 --> 13:50.320] One of it of course is the user interface which is all the way over there and the other [13:50.320 --> 13:54.280] part is the actual knitting machine that's over here so it's connected with an Arduino [13:54.280 --> 14:01.360] like I showed and the Arduino is connected to the elixir so this middle part is the interesting [14:01.360 --> 14:05.520] software part that I've built. [14:05.520 --> 14:10.000] So there's a few components here and I've created some kind of color coding for that [14:10.000 --> 14:17.120] I invented myself so basically green is an Erlang process or elixir process and orange [14:17.120 --> 14:28.560] is like state, it's just data and without color is something that is not very interesting. [14:28.560 --> 14:36.080] So basically whenever I used the NERVs UART library I think it was already mentioned that [14:36.080 --> 14:41.720] the NERVs project is really nice for doing IoT kind of things with elixir so UART is [14:41.720 --> 14:46.800] the protocol, it's basically a serial port so whenever you program an Arduino you can [14:46.800 --> 14:52.480] tell it to send and receive serial commands and you can very easily listen to them with [14:52.480 --> 14:54.000] elixir. [14:54.000 --> 15:00.760] There's a monitor that basically looks for the serial port so I can hot plug basically [15:00.760 --> 15:05.560] the knitting machine into my computer and pull it out. [15:05.560 --> 15:13.960] And then basically whenever it receives some serial packet, just a line, basically just [15:13.960 --> 15:19.920] a text line, it sends us over, Phoenix pops up to the rest of the system. [15:19.920 --> 15:23.840] And then there are several other components that listen to those serial commands, one [15:23.840 --> 15:33.640] of them is the control which is a gen server that basically has all this state, basically [15:33.640 --> 15:39.120] Asia has all this state like where am I in the knitting etc. [15:39.120 --> 15:44.240] So that gen server holds the state of the knitting machine itself so that basically [15:44.240 --> 15:49.080] has the task of transforming this pattern plus the settings into a sequence of commands [15:49.080 --> 15:56.000] that needs to be sent out to the knitting machine and also the state is also updated [15:56.000 --> 16:00.120] whenever a new serial commands come in. [16:00.120 --> 16:07.320] And then the control is also connected to the live view which actually shows everything [16:07.320 --> 16:15.640] that is being done. [16:15.640 --> 16:21.560] So what I'm going to talk the rest of is mostly this part because that's the title of the [16:21.560 --> 16:29.000] talk, it's about a live view and how that works and what it is actually, how it works [16:29.000 --> 16:35.800] in my case. [16:35.800 --> 16:36.800] Are there any questions? [16:36.800 --> 16:38.600] Oh, I have 10 minutes left, really? [16:38.600 --> 16:39.600] Okay. [16:39.600 --> 16:40.600] I have 10 minutes left. [16:40.600 --> 16:45.880] So let's go a bit quicker now. [16:45.880 --> 16:46.880] What is live view? [16:46.880 --> 16:52.360] Well, from the docs it says live view provides rich real time experiences with user rendered [16:52.360 --> 16:57.920] HTML and to understand or with server rendered HTML and to understand what that actually [16:57.920 --> 17:03.440] means, let's dive into a little bit of the web history. [17:03.440 --> 17:07.440] When this whole internet thing started, the first thing there was was just a browser with [17:07.440 --> 17:08.440] HTML, right? [17:08.440 --> 17:13.280] So you had a web server, you uploaded the HTML file too and you just view it. [17:13.280 --> 17:14.280] That's basically it. [17:14.280 --> 17:20.360] And when you want to go to another page, you just click a link and you view the other page. [17:20.360 --> 17:21.360] That's basically it. [17:21.360 --> 17:26.360] This is just what we now call a static website, very static. [17:26.360 --> 17:28.600] So that worked pretty well for a while. [17:28.600 --> 17:34.200] And then when at some point people thought, well, we can also not make the static, but [17:34.200 --> 17:37.400] we can send something different back every time. [17:37.400 --> 17:45.560] So that's when it became DHTML, dynamic HTML, PHP was born, other programming, I'm getting [17:45.560 --> 17:52.600] feedback from the mic now, it's a bit irritating, whatever. [17:52.600 --> 17:55.400] So basically, the HTML became dynamic. [17:55.400 --> 18:00.280] So there was a lot of logic on the server, you would make a PHP file that rendered out [18:00.280 --> 18:01.280] HTML. [18:01.280 --> 18:05.440] The HTML was different for each user even because there were sessions, you have cookies [18:05.440 --> 18:09.880] where you store basically the state like this user is logged in, this user has this stuff [18:09.880 --> 18:11.640] in his cart, whatever. [18:11.640 --> 18:16.280] So there's a lot of logic on the server that renders into HTML and then the HTML is just [18:16.280 --> 18:20.040] sent over the wire and the browser displays it, win, done. [18:20.040 --> 18:21.880] So that worked pretty okay. [18:21.880 --> 18:25.680] But it was not really interactive because every time you had to do something on the [18:25.680 --> 18:27.800] site, it would reload the page. [18:27.800 --> 18:32.200] So then at some point people thought, hey, I can make little effects, I can do hovers [18:32.200 --> 18:34.280] and animations. [18:34.280 --> 18:42.600] So we make a JavaScript as born basically, I think with IE version, something free, it [18:42.600 --> 18:44.520] started to became popular. [18:44.520 --> 18:49.160] So there was a bit of JavaScript written to make things a bit more lively and a bit more [18:49.160 --> 18:52.440] dynamic without having to reload the page every time. [18:52.440 --> 18:55.120] Well, of course, you know what happened next. [18:55.120 --> 18:58.880] So JavaScript became very big. [18:58.880 --> 19:02.560] So a lot of the logic was actually moved to the client. [19:02.560 --> 19:05.760] So the pages did not reload every time. [19:05.760 --> 19:11.400] It's basically just load the page one time and then JavaScript basically takes care of [19:11.400 --> 19:12.400] the rest. [19:12.400 --> 19:20.520] It traces parts of the HTML with other parts, it even sends you to another URL without actually [19:20.520 --> 19:24.720] reloading the page with push state kind of things. [19:24.720 --> 19:29.920] So there was a lot of logic on the client suddenly. [19:29.920 --> 19:37.000] And it would fetch underwater, not over HTML, but it would just use what's called Ajax, [19:37.000 --> 19:41.840] but currently we have rest and GraphQL, all kinds of protocols to get data into the [19:41.840 --> 19:45.720] client and then do stuff with the data. [19:45.720 --> 19:50.920] So there was a lot of logic suddenly on the client. [19:50.920 --> 19:51.920] And this is still the case. [19:51.920 --> 19:59.880] I think when you write JavaScript, there's like any web project is quite heavy on the [19:59.880 --> 20:03.600] server side or on the client side. [20:03.600 --> 20:10.800] Now with LiveView, the pendulum has swung in the other way a bit again because they're [20:10.800 --> 20:15.360] actually very interesting thing about LiveView is that we can do very interactive things. [20:15.360 --> 20:18.800] We don't have to reload the page every time to do something interactive. [20:18.800 --> 20:24.560] We can stay on the same page, but we can still dynamically change parts of the page without [20:24.560 --> 20:32.640] having to do very heavy, create all kinds of APIs and do complicated things. [20:32.640 --> 20:44.320] So suddenly with LiveView, the logic is again mostly for 99%, I would say, back on the server. [20:44.320 --> 20:48.480] So it's actually, it's like a bit again from back in the old days. [20:48.480 --> 20:52.800] You just render something, you just put it to the browser and then the browser displays [20:52.800 --> 20:53.800] it. [20:53.800 --> 20:54.800] It's as simple as that. [20:54.800 --> 20:58.680] You don't need to write a lot of JavaScript unless you really want to. [20:58.680 --> 21:05.440] That's actually one of the promises of LiveView that you can make UIs very quickly just staying [21:05.440 --> 21:10.640] in Elixir and just templating from Elixir. [21:10.640 --> 21:14.760] So how does that actually work? [21:14.760 --> 21:18.320] Is there a diagram on the next slide? [21:18.320 --> 21:19.320] Yes. [21:19.320 --> 21:28.600] So basically what happens is, I can show this one first. [21:28.600 --> 21:30.680] So there's one LiveView process. [21:30.680 --> 21:38.760] So basically in Erlang, processes are very lightweight, five minutes left, oh no. [21:38.760 --> 21:43.920] Templates are rendered on the server and they are rendered every time you update the state. [21:43.920 --> 21:50.200] But it does not send the whole template over to the client, it just sends the things that [21:50.200 --> 21:52.920] are changed. [21:52.920 --> 21:55.080] So basically it works a bit like this. [21:55.080 --> 22:00.640] So the first time it renders, we get some HTML and then it actually connects over a web [22:00.640 --> 22:04.560] socket and then it says, hey, I'm a LiveView process and I can now interact with you. [22:04.560 --> 22:10.040] So and then whenever some state changes, the browser is now connected to the process in [22:10.040 --> 22:12.400] the corresponding process in the server. [22:12.400 --> 22:18.880] So when the state changes, it actually re-renders something and it actually just sends the things [22:18.880 --> 22:22.680] that have changed, sends it to the browser and then the browser is intelligent enough [22:22.680 --> 22:29.120] that it can just patch small parts of the DOM tree to just change that part and not [22:29.120 --> 22:31.080] change everything. [22:31.080 --> 22:36.200] So that makes it very lightweight, very flexible. [22:36.200 --> 22:41.080] And this is a bit, well, when you start with this, it is re, it's now integrated into [22:41.080 --> 22:48.600] Phoenix, the Elixir web framework and I will give a little demo now, I think. [22:48.600 --> 22:50.360] So let's make the knitting live. [22:50.360 --> 22:57.920] So it would look a bit like, when you write an Elixir module, it looks a bit like this. [22:57.920 --> 23:00.640] There's always something that you have to write, it's mount. [23:00.640 --> 23:05.920] When you mount something, you just return, okay, I'm mounted and I have some assigns in [23:05.920 --> 23:06.920] my socket. [23:06.920 --> 23:10.400] It's a bit like normal Phoenix templating. [23:10.400 --> 23:15.520] You assign things to something and then you can render, use those assigns to render something. [23:15.520 --> 23:22.320] So back below here, there's actually the render function and in this case, it just renders [23:22.320 --> 23:25.400] an image tag, image class movie. [23:25.400 --> 23:26.400] Wonder what that is. [23:26.400 --> 23:33.400] And the source is some kind of, is an image URL with a variable in it, a frame. [23:33.400 --> 23:37.280] The frame is a sign that is assigned here. [23:37.280 --> 23:41.200] So it renders a single image. [23:41.200 --> 23:47.880] And whenever a serial command comes in from a serial port, basically it calculates a new [23:47.880 --> 23:51.120] frame and then assign it to the socket again. [23:51.120 --> 23:55.720] So this triggers another render here and it will probably change the frame number so it [23:55.720 --> 23:57.820] will change the image. [23:57.820 --> 24:02.280] So this basically connects the serial port to a live view. [24:02.280 --> 24:06.640] I think that's better. [24:06.640 --> 24:10.040] So I actually have a demo of that because I actually, well, I did not bring my knitting [24:10.040 --> 24:15.640] machine, I actually brought my knitting machine emulator, which is an Arduino with a potential [24:15.640 --> 24:17.960] meter attached. [24:17.960 --> 24:27.280] And I can probably now, this will fail, but who cares, plug it in. [24:27.280 --> 24:32.280] And then we go to this. [24:32.280 --> 24:37.280] So if you look in the source, we see somewhere near this, this is the one. [24:37.280 --> 24:38.280] We see the movie. [24:38.280 --> 24:41.000] It's now at frame number 15. [24:41.000 --> 24:51.440] And then if we, is it running, should be running. [24:51.440 --> 24:55.800] If we now turn the knob, yes, okay. [24:55.800 --> 24:56.800] So now I can knit. [24:56.800 --> 25:07.320] See, I am knitting. [25:07.320 --> 25:11.200] So I did not bring my whole machine, but I brought a virtual version of myself that is [25:11.200 --> 25:12.200] now at home. [25:12.200 --> 25:17.200] And I can control it through this little Arduino over here. [25:17.200 --> 25:21.600] Yeah, I thought of this last night to demo it like this. [25:21.600 --> 25:29.480] It was not really prepared, but yeah, so that, I hope that gets you a bit of the idea [25:29.480 --> 25:31.800] how live view updates its state. [25:31.800 --> 25:36.000] And in this case, it is very simple, but an actual live view, of course, is much more, [25:36.000 --> 25:39.600] much bigger. [25:39.600 --> 25:48.000] And actually, that is the rest of my talk that I still need to do. [25:48.000 --> 25:49.000] Let's continue very quickly. [25:49.000 --> 25:50.000] How much? [25:50.000 --> 25:51.000] Oh, time's up. [25:51.000 --> 25:52.000] Is it really up? [25:52.000 --> 25:57.560] I think that you can take like one or two minutes, so I don't know where. [25:57.560 --> 25:58.560] Okay. [25:58.560 --> 26:01.920] I will quickly skip through the next slides then. [26:01.920 --> 26:07.400] So you can imagine that writing a single elixir module with every logic in it, you get one [26:07.400 --> 26:08.920] big assign with everything. [26:08.920 --> 26:10.040] It's not really scalable. [26:10.040 --> 26:12.480] So there are actually two things to make that scalable. [26:12.480 --> 26:13.840] You make components. [26:13.840 --> 26:17.800] So one of the components is function components, which are basically just rendering templates [26:17.800 --> 26:19.360] inside functions. [26:19.360 --> 26:24.320] And then the other ones are Phoenix live components, and those are basically like sub-live views [26:24.320 --> 26:28.000] in your live view that have their own state and their own render function and their own [26:28.000 --> 26:30.920] mount function. [26:30.920 --> 26:35.040] So in this case, in my UI, these are, I just created a few components. [26:35.040 --> 26:38.640] One component is settings components, which contains a form. [26:38.640 --> 26:43.400] Another component is a row component that just renders a single row. [26:43.400 --> 26:46.520] So this row component is very simple. [26:46.520 --> 26:54.520] It just renders basically a set of divs, and then you can call it like this. [26:54.520 --> 26:59.040] So it's basically, in the template syntax, using function components, basically the same [26:59.040 --> 27:04.160] as a normal tag, but you prepend it with a dot, which is because it's basically a function [27:04.160 --> 27:07.400] call. [27:07.400 --> 27:10.880] And the live components are stateful. [27:10.880 --> 27:15.400] So live components have their own states, or they have a mount, you can assign things [27:15.400 --> 27:16.400] to there. [27:16.400 --> 27:20.880] And what I already said, it's a live view inside a live view. [27:20.880 --> 27:28.280] And so these signals directly communicate with the live components in this case. [27:28.280 --> 27:33.920] Then there's some more things like slots you can create like different parts of your component [27:33.920 --> 27:40.840] and make them into like separate things where you can put part of your DOM tree as well. [27:40.840 --> 27:45.120] And I just wanted to say there's a lot out there, like there's a big community, and [27:45.120 --> 27:47.760] I think live view is really getting a lot of traction. [27:47.760 --> 27:48.760] And it's actually a shame. [27:48.760 --> 27:52.360] I have not done anything really with live view in production, actually. [27:52.360 --> 27:54.600] I wanted to make a disclaimer there. [27:54.600 --> 28:01.560] But I really like where it's going, and there's a lot of projects popping up with component [28:01.560 --> 28:05.120] libraries and people making stuff on top of it. [28:05.120 --> 28:10.680] There's the storybook project, which is also very nice, which allows you to make a library [28:10.680 --> 28:15.720] of components and then have like a live environment somewhere where you can document these components [28:15.720 --> 28:20.400] and try them out and copy-paste the code for you to use inside your live view. [28:20.400 --> 28:25.640] So there's a lot of things, there's JavaScript integration, which I'm not going to show. [28:25.640 --> 28:29.560] There's live view native coming up, it's also very nice technology where you don't render [28:29.560 --> 28:34.200] things to the browser, but you render things into a native app, so you actually build like [28:34.200 --> 28:40.620] a native app, like what the React Native is to react is, well, you get the drift. [28:40.620 --> 28:50.400] So thank you for listening. [28:50.400 --> 29:12.360] Thank you, Arjen.