BREAKING: Devs Remix Frontend. What They Did May Surprise | Jonathan Prozzi - Intuition

[Music] GM y'all we're I'm JP and Joi we are Intuition or core contributors at intuition happy to be here today presenting and sharing Why We Love remix and how remix in vit are amazing for web 3 development so we're going to jump right into it because we're excited to share a lot of this today so breaking dev's remix front end what we did may surprise you why why are we doing this well we've loved this stack and we've tested it and we believe in it and we want to provide devs with another tool that they can use to really have leverage incredible benefits for DX and ux in web 3 and we believe that sharing knowledge really grows our ecosystem so we're doing that today we've battle tested this by building on top of it for several years really but more specifically for the last several months remix and V we're pioneering it in in web 3 and sharing it and open sourcing it with the community so top level why are we doing this well this stack really resolves a lot of pain points for ux and DX in web 3 for ux the biggest thing is that remix allows for a lot of declarative data loading so biggest thing with that is we're allowed to we we can do contract reads API calls things like that on the server and then you know that you have the data when you need it this is a huge ux boost for users and web three also we're able to leverage Progressive enhancement from remix so that is a great piece that allows for performance resilience and accessibility for onboarding users with all sorts of different backgrounds and connectivity the other piece is the DX the developer the developer experience the declarative data strategy lets us know when we have it which lets us not worry about when our hooks are firing we're we know the data is there we can act like we know it's there fewer loaders loader States and spinners right so the piece that I'm most excited about with this is the hot module reloading that comes with v so what this means is anybody who's talked to me for more than a minute about front end knows how much I love HMR and we're going to demo that and you'll see how blazingly fast it is once you use this you can't go back it changes you all right so what is remix anybody who doesn't hasn't used this framework for web development yet is in for a surprise with it lets us focus on web standards such as using the fetch API and also it allows for data loading on the server and browser in parallel to really allow for excellent experiences it's a full stack framework letting you focus on the ux and user interfaces and really delivering a fast slick and resilient user experience in UI so we're excited to present what we call our neurofunk stack and you can see here it's react at the core and what this is meant to be is a battery batteries included framework that enables devs to be fully productive and focus on like what matters which is building apps and solving problems so the core this is informed by our learnings from building with this with remix and V and we chose the we have meta choices here so we start at the top react at the core we got remix and V which is really what we're most excited about and we handled all the configuration for this to you use it right out of the box now in the web 2 stack here we are also leveraging tailwind and radx UI and these are have become rapidly adopted in the space in both web 2 and web 3 and The Meta choice right now is shad CN Shad UI and Shad is leveraging both of those Technologies so we are too really allowing for interoperability and maximizing impact in the ecosystem now when we dig in a little bit deeper into the web 3 part of this at the core we got our interactions with VM and wagy and then behind the scenes for our o we sign in with ethereum did session and rainbow kit and we've handled all of the configuration with this for everybody out of the box so you can pull this Stack Down start using it and be productive immediately all right so why remix and V this is the core of what we are trying to do and it's a big balance of ux and DX for everybody the the four all piece is huge here because a lot of times when you're really trying to maximize for developer experience sometimes can come at the cost of user experience and vice versa right but with this we're really able to sorry we're really able to have modern DX without sacrificing that that user experience right so the way that this is expressed is we have 10 times faster HMR five times faster HDR with hot data replacement which we're going to demo and then at the core here this enables devs to focus on what truly matters we want to reduce the time that people spend having to Wrangle configuration right I've used V for a couple of years in web 3 biggest I've spent hours and hours trying to do some of the configurations so we are saving that for people here it's letting you jump right in and get productive we've all been at hackathons where you have an awesome idea right but then you might be trying to configure your off or you know just something with react and web 3 and then you end up spending half of your time on that and you don't have time to actually build what you wanted to build right so we dog fited this to meet our needs at intuition and then we wanted to open source it for our hackers here who are building on top of our bounties and we decided we're doing that we want to roll it out to the larger community in general so the next piece with this is it is flexible you are able to take our starters that we're providing use what you want you can roll use our o split it out if you want to remove sign in with ethereum whatever it's fully customizable you can also just use what you want from what we are providing allowing for total customer iation you can use it as it is Jump Right In or incremental adoption for it now the next piece here is V is an excellent client side experience right in itself and you can totally start building with it as it is and then incrementally adopt remix through the routing that we are providing this allows for you know if you need SSR as you've developed your app it's there for you and you can use it now the other piece that we love here is granular control with no black boxes at all so there's no need to really worry here about things like use client and use server we've all experience that if you've used certain Frameworks right so with this you're able to build like you would any other react app and then really just sprinkle in the data loading strategies as you need it um all right so the other piece that we really really are passionate about here is there's no vendor lock in so with this framework it's portable it allows for more align with decentralization and decentralized Ethos because this can be hosted and ported anywhere if you you know if you need to move it around something happens to your host can bundle it and move it again there's no vendor lock in with this stack and if we're all building on services that are specifically tied to certain vendors well then we're not really fully decentralized and we believe very much in Fuller decent full decentralization because that's a key part of what we're doing for resiliency so not going to spend too much time on this but if you want to hear like a 45 minute rant about why we believe in no vendor lockin come to our booth come to our booth at the end we'll talk to you about it and you know really rant for a long time about that piece so all right now we want to show some examples here because this is what we're most excited about right this is what I'm saying I am a huge huge fan of this piece this is an example it's a little little harder to see here but this is the HMR in action so on the right side here here I am we're showing that you can edit values such as the CSS the Tailwind classes the data and you see it immediately on Save reflected on the left and the part at the top here that is the wildest piece is there's a loader that's loading data from the server you can change that and it still gets that instant HMR this is pretty mindblowing and honestly like once you experience this it's really really hard to go back and keep going I can go on about this forever but move on this is another piece that's mind-blowing this is a pattern we've established using remix for contract reads on the server so here we have I know it's looping here but we have on a remix server a whole multi call where we're reading configuration from our contract and then passing it into the route and then the bottom that's being edited here those are it just shows the HMR loading but the factual values that we're changing we're changing in them on the Fly and this is hot module reloading and revalidating data from the server in real time instantly once you start experiencing that it's hard to not have it and we'll post this so people can see it now we have some demos here these two apps that we're showing these are demos that are built directly on our starter this one right here is uh an onchain interaction with server revalidation of the data so you can see it's an NF it's a minting of an nft going through and minting here and I'll I love this one so we can start it from like we'll just talk through it clicking on the mint we have live State can see what's going on going and confirming it's off screen here but we're confirming starting the transaction and then what is happening is it'll immediately revalidate and pass the nft metadata right back without a refresh and that is pretty awesome if you think about it that's an example of excellent DX for devs and user experience because they get that fast feedback that we all want this is another example so this is how our user experience is really shining through using remix right so this is an API key portal that we built to onboard devs um that are participating in our hackathons uh while here or Beyond right so what this what we're doing here is users are signing they're signing with um with their wallet and then they're getting an API key that is immediately shown to them so they get that instant feedback from our API so here starting from the beginning going to the page which is our portal here for API Keys connecting the wallet and then once you sign so we have our did did session off with siwe sign get that you can copy it and then if you rotate the key the user immediately gets that validation from our server coming back through this is a pretty amazing process that we've used to onboard people in 30 seconds to our API key and developer portal right so with this said this is amazing And We Love remix there's a lot of considerations though now one of them is that remix has some considerations for complex client side loading so a lot of remix is uh coming through the data is coming through from the route and if you're building something like a dashboard sometimes it's a little bit tricky because you have multiple sources of data coming through but there's one there's some things on the remix road map that are pretty excellent there's um used client loader data which is going to really be enhancing this experience for building complex dashboards with multiple data coming in while still getting the excellent experiences of remix's revalidation so it's on the road map we're adopting things as they come through and as we share our learnings we test them and we roll them out and update our starters so another piece that's a consideration is the composability on client side and the way that this is most commonly expressed as we've found it is since remix is so powerful and route based sometimes modals are a little bit tricky but the thing is with this is there's um updates that are coming through that can really help with this such as the use loader data like I or use client loader data like we just mentioned but also there's new strategies coming through from the team as react 19 is coming out the remix team is on top of it and they are really testing it and they're looking at the ch that are coming through from like react server components and then also just really seeing and testing how the optimizing of memoization from um from those changes is going to impact the data loading strategies and this ultimately like what attracts us a lot to remix is the team is super high trust and high visibility right so they publish rfds they publish all of their changes and have a very thorough testing process so for example V was technically unstable for several months but we were able to adopt it test it out figure out all the Kinks with it roll it into our starters and now it's stable and it's officially adopted by both remix and V so we were at the head of the curve on that tested it and are sharing our learnings with everybody now the other piece with this is the team is very visible they build in public on everything that they do RFD process is visible in their GitHub repo they build in public on their YouTube channels and I think that that's a very aligned ethos for what we are trying to do in web 3 so it's a very it's like a match it's a good match and as those things are rolled out we are testing them and sharing our learnings all right so what's next with this the biggest we have a QR code here that if you if you can scan it and hit it it goes right to our remix and V starter on GitHub now this is where we are this is our main driver at this point for our templates we have an original remix one that we did but then this one includes all of our changes that we did to get V up and running and anybody who's built with v like I said it's like there's it's an excellent tool but there's a lot of configuration that you got to go through sometimes we've handled all of that and you can do quick QR code clone our starter build exactly on top of it and if you want just like I said before pick and choose what works really at the end of the day we want to empower Builders and provide a tool that is an alternate tool that you can maybe not they maybe not aware of but really solves excellent solves problems provides excellent user experience in DX so definitely suggest hitting it up also if you're hacking here at eth Denver we intuition have several bounties for you to check out and we welcome you to actually use our starter to build if you're hacking on our bounties just use it as a starting point or if you're not even working on our bounties and you're working in web 3 give this a shot even if you're just doing client side work use our V tooling to really enable that excellent excellent HMR experience and then layer it in as you adopt remix and learn it the other piece with this is we're we're going to be at Booth 506 from Wednesday to Sunday this week so check us out come talk to us like I said you can talk to me any of us about V or remix we're happy to talk for hours about these about these pieces and these tools so the other piece I want to point out here we have a community Discord want all of you to come and join it talk to us about what we are doing what you are building what we are building really want everybody to work on this together with us we love building on the stack and we're very passionate about it and we want you to be as well so when I adop when I started using this I don't really want to use anything else unless I need to or you know the product requirements you know necessitate it but this is now my go-to stack like all those videos that we showed we built directly on top of this our intuition our product is built on top of this stack so we're dog fooding it we're very motivated to share our learnings and we welcome feedback too so any of us here you can spot us with the core patches we have I am core we'd love to talk and hear what you're building yeah there is a we got a crew represented here and we'd love for you to come and talk to us and also if you're here and you're now at the end of the presentation find some of us because we have a surprise for you and you know hit us up and we're going to hand some things out check us out and know happy hacking build share and follow your intuition