Today we talk with Abul Asar Sayyad, a software engineer from Mumbai, India.  Working for ID Plans, a commercial property management solution.  We discuss his blog article about combining GraphQL with LiveView for rendering on the front end.  We also dive into GraphQL libraries, working with LiveView, and testing. 

Links

Sascha Wolf (00:01.474)

Hey everyone and welcome to another episode of Elixir Mix. And this week on the panel we have Adi Iyengar, Alan Wymer,

 

Allen (00:11.666)

Hallo van Chicago!

 

Sascha Wolf (00:14.802)

And me, I'm me, I'm Sasha Wolf. And of course we have a special guest this week and that is Abul Assa Sayed. So Abul, why don't you tell the audience why we invited you and what we are gonna talk about today?

 

Abulasar Sayyad (00:28.042)

Yeah, sure. So thank you very much for having me here. So I'm Abul Asar. You can just call me Abul. I'm a software engineer from Mumbai, India. So currently I'm working remotely for a US-based real estate company called ID Plants. So ID Plants is something, it's a company that provides software for commercial real estate. So here I'm mostly working on JavaScript. on JavaScript stack, JavaScript and AWS stack. We have multiple Node.js services which are consumed on Ambitious and React. So regarding like this talk is about Elixir. So my journey regarding Elixir started with... Introduction to functional programming which I got introduced by one of my previous colleague Patrick Rabier. He was one of my senior. Hi Patrick if you're listening to this podcast So he introduced me to the ideology of from functional programming in JavaScript and at that time We also had JavaScript Ruby in the project. So it didn't much make sense about elixir at about functional programming at that time, but then I got introduced to functional to Elixir which is a functional programming language and it has syntax very much similar to Ruby. So since then like I tried Elixir and Node, like Node is like it's beautiful syntax, it's easiness and the best thing about its concurrency. And the main thing that caught my eye was Phoenix LiveView something which, it's very easy like as my career started as a front end developer so LiveView something was very, very front end focus and real time thing was very cool. So yeah, that's all my about Alixur and Phoenix live view that's how I got started yeah

 

Sascha Wolf (02:30.514)

Nice, nice. So we mostly invited you for like a one blog post you've been posting, right? Where you like have been using GraphQL to then combine it with Live View to render some things on the front end. Maybe you want to give us like a super short rundown of like the gist there.

 

 

Abulasar Sayyad (02:49.630)

Yes, absolutely. So like, like, I always wanted to have a portfolio website of me like the flashy cool one. So I already had a blog, I have a blog, abuloso.com from where this blog got famous. So like it is hosted on node on node.js on hash node, sorry. So, but I projects so I decided to create this website abulasa.dev which I created in Phoenix live view and I also wanted to have. a blog or a section or a tab where I can show my blog. So initially I thought to add a CRUD like functionality, but I came across Hashnode developer API, which is very simple and intuitive and it was in GraphQL format. So I wasn't very much aware about GraphQL and how to consume it in an Alexa application. Then I did some research and came across Neuron library in Alexa and it worked. So it was a good learning experience and I thought why shouldn't I share it with everyone through my blogs. So yeah, like I published this blog and shared my experience, what was the challenge I faced and all. So yeah, it was pretty cool.

 

Sascha Wolf (04:18.882)

Yeah, that sounds great. It's kind of funny because just last week, Adi and me recorded like a panelist episode where we talked about a bunch about GraphQL and building APIs and like consuming GraphQL and publishing a GraphQL API. So kind of interesting to see how the circuit closes here. I don't think it has been out yet as of a point of this recording. So probably haven't heard it yet. But yeah, so it's cool to see that now we can actually talk a little bit how this can be used in a real world scenario, so to speak. I mean, it's still a pet project, right? But at the end of the day, it's still code running somewhat in production. So, before we hit the record button, we actually briefly cut into why you chose this particular GraphQL library and especially...that there are apparently a bunch of GraphQL libraries out there to consume GraphQL APIs. So would you like to enlighten us a little bit on that? Like what kind of libraries you've encountered and why you ended up with this one and what kind of thoughts went into that, you know?

 

Abulasar Sayyad (05:31.122)

Yeah, like honestly, I don't remember much like what library I came across like when I was doing the research. The best like one thing I didn't told you about like before using graph QL.

 

Sascha Wolf (05:41.054)

Seems like we lost the booth.

 

Adi Iyengar (05:44.122)

Sasha, I thought I had frozen because you were also frozen with your cup.

 

Sascha Wolf (05:50.402)

Ah, okay, there you are, you're back up, great. We had lost you there for a second, so why don't you just start over?

 

 

Abulasar Sayyad (05:57.163)

Oh, all right, all right. So yeah, like one thing I didn't tell you about, like before starting this project in Live View, I started, I tried to make this application in AmberJS since I am kind of, I have expertise in AmberJS as well, the JavaScript framework. So when I started that project, I kind of got a taste of how to make query in GraphQL from front end point of view. So when I was going through different libraries, and honestly I don't remember the library what I had gone through, but like I said, I got the taste of how to query GraphQL. And that similar thing I got, that similar thing I got in this library, Neuron as well. So it was very something like what I had seen in AmberJS, same thing I got in LiveView as well. So I thought it's better to do, use this library. And also like what we discussed earlier, like it's very easy to configure. That was the best thing. We just have to use the Neural.set and you have to provide the endpoint from the source where you want to fetch data. Obviously that had, that has some limitation of multiple. sources if you have if you want to have fetch data from multiple sources that can be challenging one but for my case for fetching from single to single turn source that was pretty much sufficient. Yeah.

 

Sascha Wolf (07:33.058)

Yeah, fair enough. Adi, I would actually be interested because I think last time we spoke you also mentioned that you were basically aggregating GraphQL into a service and I assume you must be using a GraphQL client for that, right? So what is it? Oh, you built one! Oh!

 

Adi Iyengar (07:45.860)

Yeah, we built one. This was in 2017, end of 2017, Absent was still very new. I think we were the first one to build. It's AnkiSem is a company and it's called Common GraphQL Client. I don't know how they're maintaining that they must be because their production applications are reliant on that. But that is not singleton like Neuron is. You can use it in a very kind of like a low level way where you just use it as a kind of an interface to stitch together your variables and arguments, right, and construct a query like Neuron is. Or you could also build API schemas and do client side validation with that. And that's also something we touched in the last episode, Sasha, that GraphQL, a huge advantage of GraphQL is that before sending your query, you can validate the types and all that with client side query validation. So that client supports that. So Abul, you should maybe try out common GraphQL client. Yeah, yeah, thanks for mentioning it, yeah.

 

Abulasar Sayyad (08:50.439)

Obviously, yeah, yeah, and thanks for mentioning it. Yeah, surely I'll I'll try that. Yeah

 

Adi Iyengar (08:57.534)

Yeah, I was just kidding. I'm not sure if it's maintained, but it's just like, shame this self-promotion. But yeah, we use that for most part because of the schemas, the way schemas were written. It was very easy to like stitch that, stitch multiple APIs into same schema, which I don't know if Neuron has like a concept of client schema, right? It's like very low level.

 

Abulasar Sayyad (09:21.498)

No, no, I think yeah, you're absolutely right. There is no this concept of schema in a neuron.

 

Sascha Wolf (09:29.046)

So it seems like Common GraphQL was last updated in May 2021. So not completely dead, but... It's... Okay, so Alan, I think you also have a bit of GraphQL experience, right? I mean, we were not there last time, but I think you mentioned something like that a while ago, so... Any wisdom to share?

 

Allen (09:55.394)

Yeah, GraphQL is nice, but there is a couple of tricky bits you got to be careful about, right? Mostly about when you're creating the API. The coolest thing that I like is that you can say, okay, you can make custom types, you can have it so that they have to conform to something, you can do this kind of stuff. And the cool part is you don't have to worry about that when you get down to the resolver. So actually resolving the queries and mutations. But the crap part is that you need to make sure that if you declare something not null, you don't actually return a null value. So you have to kind of be careful about that part. I think, you know, it's got its pluses and minuses, but overall it's kind of nice. The one thing that you have to also be careful about too, for some weird reasons, mutations are fine. Queries are fine, but subscriptions? Everybody does their own way of doing subscriptions, which is basically like PubSub over the wire. It's nuts. So if you use a GraphQL library, which I'm sure Adi probably ran into this one, you need to be able to implement however your server side implements subscriptions, if you want to use subscriptions. So I just stopped using subscriptions to just use Phoenix channel. That's what I do. I think Adi has more things to say than me since he created a client. I didn't create a client. I used whatever's out there.

 

Sascha Wolf (11:07.629)

Yep.

 

Adi Iyengar (11:07.726)

Yeah, I think as long as, from the subscription side, as long as on the server side, the schema for subscription was consistent with one of the other queries. Generally, that's the case. On the client side, it's pretty simple. Yeah, it gets tricky when you...Deviate a little bit and that's kind of what you were getting at right like when when it's inconsistent Because the data is real time uh on a on the client side you need to know how to kind of like um On replace on on replace replace right or on replace update like make sure you have a consistent way of updating uh data on

 

on the client side, but yeah, I mean, actually glad you brought subscriptions because I was going to ask Abul like if he has tried using subscriptions with Live View because I think that's like a marriage made in heaven in my opinion, which is like simple pop sub and tied to like a Live View and which and pop sub tied to a GraphQL subscription.

 

Sascha Wolf (12:15.346)

I wanted to ask the exact same thing, yeah.

 

Abulasar Sayyad (12:20.179)

So, yeah, like, honestly, I haven't tried, but yeah, while working on this, on this project and I got the taste of. of GraphQL, I decided to do some exploration, explore a little about GraphQL. So yeah, I came across this concept, but there wasn't any scenario where I can use a subscription in my project. But yeah, obviously like after knowing this GraphQL format, how it can be useful in API for saving the data, for like if you're making query, there are loads of unnecessary association. 

 

Sascha Wolf (13:01.162)

We lost that pool again.

 

Abulasar Sayyad (13:01.878)

that comes along with the API request. So at that time I thought it should, I can consider it as for my any side project. So yeah, so coming to a question like if I have tried it for.

 

Sascha Wolf (13:04.542)

It's just the fate of remote podcast recording peeps.

 

Allen (13:10.934)

He's building up the dramatic end, okay? We'll call it climax.

 

Adi Iyengar (13:13.300)

Yep.

 

Sascha Wolf (13:15.515)

Ah, that sounds good. We can play some waiting music. Bing, bing, bing, bing, bing, bing, bing. Okay, Abul is back. We lost you again, Abul. It's not your fault, I don't think you're wiggling on your router cable, right? So that's just the way the cookie crumbles. Abul, what did we left off, sorry? Subscriptions, yes.

 

Allen (13:20.562)

There might be something there, did you check to see what's there? You have some...

 

Adi Iyengar (13:22.622)

Oh, he's back. Okay, I'm really back. We lost you again, Abu. It's not your fault. I don't think you're wiggling on your router cable, right? So, it's just the way the cookie crumbles. Abu, what did we left off? Subscriptions. Abu was talking about exploring it, yep.

 

Abulasar Sayyad (13:25.038)

Oh my god, I'm really sorry. I'm really sorry then that.

 

Abulasar Sayyad (13:43.626)

Yeah, so like I said, I didn't get much chance to explore in this project. But knowing about after exploring about GraphQL, like how it can help you in saving bandwidth, saving your bills for your product if you are using GraphQL. So I thought to consider it for my upcoming projects. Like we are in some kind of discussion, me and my friend, we are in some kind of discussion to create for school project where I'll be using Alixir. So it will be a mobile based application. So in that case to save some bills and yeah, in that case it can be helpful. And obviously the desktop application I'm considering will be in live view, obviously because it's cool.

 

Adi Iyengar (14:42.606)

One quick news that I learned last week, Uber is planning on using one of their internal APIs, GraphQL APIs, they're planning on using Phoenix for that. Because they determined doing subscription with any other GraphQL server technology is a lot of work. And Elixir and Phoenix have it built in and apps and work so well with Phoenix. And it's built for concurrency. You can have multiple clients subscribe to a Phoenix

 

Adi Iyengar (15:10.542)

GraphQL subscription that Uber is using Elixir now, or planning on using Elixir. It's pretty great, pretty good news for the community. It's almost as if the beam was building. the electricity. Right. Right.

 

Sascha Wolf (15:19.282)

It's almost as if a beam was built for keeping lots of connections alive.

 

Sascha Wolf (15:30.038)

Sorry, I had to plug that in there. But yeah, actually, we now talked a little bit about subscriptions, and something which Adi just said is about subscriptions and... Life, you probably will be a match made in heaven. So, I mean, you said that this was not an angle you explored, but...I guess, I mean, you said that most of the things you've been working with Elixir have been live view, so what other... Kinds of like wisdom is there like what way said okay? This was something I have tried out This was like an interesting learning about like for example you using Building something with Phoenix live you because I think most people when they hear live you they probably still think like a classic I don't know crud app which creates some data read some data updates and they delete some data Probably with some kinds of persistence layer and then for example subscriptions And subscriptions also attack that few where you have live updates are only what? to a certain degree useful, but I mean, like right here, seeing here, okay, I have an app which renders something and it's using like an external source or it's using like some kind of firmware storage. I feel there's a whole slew of potential there for...Maybe even using a Phoenix app of LiveView as some kind of glue for something external. I think there's potential there to be made. So anything interesting you can share in terms of your LiveView journey, let's call it that.

 

Adi Iyengar (17:01.744)

it's called a bet? Yeah, that's a good question. So for LiveView, the main reason I love LiveView is about the real-time update. I'm very passionate about creating real-time application and how easy it is with LiveView. So yeah, like in my blog, if you'll see one of the blogs I wrote about the

 

Abulasar Sayyad (17:03.238)

Yeah, that's a good question. So for LiveView, the main reason I love LiveView is about the real-time update. I'm very passionate about creating real-time application and how easy it is with LiveView. So yeah, like in my blog, if you'll see one of the blog I wrote about. creating a note taking app what I created it was with using churn server and along with Phoenix Live View. So that blog, that was something very great learning experience in knowing about learning about Gen Server and also instead of using like you said about the persistent layer, I use Gen Server as a persistent layer in that case. So yeah, it was very cool learning experience in developing that along with I also added in that case, like if you are creating, making any change in the application, how it's affecting the other users that are exploring the app. So yeah, that was something very interesting I did. And recently... I kind of created like while working on one of my application, I'm working right now. It's a project management application that I'm creating and that we are sharing the screen with the user. In that case, it is kind of. what we can say it is a note like it's kind of screen where we where you can write something and the other user who is connected with you on the application will see what user is writing. So it's kind of screen sharing application that I have. So recently I kind of shared a small tweet of that of that thing what I've been working on. So yeah, it was very cool. How easy. The main point I love about Liveview is that it's very easy to achieve such real time things. So yeah, that's what I've been working on and that's the reason I constantly keep on working on Liveview and knowing things and whatever I learn I keep on sharing on my blog.

 

 

 

Sascha Wolf (19:40.094)

Yeah, cool. So, Adi-Ellen, any wisdom stories you have to share here? Like, where you maybe used Live View for something. Let's say more unorthodox than the usual suspects.

 

Adi Iyengar (19:41.443)

Yeah, I guess one of the things I can share is, I think I have mentioned that a few times on this podcast already. I don't like to use Liveview.directly to the router. I don't like my route directly going to the live view. It just, you just lose the control of the plug pipeline. I know, uhcontour socket. There are stuff like that built in, but if you do live redirect, stuff like that starts to break. And I always go like render a controller action and part of the page being a live view with live render, right? And that just still gives the overall shell the control of your authorization and everything, right, can still stay in the outer shell and thing that needs to be live can be, you know, yeah, scope to this just that live render part of the page. That has worked really well for us and we haven't changed that. I started that pattern in October and it has worked really well. Even today, like a couple weeks ago, we basically built Calendly because our scheduling was so complex, so we could not rely on that. And all of that is powered through LiveView, but...know, if you change the calendar, different days, different times pop up, that's part of LiveView, but the page itself is a controller because the scope of the LiveView would be determined by what private values is assigned to the connection, right? So again, that pattern has worked really well for us, but I would love to hear what Alan's been working with.

 

Allen (21:36.451)

Actually, one cool thing I did, I did a video about this, I don't know if it's necessarily unique right? One of the issues with Live View is that you, if you lose connection, you'll lose access to that data that's not saved yet. So if you have a very long form, every time you enter in something, and if you get to your router, right? You lose all that data, right? It's really painful. We never really talk about this in the community, which I think is kind of interesting, but there is times when you're in a really spotty connection and it's painful. Or for instance, like, what I do right now, or what I did before was that I had like three or four or five, six pages of a form, right, that I had to break up and I had all in one live view. And people would lose connection, like maybe they did, you know, close their laptop lid and open it back up because it's just too long. And it's gone, right? Um, I did make a video about this, how I actually solved it, which is basically using something called CONCASH, I think. In the email library. But we just cache the data, and like, I think like every six hours we all delete it. Just in case you never come back. Uh, something weird like that, I can't remember exactly how we did it, but that was basically it. So anyways, I did a video about it because I think it's very useful because... Yeah, I mean, Wi-Fi at cafes is known to be crap, right? Especially hotels. Airports are probably the worst. I just experienced that one that was horrible. For some reason, I don't know why, airport in Japan is just like the worst, which is surprising. But in any case, right? I think this is something that people need to think about. It's like, if my user is entering data and they cannot finish it, how can I give them a good experience, right? And implementing that definitely saved us a lot in the end. because people just I mean when you have to fill out like a this for weddings when you fill out your wedding stuff especially if you're the guy right you gotta go back and ask your your SO hey is this you know correct or not because I don't know what you what you like right so sorry I took a long story but in any case I think cashing is super important for long forms. Well, speaking of overkill, right? Well, I mean, the cool thing is that as you're typing, like, I have all this validation in the back end, so I want to kind of keep that. Plus, you know, SPAs are just not fun. In terms of, like, debugging and everything else, right? I'm dealing with that stuff right now. The other thing, too, that I thought was really cool, so talking about unconventional use, for that same project, like, that was when Libre was still new. Like, I was using old APIs that they way changed since then. What I thought was pretty cool. was that like, you know how you have a wedding, you can put up your, you know, you can have like an invitation site or something like that? Well, you can create your own invitation website. And what was cool is as you're looking at the website, if you decide to change the theme, it would actually change the whole theme of the page. Like I thought that was pretty cool, but everybody else thought it was not cool. Like they were like, oh no, no big deal. I'm like, what do you mean no big deal? You use PHP all the time. What do you mean? This is awesome. Yeah, but you know, people don't really do that so much. I'm like, yeah, but I did it. Yeah, I mean you could, but I think this was way before I ever heard about Tailwind. I don't know if Tailwind is even around then. But in any case, I mean the point is this, like... Yeah, like these guys, they never worked with WebSockets before, so they never thought that you could do this. And I thought it was cool, like you're looking at this site and all of a sudden the thing changes, right? I thought that was really awesome. But people were not impressed. I'm still lost.

 

Adi Iyengar (25:26.710)

Gotcha. Hmm. It's, it is cooler than PHP, for sure.

 

Sascha Wolf (25:32.511)

And...

 

Adi Iyengar (25:38.828)

Yep.

 

Abulasar Sayyad (25:45.858)

So Alan, you talked about caching the form, long forms. So did you use any specific caching mechanism or something? Or any specific library for caching?

 

Allen (25:59.950)

Well, now that you mention it, I guess it's going to be my pick for today's NetSuite video. But yeah, I mean, I think I use CONCASH as the name of the one. And you can configure like, you can configure the, excuse me, the cache key, which I think I use like the current user signed in ID. Along with like some other kind of atom to make it unique in case we had multiple ones. And what else do I use?

 

Adi Iyengar (26:01.102)

I know that you mentioned it, I guess it's gonna be my pick for today's Madness Week video, but... Yeah, I mean, I think I used Comcache as a name of it?

 

Adi Iyengar (26:12.031)

and you can configure the cache key, which I think I used the current user signed in ID, along with some other kind of animal.

 

Adi Iyengar (26:26.010)

and what else do I use? Yeah, and so once you saved it, then I would clear the cache for that one, because obviously if you went back to the form, you wanted to redo something, you don't need to keep that around. So, I'm gonna go ahead and do that. I'm gonna go ahead and do that. I'm gonna go

 

Allen (26:29.018)

Yeah, and so once you saved it, then I would clear the cache for that one, because obviously if you went back to the form, you want to redo something, you don't need to keep that around.

 

Allen (26:38.726)

Yeah, it should be con cash.

 

Adi Iyengar (26:43.294)

Oh, so it's just like etch-based cache. Gotcha.

 

Allen (26:45.922)

Yeah, yeah, it was a wrap around it. So it worked extremely well. Is that the best one? I don't know, but it worked out for me. I think it's called Khan Cash, right? I don't see it here now.

 

Adi Iyengar (26:49.518)

Thanks.

 

Adi Iyengar (26:57.166)

yeah, c-o-n-c-a-c-a-c-h-e. I found that. But I can put a link in the show notes.

 

Allen (27:08.530)

So, I mean, X is perfect for this kind of stuff, so... Oh yeah.

 

Adi Iyengar (27:11.938)

Great.

 

Abulasar Sayyad (27:13.238)

One more library that is very well known is cachex for caching. In my case, I have used cachex for saving my billings in my blogs. Whenever I want, I'll go on the blogs page, it's going to make API requests to fetch that data. I have deployed it on fly.io.

 

Abulasar Sayyad (27:39.746)

to save my billings. I just did caching of the all pages the user has visited and also if particular any blog user is opening and I have done caching of that as well. So yeah, but I have some I faced some challenge of the time interval like when I have to expire that thing I had to get come up with something that is that can give user. latest block as well as like it should not increase my bill. So I went I decided to go with the expiration time of two hours. So yeah, caching can really be useful in that case. Yeah.

 

Sascha Wolf (28:23.818)

Isn't that this old joke? There are only two hard problems in computer science. At least once delivery, cache exploration and at least once delivery.

 

Adi Iyengar (28:24.302)

I'm gonna do this old joke.

 

Abulasar Sayyad (28:27.714)

Ha ha ha.

 

Adi Iyengar (28:28.610)

delivery, cache exploration and at least once delivery.

 

Sascha Wolf (28:35.302)

So yeah, what's the thing?

 

Adi Iyengar (28:38.037)

So yeah. For GraphQL though, I think there's, usually there's an in-memory cache that you have to also.

 

Allen (28:38.419)

For GraphQL though, I think there's usually there's a in-memory cache that you have to also clear, I think. I remember this like looking at some videos. I never really used that. But I think you already know what I'm talking about. Like a lot of these ones have it. Yeah.

 

Adi Iyengar (28:52.741)

just looking at some videos. I never really used that. Yeah. Yeah, I mean, caching with GraphQL in general is a little tricky. It just needs a little extra thought. But you're right, if you're using a general HTTP cache and it doesn't, there's no timestamp or anything in the query, then of course, you have to make sure, be more intentional about clearing it.

 

Allen (29:13.614)

Yeah, that was one thing I think was tricky about GraphQL, is that there was no really clear way that you could add, like, an e-tag or something like that. You can... That was just something that we ran into a lot.

 

Adi Iyengar (29:27.978)

I'm looking at cache x, what is it? It just looks like it's an elixir, elixir, a gen server. So it's just, gotcha.

 

Abulasar Sayyad (29:33.950)

Yep, yep, exactly, exactly. So yeah, that's the best part. Like it's very easy and intuitive, yeah. Ah, ah.

 

Adi Iyengar (29:42.670)

Nice.

 

Sascha Wolf (29:42.718)

Is it just a GenServer? Is it also like a little bit more magic under the hood like ETS, right? Because I mean, I've built my fair bit of caching myself, right? And it tends like if you do this yourself, it tends to boil down to you have a GenServer, yes, but this one creates an ETS table and then you enable concurrent reading on the ETS table. So other GenServers can read from the other processes can read from that ETS table without having to go through all that message parsing because otherwise you create this natural bottleneck in your system.

 

Abulasar Sayyad (29:47.680)

Yep.

 

Adi Iyengar (30:00.736)

Yep.

 

Adi Iyengar (30:11.210)

It doesn't look like it's using Ets though, just looking at the code at a high level, but it has a disk backup. So yeah, again, I haven't looked at this. Again, I'm lucky Sasha always built my own cache, but maybe I should try con cache and cache ex.

 

Sascha Wolf (30:17.930)

Interesting.

 

Sascha Wolf (30:26.574)

I mean, I have used... I forgot what the library name was, but I have used like one ready-made cache solution because it was really about, okay, we need to fetch this API endpoint over there and we want to expire that cache in like two hours. Eh. Right? Like, there's not much more thought which we had to go into that. In that case, using something ready-made where you at least verify that it's not creating a bottleneck. Yeah, why not? But if you want to anything more granular and want like maybe...

 

Adi Iyengar (30:45.182)

right

 

Sascha Wolf (30:56.178)

remove certain cache keys deliberately. I mean, we also had like a That was like an interesting thing. We were building just because for shits and giggles not really because it was reasonable We had like a system which use it at Delta CC IDTs to like synchronize data in like a cluster of Elixir application and In there we actually then had like a one process which basically fetched the latest like the latest state of that on like a minute basis

 

Adi Iyengar (31:01.922)

That was like an

 

Adi Iyengar (31:10.892)

Yeah.

 

Adi Iyengar (31:14.070)

data in the store of the XE application. And in there, we actually then had one process which basically fetched the latest data set on a minute basis and then updated an ETS table and removed entries which were expired, updated entries which were updated, so on and so forth. So yeah, and then we all have the rest of the system actually read from... The ETS table. From the ETS table.

 

Sascha Wolf (31:24.818)

and then update an ETS table and removed entries which were expired, updated entries which were updated, so on and so forth. So yeah, and then we all have the rest of the system actually read from the ETS table and not from this CRDT gen server because that would have been message passing it again, creating a national bottleneck, blah blah blah blah. So yeah.

 

Adi Iyengar (31:42.602)

Right.

 

Adi Iyengar (31:47.786)

Yeah, those are the kind of caching that I've mostly built. But I think the first one you mentioned, instead of even using a library, I would just use an agent at that point, right? Like I feel like it's a simple reason agent and it's so easy to create an edge backup, like literally five minutes of code, then adding a dependency, a mixed dependency and like, you know, another black box rather for other developers to like not know how something works.

 

Sascha Wolf (32:18.262)

Okay, so now we covered GraphQL, we covered LiveView and using it in like maybe less than... Adi does a timeout, see the gesture, I'm not sure why.

 

Abulasar Sayyad (32:18.326)

I think I'm gonna...

 

Adi Iyengar (32:22.438)

We covered GraphQL, we covered LiveView and using it in like maybe less than... Adi, there's a time order. No, it's actually, I was showing T, the T word. We could talk about testing if people are interested. Always down to talk about testing, but... I was thinking you need a time order, I was so confused.

 

Sascha Wolf (32:38.840)

testing ooh I was thinking you need a timeout I was so confused

 

Abulasar Sayyad (32:46.954)

Yeah, talking about testing, yeah, that's really interesting thing. Like when I was doing this.

 

Adi Iyengar (32:48.066)

testing yeah that's really interesting thing like when I was doing this fetching data from this

 

Abulasar Sayyad (32:57.642)

fetching data from this external GraphQL source. So one thing that I had in my mind that I'll surely add some testing to do in this application. And also I wanted to learn how to do mocking external sources. I wasn't something, this area was something I wasn't ever about. So I did some experiment and learned about mocks and yeah and

 

Adi Iyengar (33:05.631)

add some testing to the...

 

Adi Iyengar (33:09.710)

So I wanted to learn how to do mopping.

 

Adi Iyengar (33:15.909)

This area was...

 

Abulasar Sayyad (33:25.198)

using mock behavior, I added the testing thing later. So yeah, I'll add a keynote of my repo, what I've worked on. There I have implemented this testing. It was really interesting that opened my eye about behavior because behavior is something I wasn't very much clear earlier, but while implementing this.

 

Adi Iyengar (33:29.839)

the testing thing later. So yeah, I'll add keynote.

 

Adi Iyengar (33:42.326)

really interesting that opened my eye about behavior because behavior is something I wasn't very much clear earlier but while implementing this mocking it really cleared my concepts about the behavior. Thank you.

 

Abulasar Sayyad (33:53.342)

mocking. It really cleared my concepts about mocks and all.

 

Adi Iyengar (34:04.066)

So you guys have like experiences that obviously you guys might have.

 

Abulasar Sayyad (34:04.303)

You guys have like experiences with obviously you guys might have experiences with mocks as well.

 

Sascha Wolf (34:13.486)

I mean, the first time I was invited here was literally to talk about mocks and testing, so... So yeah... Nah. Nah. So yeah... Um... I wanted to see...

 

Adi Iyengar (34:13.878)

I mean, the first time I was invited here was literally to talk about mocks and testing, so... Yeah, Sasha doesn't have much experience, just written in a library about mocks, you know.

 

Adi Iyengar (34:32.398)

But yeah, I think mocks is a great way to kind of test something like this, right? Like where your live view process is, there's a live view component and an API component mocking the API. So yeah, glad you mentioned that. Now, getting to the live view specifically, like what are your, because you mentioned you use live view a lot for side projects, and the answer could be as simple as you don't write tests for that, and that's totally acceptable. But like what's your approach to test

 

your live view modules and also like the server, the rendered HTML that's part of the live view.

 

Abulasar Sayyad (35:05.970)

Yeah, so that's a nice question. So regarding this, like what I cover mostly in live view testing is mostly unit testing, like the API layer, what I design. I mostly do testing of that, as well as the component testing, its behavior, how it is taking the input and the

 

Abulasar Sayyad (35:31.490)

the event testing what I mostly do in the case of component. And mostly what I do is in case of what we can say, in case of UI, what I do, it's how data is rendered. In this case, I'm providing some kind of dummy data to the components or UI and how the application.

 

the components and the UI is behaving. So that's the mostly testing what I have explored till now regarding the testing. Yeah.

 

Sascha Wolf (36:07.394)

So how, what would you say Adi? Because I mean, I think you're like the resident testing expert here, right? So if you had to test something like this, like what would you say like some best practices would be? You're muted Adi, I'm not sure. Are you muted or we can't hear you? Ah yeah, yeah.

 

Adi Iyengar (36:15.852)

So if you had to test something like this, what would you say some best practices would be? You mute the body, I'm not sure. Yeah, can you hear me now? Okay, sorry, I was muted on two places. Sorry. Yeah, so first to give credit to Abul, like yes, the mocks just makes life so much easier for unit testing LiveView. Now because our LiveViews are live rendered, they're not directly mounted in the router,

 

Adi Iyengar (36:42.934)

makes life easier for building it, but complicated for testing it. At that point, you not only have to test a live view in an isolated way, but also test it with how it works with individual places where we are live rendering live view. It's kind of like testing a live component. I think live isolated is first, we used to test it live isolated mounts, the live view in an isolated fashion with a correct socket parameters and the correct session.

 

And just obviously like the regular events, calling the events and tests, making sure all the events are properly tested. I think the best way to test the rendered HTML, both in Live View and non-Live View way is a browser test. And we use Capybara for that, Ruby on Rails. How, I think I mentioned this in one of the episodes, I'm not sure Alan if you were there, but the solution we ended up using because I think...

 

Adi Iyengar (37:38.786)

I think there were a few, I forget the name. Wallaby was an Elixir browser testing one. It wasn't working on Linux properly, at least when we tried it, we've tried it a few times. And even on Mac, it was not deterministic. So we decided to, we want to stick to Ruby and Capybara. How do we do that? Basically in our Elixir EXS files,

 

we want to use the factories, right? We don't want to have to replicate, recreate the environment in Rails and you know all that stuff. So in the exes file, we'll create the things we want to create with factories, use a shell command to call the rspec and pass the ids and path as environment variable to that rspec shell call, right? So you can even run it concurrently in that way because the environment variable is only isolated to that shell call.

 

Right? So you can write all of your HTML expectations, what happens when you click this button, where it gets redirected, all of that, in RSpec Ruby, which is a lot more deterministic. Kaby Bar in Ruby is a lot more deterministic. And still use your Elixir factories and not have to create like a seed environment just for browser testing, which a lot of people do. So that's my approach for testing HTML button clicks and stuff, instead of trying to like replicate

 

you know, JS hooks and stuff. And there's ways to do that. It just doesn't work because at the end of the day, the user facing and you should try to get to, you know, the as close to browser test as possible to properly make it deterministic, right?

 

Adi Iyengar (39:11.726)

I don't know what you guys think about this.

 

Abulasar Sayyad (39:11.986)

One thing, Adi you said about JS Hooks. So one thing like click me like I haven't got anything very good about JS Hooks since I use lots of JS Hooks. So what is your way to test JS Hooks?

 

Adi Iyengar (39:21.702)

since I use lots of JS Hooks. So what is your way to test JS Hooks? Browser tests.

 

Sascha Wolf (39:29.511)

It's Alan's age-old question. Alan is asking that every time we have something about live view. So, Abdul, you're in good company.

 

Adi Iyengar (39:31.563)

Yep.

 

Abulasar Sayyad (39:40.834)

Ha ha ha ha!

 

Adi Iyengar (39:41.750)

There are ways to do it now in Live View, right? You can invoke a JS hook and get the updated HTML, right? But it doesn't always work, especially if you're using components or rendering Live View inside a bigger HTML. It doesn't always work if you invoke JS hooks. That's why I resorted to browser test. Alan would love to know what your solution is, because I know you've been asking this question for a while.

 

Allen (40:06.170)

still about the hooks right uh... yeah i try not to write hooks that's my solution for now

 

Sascha Wolf (40:14.850)

I guess that works.

 

Allen (40:16.654)

Yeah, I mean, to be honest, like, I just don't test everything, right? So some of the stuff, like, it depends on what it is. These days... Yeah, that's the same answer I gave before, right? I just don't test everything. I think there's a section in German's class about... Is that how you say his name? German, right? Because I know it's spelled German. That's in Valesco? Or am I? Okay. I just say German because written is German, but okay. It makes sense because I think he's from another country. I like that.

 

Adi Iyengar (40:16.947)

So instead of...

 

Adi Iyengar (40:21.194)

like it depends on what it is yeah that's the same answer I gave before right

 

Sascha Wolf (40:22.030)

Oh

 

Adi Iyengar (40:29.230)

There's a section in German's class about... How do you say his name? German, right? Spell German. I think it's Harman, right? Harman? Harman? I'll just say German because Britain is German. But, okay, it makes sense because I think he's...

 

Allen (40:45.178)

Uh, yeah, but I, I think he has a section about this and he gave a couple different ways, but they basically leaned back on what you were talking about, Adi, right? Where it's like, you need to run some kind of big solution or to really test it out. Or you, you kind of try to isolate as least as you, the least part of it outside. So it's like, it's like, you know, what do you call that? Almost like, um,

 

Adi Iyengar (40:45.579)

uh... yeah

 

Adi Iyengar (40:50.286)

I can give a couple different ways, but they basically lean back on what...

 

Adi Iyengar (41:00.523)

it out.

 

Adi Iyengar (41:07.497)

Right.

 

Allen (41:10.326)

extension cable right okay well if a works and c works and b is just a connection between the two then you don't really need to test it

 

Adi Iyengar (41:13.888)

Exactly.

 

Adi Iyengar (41:17.474)

Test integration. Yep. Yep. Yeah, and I think you're right. I think We have tried so many ways of testing JSX and even I mean something as simple as like, you know Even actions sometimes don't work properly based on what you do with actions how the live view gets updated so that's why browser tests are Really if you're just testing the components of HTML right are they being rendered correctly is that

 

I mean LiveView with especially if you start using Alpine inside the LiveView, it gets really complicated. If you define your X data outside the LiveView and inside the LiveView you update the data and outside the LiveView you use that update to display or hide things, I mean you need browser tests because it's it's you've introduced a JavaScript inside LiveView. LiveView with WebSockets doesn't update and call JS events correctly at correct times, right? So

 

Yeah, there's no other way around browser tests or as in Alan's case manual QA.

 

Sascha Wolf (42:20.702)

I mean, ManioQA is a form of browser tests in and of itself, it's just not very scalable.

 

Adi Iyengar (42:24.046)

All right.

 

Abulasar Sayyad (42:28.359)

And you said about a Valby, does it work with live view?

 

Adi Iyengar (42:35.262)

They claim that it does. It just it was working on the Mac computer we had set up. It was not deterministic. It was like off. I would say like 80% of times was giving expected results, which I mean, I would even take but on Linux it was just crashing. So and this was like in November and in March we tried it twice and it didn't work. So I don't want to like again it's open source people are working really hard on that I'm sure but it's right now

 

As of March when we tested it, I don't think it's ready for you know, like a scalable use especially because the CI most CIs are in Linux and that just if it doesn't work on Linux and it doesn't work

 

Abulasar Sayyad (43:16.318)

Yep, yeah, that's a great point. And yeah, thank you for mentioning about Wallaby. I think it's right time that I'll start considering it for my application from the start. I think obviously there will be some learning of using it in LiveView.

 

Adi Iyengar (43:35.446)

Hopefully you can fix it.

 

Abulasar Sayyad (43:37.138)

Yeah, hopefully yeah.

 

Sascha Wolf (43:45.266)

Okay folks, so unless we have any new angles to explore here, I think we got it covered, right? I mean we've out delving into topics we already covered before in the past, so I think we did good sidestepping the other things we already talked about GraphQL and LiveView wise, so hooray.

 

Sascha Wolf (44:12.355)

to the pitch right now before we slowly transition into picks

 

Abulasar Sayyad (44:18.218)

I think I'm fine. Yeah, I think almost everything is covered. Yeah. Yeah, one thing like I wanted to highlight like I'm open for Alexa opportunities. So if there is, if anyone want to work with me, then please let me know.

 

Sascha Wolf (44:23.534)

Yes.

 

Adi Iyengar (44:25.014)

Yeah, one thing like I wanted to, I like like, I'm open for any opportunities. So if there is, if anyone wants to work with me, then please let me know. Adi, Adi, I think this is your cue. Yeah, Abul will connect outside of the podcast for sure. Awesome.

 

Sascha Wolf (44:40.574)

Adi? Adi? I think that this is your cue.

 

Abulasar Sayyad (44:51.030)

Sure, sure, sure thing. Sure, I'll do.

 

Sascha Wolf (44:53.815)

Okay, so if people want to get in touch with you, how can they do that?

 

Abulasar Sayyad (45:00.066)

So yeah, I'm on Twitter. So it's my Twitter ID is abul underscore assar. So I'll write it down. This.

 

Sascha Wolf (45:10.878)

I will include a link to it in the show notes, no worries.

 

Abulasar Sayyad (45:13.834)

Yeah, and I'm on LinkedIn as well with the same name and same ID. So yeah, these only two platforms I'm available. Yeah.

 

Sascha Wolf (45:24.518)

Nice. Okay then folks, then let us transition to picks and for you a bull because I didn't mention it earlier. So at the end we always pick one or multiple things we just want to promote. It doesn't have to be code related, it doesn't even have to be tech related, it can be anything. I recently have picked a whole bunch of video games, so you do you, right?

 

Adi Iyengar (45:26.638)

Okay then folks, then let us transition to picks and for you Abu, because I didn't mention it earlier, so at the end we always pick one or multiple things we just want to promote. It doesn't have to be code related, it doesn't even have to be tech related, it can be anything. I recently picked a whole bunch of video games, so you do you, right? Just so you know, I'm gonna come to you at the end of this so you have a few moments to think about this, but like, Adi! Why didn't you kick our-

 

Sascha Wolf (45:45.046)

Just to- I'm gonna come to you at the end of this so you have a few moments to think about this, but like- Adi! Why don't you kick off with your pics for this week? Oh, you look... You look surprised. Like, oh my shi-

 

Adi Iyengar (45:57.291)

Yeah, I don't really have that many picks. I guess let's pick common GraphQL client, right? Like the GraphQL client that I was talking about, even if it's say not maintained, there are a couple of components of that that people who are into GraphQL clients can look at, especially the client-side query validation. It just significantly decreases the need for you to write integration tests.

 

between client and server, so you should definitely check that out. Especially because I wrote that part of that client. And... Yes, it's very closely perfect. I'm kidding. It's not, it's not, but I'm sure you guys can make it better. I also have a... You know what? Let's do it. I have a very silly pick. I had like 15 minutes to spare this last weekend in the morning.

 

Sascha Wolf (46:31.362)

then it must be perfect.

 

Adi Iyengar (46:51.062)

that's generally more than I have and I was like what can I do with that so I naturally went to domains.google.com bought a awesome domain name donkeycr.app and built an app there where you can feed a donkey a carrot hay or something else and the donkey will poop based on what you feed it.

 

Adi Iyengar (47:20.626)

A very simple, no elixir, no phoenix, so go to donkeycr.app and play around with it. It's just a simple app where a donkey takes a crap.

 

Sascha Wolf (47:34.254)

That's the weirdest thing I've seen in quite a while, my friend. What the heck, I have it open right now. Yeah, it's exactly what Addy described, it's exactly that. Okay, Alan, what are your picks for this week?

 

Abulasar Sayyad (47:38.754)

Hahaha

 

Adi Iyengar (47:42.334)

Yeah, it's exactly what I read as well. It's exactly that. Okay, Alan, what are your picks for this week? Uh, yeah, I just have one pick, a couple linked to you. That's the video about how to cache in Liveview because you guys are curious. Obviously, choose whatever caching method you want. This worked for me. Obviously, kind of battle tested. People are happy with it. If you guys have better ways to do it or other ways, I would love to hear it because I will be using more and more Liveview as time goes on.

 

Allen (47:51.090)

Uh, yeah, I just have one pick. I'll drop a link to you. That's the video about how to cache in Liveview, in case you guys are curious. Obviously, choose whatever caching method you want. This worked for me. Obviously, kind of battle-tested. People were happy with it. Uh, if you guys have better ways to do it or other ways, I would love to hear it, because... I will be using more and more Liveview as time goes on, and I want to get better at it, so, yeah. I think this is a good starting point for anybody new to Liveview.

 

Adi Iyengar (48:13.070)

So yeah, I think this is a good starting point for anybody new to Live View.

 

Sascha Wolf (48:20.922)

Nice nice. As for picks for me, I sincerely have to pass this week. I don't have any. So maybe next time. Let's see. Yeah I'm sorry Adiaz. I'm sorry to disappoint you. But there's nothing interesting to pick this week. Oh wait. You want to go super nerdy? I can go super nerdy. Okay then I'm gonna go super nerdy. And then I'm gonna pick the sprawl.

 

Adi Iyengar (48:21.190)

Nice nice. As for picks for me, I sincerely have to pass this week. I don't have any.

 

Adi Iyengar (48:37.272)

Wait, you wanna go super nerdy? I can go super nerdy. Yeah!

 

Sascha Wolf (48:45.226)

The Sprawl is a cyberpunk themed powered by the apocalypse roleplaying game. And if you have no idea what all of that means, then roleplaying games you might know, like D&D right, at least Stranger Things popularized that, that those are roleplaying games. Powered by the apocalypse are roleplaying games which are derived from the apocalypse world, which is a roleplaying game which kinda...

 

Adi Iyengar (48:45.606)

The Sprawl is a cyberpunk themed, powered by the apocalypse roleplaying game. And if you have no idea what all of that means, then roleplaying games you might know, like B&D right? At least Stranger Things popularized that, but those are roleplaying games.

 

Sascha Wolf (49:13.194)

Not as a first, but as a first which made it popular, is a narrative first roleplaying game. Narrative first means that compared to Dungeons and Dragons, where you really have rules to sort out everything, the narrative first roleplaying games are always designed about, okay, you trigger rules by doing things in the narration. So for example, if you, I don't know, if you want to hit somebody very hard, then there might be a specific rule for doing that. But it only happens if you actually in the narration try to hit somebody very hard.

 

Adi Iyengar (49:13.590)

Not as a first, but as a first which was made popular as a narrative first roleplaying game. Narrative first means that compared to Dungeons and Dragons, where you really have rules to sort out everything, narrative first roleplaying games are always designed about, okay, you trigger rules by doing things in the narration. So for example, if you, I don't know, if you want to hit somebody very hard, then there might be a specific rule for doing that, but it only happens if you actually, in the narration, try to hit somebody very hard.

 

Sascha Wolf (49:41.714)

So that kind of narrative was a roleplaying game. And Cyberpunk, I mean, Cyberpunk, I don't think there are any to explain. So yeah, the spoilers of Cyberpunk, mission based, power biopocalypse, role playing game. I'm currently prepare- I'm currently preparing and I have a limited edition here. So yeah, super nerdy, like I said.

 

Adi Iyengar (49:42.262)

It's a bit of a nosy, truth-talking game. In Cyberpunk, I mean, Cyberpunk, I don't think there's any to explain. Um, so yeah, the spawn is a Cyberpunk mission-based, That's

 

Adi Iyengar (49:58.906)

That's too nerdy even for me man, the nerd level is like, it's over 9000 you know. Yup.

 

Abulasar Sayyad (50:03.181)

It's overnight, that is.

 

Sascha Wolf (50:06.143)

Don't make me blush Adi, don't make me blush. So that's my pick for this week. If you're into roleplaying games and you feel like, like maybe you step out of sight of your usual D&D bubble, then PVTR games, Powerbite Apocalypse and especially The Sprawl are worth a look. It's cool stuff. Okay, Abul, do you have any picks for us?

 

Adi Iyengar (50:14.538)

step outside of your usual D&D bubble then PVTR games, Popeye the Apocalypse and especially the Sprawl are worth a look. It's cool. Okay, Abul, do you have any picks for us? I think I have three picks for today. Okay, the first one is like I think I said earlier today, like I'm working on a

 

Abulasar Sayyad (50:28.938)

I think I have three picks for today. Okay, the first one is that like I think I've said earlier today itself, like I'm working on a project management tool. It's kind of very much inspired by Anjira, but with different purpose. So it's in live view what the best part about it. So like I've worked on quite a lot of

 

Adi Iyengar (50:43.830)

very much inspired by Jira but for different purposes. So it's in live view what the best part about it. So like I've worked on quite a lot of stuff, the best thing that I really liked about it is the Jira-like interface, like how you move tickets and how it's real time updating things. All those things are very cool and it's combination with Alphard.

 

Abulasar Sayyad (50:58.312)

The best thing that I really liked about is the Jira-like interface, like how you move tickets and how it's real time updating things. All those things are very cool and its combination with Alpine, all things have made everything very beautiful. Like I'm very excited about it. And the second pick is a few weeks back, like I

 

Adi Iyengar (51:17.406)

I'm very excited about it. The second pick is a few weeks back, I tweeted about the canvas, the real-time drawing.

 

Abulasar Sayyad (51:28.432)

Real-time drawing what I have done. So I was kind of busy in my other works. So Like many people asked me to write share the code and How implemented that so I have been writing blog about it. So it's almost and so possibly in one day or two I'll be publishing on that blog as well and third is non-technical one like This week I didn't get chance to watch Thor

 

Adi Iyengar (51:32.394)

kind of easy.

 

Adi Iyengar (51:36.418)

like many people asked me to write, share the code and how implemented that. So I've been writing blog about it. So it's almost and so possibly in one day or two, I'll be publishing. So, thank you for listening. I hope you enjoyed this video. If you did, please like, share, and subscribe. And if you have any questions, please leave a comment below. And if you have any questions, please leave a comment below. And if you have any questions, please leave a comment below.

 

Adi Iyengar (51:50.386)

and third is non-technical one

 

Abulasar Sayyad (51:58.502)

So possibly this Friday I'll be going to watch Thor, Love and Thunder. So yeah, that's my picks.

 

Adi Iyengar (52:00.340)

This Friday I'll be...

 

Sascha Wolf (52:08.562)

Nice. Ok, folks. Then thank you for listening to us and tune in next time when we have another episode of Elixir Mix. It was a pleasure having you, Abu.

 

Adi Iyengar (52:10.358)

Okay folks, then thank you for listening to us and tune in next time when we have another episode of LX Linux. It was a pleasure having you, Abu. Same here, same here. It was really nice talking to you.

 

Abulasar Sayyad (52:20.834)

Same here, same, it was really nice talking to you guys here.

 

Sascha Wolf (52:26.454)

Bye bye.

 

Adi Iyengar (52:26.850)

Bye bye.

 

Abulasar Sayyad (52:27.768)

Bye.