Framer Session: Intro to Handshake (Framer Components in Production)

hello folks i think we should be live someone give me a handshake emoji in the chat if we're uh for live right now i think i think we should be good there we go all right first time streamer here so uh sorry for those two minutes there but uh i think yes i'm live thanks again all right in that case welcome everyone to the intro to handshake stream first uh stream uh frame recession about handshake excited to have you all here today i'm uh i'm hunter a product designer at framer i work on all the the code features so if you've used frame for developers if you use handshake [Music] as well as some kind of stuff behind everything else at framer uh there's probably if there's a power user feature i've probably helped make it happen so i'm really excited to show you handshake today we've been working on this for uh started laying the groundwork almost two years ago which is pretty crazy um so it's really exciting that the beta is out there now and uh i'm going to show you kind of what you can do with it today but i'd love to hear who's in the in the chat um kind of uh we got developers we got designers you like an xjs you like framer uh kind of where you're coming from um yeah i would love to get kind of a sense of who's watching today um i'm going to try and keep it a little bit everything um i'm going to go through some code stuff focus mostly on handshake but if anything's too technical or you want more technical stuff you want the nitty-gritty details uh you let me know um yeah so i'm just gonna i'm gonna try and engage as much as possible um i'm here for the streamer all right sounds good volva is my biggest fan [Music] all right in that case i'm gonna get started devs from rwanda wow all right dev mostly next.js at the moment from utrecht all right a lot closer designer designer all right cool a little bit everyone that's fun okay in that case oh max is in here too max is uh maybe making some of the cool stuff with handshakes so far so i'm glad to see he's here hey max how's it going all right um yeah so this is uh live but we're gonna of course uh make sure it's posted after um just for reference so we'll have a few kind of sections that'll go through and you can reference them later if you're trying to do stuff with handshake and i'll uh i'll try to make sure that the sections are all cleanly cut so you can check and reference later but today is all about handshake so on the right here i have kind of the what we're going to talk about today we're going to go through what is handshake just a quick overview even though you can see it pretty clearly on the left here then we're going to go through url imports which is going to get a bit more technical but i'll try to keep it simple and uh it's kind of the power that uh not only powers handshake but most of the cool parts of the framework at this point um we really invested in url imports and we really believe in them so uh i want to go through kind of what they do and how they work in framework and then from there once you know kind of how things work then we're going to do the handshakes basics the handshake basics um so building a component getting it into production and then kind of closer to how you'd actually build a real site using loops and data um most sites nowadays are uh at least a lot of consumer facing sites are just kind of like a fancy interface for working with an api or data so with handshake it's a really it's a really nice way of working with those things and kind of the representation layer of the web and then one of the coolest things about handshake is it's incrementally adoptable so you could have an xjs site with a million pages and you want one page to use handshake uh you can do that just one component you can pick it up as much as you want um and i think that's really exciting so you can kind of try it out if you like it you can keep going so we'll show that kind of workflow as well um and then we have a qa with hopefully a special guest uh one of the one of the people behind the one of the geniuses behind handshake i i can't take credit for uh some of some of the big ideas behind handshake but uh yeah we'll have more in the q a for that so some people have been asking for more of a story behind it so maybe uh we can get that for you today so let's see um yeah and once again if anything's too technical um that's okay i can slow it down re-explain it or we can point you towards some uh kind of helper stuff like the framer guide reacts really good or if uh yeah just let me know we can point you to stuff to help uh help understand a bit more and if you want to follow along today we're going to be some doing some coding i might go a bit quick at times but if you want to uh just try out handshake for yourself you can do that at uh the template that we keep updated is at github.com framerslash next js which i'll toss on the chat and uh you can uh links work yeah that should be good um yeah you can follow along in that template if you'd like um or just kind of play i think the best way to get a handle on handshake it's just to try it it uh it's a pretty unique workflow it's something that uh we we think is pretty special and i think the best way to have it click is just to design something for yourself and see it in in production but with that i will uh i will talk a bit about what handshake is so on the left here we can see that uh this is the the promotional page we have for handshake and uh it's pretty simple you design a framework component and you can just import it directly into production code so we try to keep that uh pretty focused and uh that's kind of been our north star for this entire time is you design a component framework and you can just use it in production just like any other react component so it's a beta feature uh we just came from alpha last week and switched it to beta um we think uh we think it's getting more stable and uh for sure ready to try out in production we use it on production on framework.com right now so uh it's for sure ready for for anyone to try on the production site and if you have any feedback of course uh or any questions along the whole way just uh the discord channel for handshake is the place for all that so smart components and framer if you haven't seen them before we have an example here of a toggle they're essentially a visual way to build react components or just components uh if you're just coming from a design background but we've really focused on making them super interactive by default um because that's what the web is best at and that's what firm really focuses on is those interactions so this is a smart component this is one of the most uh basic ones you can do but it's a really good example of the possibilities of a smart component so it's a toggle with an on state and an off state and what variants in uh so these are two variants there's a variant for a primary variant and then a secondary variant and we also have these things called gesture variants for common things like hover states and press states so all we did to set this up was actually just change uh the location between these two states and it's all built visually if i wanted to change the color of any of these i can and i can pretty much do anything i do in a normal design tool so if i hit preview here you can actually see what that interaction looks like and it is super responsive right away um hopefully it comes across on the stream but it is that subtle kind of click that press state instant feedback 60 fps animations like it feels really really good um and that's something framer really focuses on so this is a smart component and for since we launched uh smart components i think february of this year you know it's been a while but and people have been making really really cool stuff with uh smart components but the little secret we had the whole time is that they've been production react code this entire time and so you wonder why it feels so good it's because it is production code it's just as snappy as anything else you have in production and if you actually look at the code it is looks a little generated but it is kind of how you'd write it and has a lot of optimizations that maybe you wouldn't even have if you wrote it so that's kind of the secret and with handshake we're kind of unlocking that power to give it to you to give you uh the ability to use it in production because it's already been ready this entire time so you can do anything with smart components uh this is kind of just a really basic example um so let's see yeah if you want to learn more about smart components addison has a really good session that you can find on the framer.com sessions or on the youtube channel so you can check that out if you want to learn more about what you can do with smart components [Music] so why we added this feature so this has been kind of a thing that we've thought about for a while and we kind of think that if you're a designer and you're perfecting these components like you're building these components anyways you're making the component animations really perfect you're tweaking them you're making them so nice you're really passionate about making it exactly what you want you're expressing the goal of your designs you should be able to ship that without concerns and you should be able to get that level of fidelity in production without having to worry about like maybe you feel bad i've felt bad in the past with an animation and it's uh handing it to an engineer and it's like uh can we do this um and that's that's no longer thing the the handoff is is gone essentially and uh that's where the name handshake comes from and we kind of allow you to just put it in production and as someone who dabbles in engineering i think there's less recreating stuff and it's more just the handoff and engineers can focus on the more interesting problems rather than just kind of recreating exact things from a handout from designer and then it allows you to work in tandem better it's a really interesting workflow and so anything that's like kind of high fidelity or css that'd be challenging to write or tedious to write i find that's when i reach for a handshake component and on top of that it enables like faster iteration because you can just update stuff visually you don't have to like restructure that much and it's a really fun workflow which i'll show you today so enough talk let's uh let's put this toggle in production hopefully someone will tag me if anything doesn't come across but hopefully you can see the code editor let's get this started and so this is just an xjs setup this is the one i linked in the chat uh let's see if anyone's asked any questions oh canadian developer and designer same here um welcome okay so let's so we have this really basic setup here um and if we run yarndev we can go to our host let me bring that over here and uh maybe over here and so we have this blank page here and we have this really simple just set up so this is the template i linked earlier and so what we want to do is we want to bring that toggle from framer and so up here in every smart component you have this handshake ui here and so this lets you know kind of what you can do it links up to our getting started guide which is uh your reference to go to reference if you want to get started with handshake or links to the desk discord to give us feedback so we're going to copy and import and if we hit that go over to our code here and then all we need to do is paste and so this is a url import that i'll talk about more in a bit but essentially this is the link from your code editor to framer if we go down here to the jsx it's just like any other react component and we just insert that and let's see there we go that's the component that we just built in framer visually without code and it's just exactly how we did it in framework super responsive and if you saw how fast it was it's pretty instant i'm pretty sure i've installed npm packages and stuff that have taken way longer than that and that's just ready to go in framer to uh um and so that's kind of the essence of handshake before we dive in a bit deeper um yeah so you might have seen this i don't know these some people are coming from next.js um you might have seen a similar demo from uh from lee to versailles um we're super thankful for that demo lee knocked it out of the park kind of talking about the future of web development and i really like how he tied it in with url imports so this kind of futuristic kind of positive outlook at what web development could be which i'll get into and he did show a little a little demo of handshakes so a similar flow but uh yeah you might have seen this and it's kind of the same idea so uh yeah big shout out to lee for that um yeah so that's kind of that's the what uh handshake is is essentially getting these smart components which we've made so powerful in framer and then putting them in production code and letting them be just as powerful as the rnframer and kind of giving you that a visual expression but for production react code so um now i think we've kind of got the basics we can kind of dive into actually what it's like so if we kind of what we've got set up here is just a normal framework project if you open a farm project today this is what you'd see and you can get started with the handshake button it's live for all users and then on the left we have that next.js template so there's not too much going on here just you want to make sure in your next.js config that you have the experimental url imports and we have a list of all the imports that you want to allow so this allows it to be more secure especially with versailles and xjs they have a lot of enterprise customers and they want to make sure that you're only accessing url imports that you uh that you trust and so we have the template on the in the getting started guide that you can copy paste into so i want to talk a little bit more about those url imports that we're talking all about so this is a url import and uh if you've coded before if you've ever typed import anything from anything you've used what's called es modules and so this is a spec that's been around for a while um and recently over the last uh well it's been a web is uh there's a lot of people who work on this stuff for a very long time but it has just pieces of it have recently started landing in the browser and traditionally as well actually with any platform if you want something to be fast you want to lean into the technology of the platform and the more you fight it the more you're going to have to like fight uh things are going to be slower things aren't going to work that well and so a framework we knew that this technology is built in the browser we want to build lean onto that stuff that is built right in because that's how you get speedy uh really impressive uh experiences and so we saw this stuff coming down the pipeline landing in browsers and uh we knew that this was something that we could use to really improve the speed of components in framer and kind of use as a pipeline to power the the vision that we had for components we used to have a package system that was just not as fast as we wanted we wanted things to be able to components to be copy and pasted between projects we wanted it all to just feel super snappy and native to the web and so we started investing in url imports and for me personally the favorite my favorite part of the web is sharing so i love when i like create an idea and like whip up an animation and i like send it to my friend at a url and that's really special to me and i've always loved doing that and with url imports we bring that same experience of that native web clicking on link or everything living at a url we bring that to code and so that allows you to kind of share code in a really a lot more exciting way and enables these new behaviors that we haven't had before um so it's like just that experience of clicking between urls and everything living out of url that the web has had and that the web makes the web so special is now for code so we're really excited about that and so about two years ago we started implementing this and building stain laying the groundwork for this system um and moving everything to url imports and so everything in framework if you have a component it has a link just like this powering it and this is actually the framework for developers release was all powered by this and smart components since they were introduced have been powered by this so you might be saying it's a url what's so exciting um so let's see if we can make this a bit more tangible so what a demo people always give is uh it's become a bit of a thing is to show off the url in ports you import uh confetti no this is not closing but that's okay um so we do import confetti from now you can choose there's a few of these cdns that serve up anything on mpm as a url so jspm is the one i usually reach for and then we'll do canvas confetti and i think that should be it and then let's see we want to say on when the toggle let's make some confetti appear when we toggle let's just spice it up a bit um okay see if that works um [Music] move this so pretty much we imported this so uh same as the toggle smart component same as that that url over there we just say hey go to this url and find the code that lives there and then give us confetti from there and then that should be loaded there we go we have confetti and one of my favorite parts of this is there's no restarting dev server there's no installing i just type it and it appears and it works and so there's no you really can stay in that flow state of experimenting and prototyping kind of that that play state which is really fun um and so you can kind of just paste in this url you can send this to a friend and there's no extra steps you just paste it and it works so now we have a toggle that is confetti so now we'll do a quick demo of like how this works in framer so i want to make a thing that tells me the weather and framer so we're going to call it weather.ts and we'll do this right quick function get current weather and so i'm going to kind of teach you the the concept or just kind of explain the concept behind how we use url imports in framer so we're just going to return it's not actually going to be the real weather we're just going to make it a math.random and we'll say if it's greater than 0.5 we want to be rain and it's less we want it to be sun using a ternary operator here and so if i hit save this is now a module it doesn't look like much but behind the scenes and this is served up as a url that can be imported anywhere on the web right away as soon as i hit save and so you can kind of see that power by using handshake modal or the copy import button here so we go handshake we hit copy import we go over here so we can see that that code file we've created there's no extra steps we just hit save and that code file is ready to go and we can import it into our next js app over here get current weather and instead of confetti sorry to get rid of the confetti we're going to alert the current weather or the fake current weather so this is code we just wrote in here and go over here there we go our function is working so it seems smooth because uh there's no steps to sharing we've tried to reduce the friction of sharing code to as little as possible and what this would look like in the past is if you could either copy and paste your code to your friend but then you don't get updates or versions or any of that and then maybe that's a typo you have to be like hey sorry there's a typo in there or the other option you should publish an npm package which is kind of where all shared code lives for javascript or most of it at least and that's a lot of steps you have to figure out what a package is how to make a package.json file how to build stuff how to do there's all these steps that really add friction to the sharing and all we want is people to share more code like that that is one of the best parts of the web is that kind of building off each other's ideas and kind of making different things and so we wanted to kind of really take all the steps away from that and just make it as simple as possible to share code um yeah so that is kind of url imports now keep all that that workflow in your head let me check the chat again here see if there was anything can you access on change event of the custom toggle yes i can show you if you imported a yes it does also work offline it's also doing some cool caching so keep that concept of every code file okay we'll show you a little update maybe too every code file in framer is served up as a module importable anywhere on the web as soon as you create it and let's say we want to update this to maybe you uh want to just be sunny all the time so return sun so these urls and framer are this little piece at the end says i want you to lock that url to that exact version in time that when i copy that url so it'll never change and that url will be around and it's immutable they will never change and so everything's super stable and your engineer if you pass off a component to your engineer either they don't worry about like oh you're still designing uh maybe something breaks this will point to that version of the code forever and if you want a little secret and see the the power the magic behind it all it's just code at the url if you paste that url the browser so you can see it's still the rain and sun version we wrote earlier even though we updated this to sun so to update that we just need to get the new url and we can do that here and so that's going to give us you'll see the string at the end there change so there and if we go it's luck of the draw but it will say sun every time yes so that's versions all right so now we're going to get into the the fun stuff the handshake and so if you think about all those concepts we just talked about we do exactly the same thing for smart components so as soon as you create them they live at a url that can be imported anywhere in the web and they are the code you see we use the url to import it onto the canvas to render it so you're essentially getting the same power that you see on the canvas right in your production app and that means that everything is going to look exactly the same in framework as it does in production and that's something we care very strongly about to make sure that when you hand it off or use handshake that it's exactly how you expect it to work so now we're going to make a handshake component and we're going to start from scratch so let's make a card component today let's see card and so smart components can have different properties just like any react component so let's see so we're just going to make a card component that has an image well actually here i will show you what we're going to try to build here so let me put these together so we want to build here is it's card components there's this arena channel if you haven't used arena it is a great um a great thing and i found this arena channel of i really like of root stickers and they're beautiful um so i think we're going to build this little we're going to use data um to loop through this to loop through our uh all our fruit stickers and render them and all of these are handshake components so we're gonna build this little card and then we're also gonna use data and uh we're gonna use react props uh to build this page and i did not code any anything of these components they were all built visually so that's we're going to try to build here and so let's uh let's get started with the card on that on the right here so it's not going to look exactly the same but see it will set up as a stack we'll add an image some padding here and what's cool about smart components is because they're just built on the web all these properties work exactly like how they would in css because they are using css which is uh which is nice um let's see i think we want this to auto size that's okay so we want to make this an image uh we can just use a placeholder from unsplash for now fruit nana cool and then i think we had a little uh little title property here and i think it was uh maybe that's nice and then we'll align everything left and then what do we have on here ten radius on that all right i think we want some more padding here i think i can okay and let me make this a little more of a gap um but i think that gets us pretty close and so now we have this thing visually built maybe want to add a little shadow when you hover on things so we just add a gesture variant here that was just it kind of has this little placeholder that you can click and we want to do shadows um and so when i change something in the hover variant it only changes the hover variant and it will animate from the state in the primary to the hover state so if we do let's do like 8 or something small here and let's do 20 and 40. and then let's just make it animate from a very small value here we hover i mean it's a little too subtle a let's add like a 12 or something you can see it has a little hover effect on the image there so now what we want is we have this component and we want to get it over to our next js site so we'll go to this other page i have set up where i already have the data looping over and so if we see here we use a next.js api called getstaticprops that essentially is where you can grab data that will render on the server and we have a pretty simple page here it's just a normal react loop when we map over all the the blocks in the arena channel so if we go there and we go to our data page and we do that then we can go to handshake copy the import and i'm expecting to see about 20 of these cards so we say card we imported just as before and return card and then it needs a key of course so i have uh types i think b dot id should work and so we just designed this component fully from scratch and there it is in production and so i see it's pretty obvious that we need a border or something on here so let's do let's uh you can see that so we can just bring that in and look at it in production because it's quick okay pretty subtle but enough to see for now and know we can bump it up to something a bit uh lower maybe e5 maybe um so now we have all these images but we want to put that data in there so that we can loop over our data so with the react component you'd build it with with props and so to do that we call uh props and framework we call them variables so those are these things that you can create that essentially allow you to pass down data and map it to different properties on anything in the component all right all good in the chat yeah um so to start we want to start with our image maybe we can make it fit on yeah um and then let's do fitlife so we want this image to be a property so we have this little plus beside everything that we can use and then we hit that and it automatically creates a variable for image if we open this handshake modal we can see what that looks like in the jsx so now it says image as now of type image and if we click on this it'll actually take us to the default image so that lets us know that it just built a prop for us and if we go to the title as well we can do the exact same thing we hit that little plus button and now we have our two variables that we can access as props in production and handshake will also stay the same so if you go here copy our updated component paste that in and we can go down here and just use these as normal react props which is pretty cool and so b dot image.display.url should get us an image and then we want title to be let's use it as a last updated date so updated at and i have a date function here format date that i think i have ready to go and see if it worked yeah so there we go now our component feels a lot more like how you use in production and we're mapping over our component we have our little hover states on everything and uh it feels pretty good it feels just like a performance production component and yet we didn't write a single line of code which is pretty fun so if you want to spice this up a little bit more we can add kind of a different variant and maybe uh we'll make a bigger version of it and make that a bit wider let's see there we go and maybe a bit taller as well okay so maybe we want some of them to be big and we'll add the same hover state to that so now if we update that and i think that should be we could also add dark mode which i've done before and some handshake components i've used you can really do whatever you want um which is kind of part of the fun it's a visual design tool you don't have to think about oh how do i implement that or how would i do that you just do it and it's you can use it in production so um let's say big so i think i want to change the variant on if uh variant is i think on every third one so we'll do i modulus three equals zero so that's just a way of saying if uh it's divisible by three um be true and so we wanna do uh big we'll make every third one big and then small and then we can pass that to the variant prop which is there every time you add variance you have variant prop and then maybe that'll make it look a bit more fun yeah so there we go we can spice this up as much as we want we can change some hover effects if anyone has any suggestions of a fun hover effect or something to add let me know we can make it rotate or explode or something you just let me know um and so you can add also stuff like on click event it's everything in react all the kind of the basics you can do in handshake to make it really feel like part of your site so we'll add an on click event so every time you tap this uh card it triggers the on click event and we can use that like any other react event so we can do so on click and then we'll say alert alert title nah it might actually yeah so there we go we have the little things there we have the titles login and so if we wanted to make this feel more like a real website what we would do is kind of add like a overlay state so let me do that quick we have an overlay component ready to go um and let me know if i'm going too fast on any of this i'm just trying to capture explode yeah okay i might have gotten a bit too excited about the explode animation that might take a bit more time i think you could do it though um because this is all built on frame of motion right this is all it's like almost like a visual expressive way to use from emotion and all the everything you can do in the ui is tied to a concept in fair emotion and i've seen people implement explosions of particles at least in uh foreign motion before so it is it is possible um so let's add overlay let me see if i add that i need to import it from uh component slash overlay will this only work with next.js um as of right now it is a feature in webpack five um which and next.js has really added another layer on top of that so it is our recommended way right now but um yeah during the beta that's a recommended way we also have a code sandbox template that you can use um and you can also if you're feeling uh adventurous there is native apis because this is all built into the browser there is uh native ways of doing this so we're just going to add a little thing here so let's say is card selected so that if you select a card using this state here um that you can we'll have the card show up that you used um so then we'll render the card here and we'll just uh make it rely on all the let's see card and we'll use the all this stuff but instead we want to make it selected select card um i don't think we need key here and variant is going to be selected card dot variant um if we go down here or my scrolling's a little fast um handle card selection and then we just pass it in that variant and the block okay so and then on click of the overlay it's like it's got a scrim on it we're gonna make it close though uh close of the things so set selected card no so that's going to trigger this terminate this is maybe a bit complex but i just wanted to show you quickly how this would look if you wanted to make it feel more like a a real website we also need to click so yeah if this is like an e-commerce store or something you'd have it so you click on something you can see more detailed info so that's it renders the card again and how much time we got uh i can show a quick little uh a quick little thing let's say we want to make a detail view for instance um i'm gonna go a little fast here but it kind of shows you how quickly you can iterate with smart components we're gonna make a little button here make it gray we're going to say add to cart i did promise an e-commerce so this is uh we can call this we can call this e-commerce um and we'll do like a little bold shirt and uh maybe you ought to hover where you make it actually let's uh let's just make it a darker gray just for for now and uh we'll surround the corners a little bit so we have a little button here so we have a button and then so we're going to build a detail view and we're going to see how quickly we can build that as a smart component so we're going to call it detail we're going to insert that card we made and then we're going to insert a button and we're going to make this go here and add cart some this is maybe my best design uh that looks disabled doesn't it so not a very good job on the design work but that's okay and so we're going to call this the detail view and then we just want to lift those props up so we can pass them this is a concept if you're a developer you're used to the idea of lifting props up so we're just going to say that all the props on the card component we're going to take those one level up and also make them variables of the detail component so you can pass them down and so now we're going to import this detail component we just made and into here and we're going to replace that that overlay card component with this detail component and we should just be able to swap it in there we go so you can kind of see the steps that it would take to take from building a car component visually to pretty much something that feels more like a well i should have made that auto size but it feels a lot more like a site like we're coming together you have an add to cart button you have little preview modes you you have all the kind of the makings of a website and we didn't write a line of css the way i like to work with it is the kind of primitives like i have a grid component that i wrote css for like stack component and that's what this is rendered in but everything else like with the interactions and those kind of bits that would be complex to write or tedious or heavily interactive those are a lot faster to write with handshake so now we have our little ecommerce site that we could keep building out we could add text we could add a little description here or something make that a property of the detail view and you can kind of keep keep playing with this and these are all production ready so all you need to do really is to hook up an api to this stuff like a shopify ad cart button or something so um i did i have been spending a bit too much time on this part but there is one more section we want i did promise to show you but if our special guest wants to show up at any point we could also kind of do a little q a while we do last part but um yeah hopefully the oh hello that might be him right there have you been waiting outside or was that a really good time in okay uh yeah hey come on in uh there's a stool here if you want you can see let me know if you can't see or hear him yeah this is uh you might want to crouch down there too i'm just yeah maybe the chair is good we didn't rehearse this part but uh so vova is uh works with me on the team that built a handshake um he's one of the geniuses behind it uh uh him and uh blixed have had some uh crazy ideas over the last couple years so i wanted to invite him in to uh answer any questions you might have or just kind of uh talk a bit about handshake but well i get uh i'm gonna get set up i think we showed kind of the basic workflow of starting a site from scratch and you get set up um with what it looks like to put smart components or handshake components in a production website but that already exists um that kind of incremental adoption but while i get that set up you want to intro yourself and maybe talk about uh yeah this camera yeah yeah yeah hey hey folks yeah my name is uh voa yeah so i've been working yeah on the handshake feature for i mean probably been more than more than a year since the initial prototype and stuff um yeah super excited about like where we uh ended up and really like bullish on the whole kind of esm uh stuff like being able to you know make developer uh like development fun like web development fun again basically with uh you know the ease of sharing all you need is just a url you know yeah bova was able to convince me of uh how good url imports are i took my while to kind of understand why we're so excited about kind of an import import and export api in javascript and then one day it clicked for me and i was like this is the most exciting thing to happen to like creative code and experimentation and playfulness on the web uh in in terms of apis at least in in years by my opinion so yeah he was kind of uh yeah he kind of introduced me to it and got me excited that's for sure um let's see if this is working here slug with i just tested this like 10 minutes ago maybe it's fine yeah so one of the things that handshake has um if you have any questions for volva specifically to uh as the time i didn't have a chance to answer to the last batch by the way the last batch maybe go through them like before we go yeah sure we can take a little q a here because this is like a stretch goal um of showing this just an e-commerce template um explode i talked about the explode animation um yeah max made it work with storybook somehow which was actually really cool um i think he has it shared somewhere but uh that was really cool to see happen and probably mentioned that right so it works not only with nexus but with any kind of webpack base yeah and as it becomes more stable and if like create react app without adopts webpack five or like if this comes goes into stable channel like all these things will start to adapt uh adopt it as it becomes stable in webpack five which is everywhere really i think another important thing is that you don't really need like even need web back for that right because it's uh basically like spec compliant uh asm uh standard standard modules and you can actually use them natively in the browser in chrome with with the use of like technology called input maps you can do that in other browsers you may need polyfill for that but basically yeah it's like web native yeah and so that's also theming yeah if you just use variables and you can like kind of pass in that if i wanted to make like an accent color you can also use that um and we're also exploring kind of what style tokens look like in an esm world um and so we'll make sure that it works as a system so yeah but uh it's a pretty good answer there but say you can also yeah variables for like accent colors or something and then change that um in your in your designs as well that was shopping card so if you have a theme that looks like that you can just pass the theme down or a theme that's that color so let's try to replace this is a pretty massive template this next.js commerce template it's really accommodated for pretty much every workflow it seems but i wanted to get an example of like what it would look like to use a code base that i barely know how it works and i'm kind of playing around and um and so i want to see like if i can go into this code base that i'm not super acquainted with and swap out one of the components so let's try to swap out this product card component with a smart component so let's make this maybe a bit more optimized to work like let's get rid of these corners um avoid any option to avoid the url id update if i import the component and the id changes what will happen um if you could talk about like the version locking and prototyping workflow um yeah what do you mean id changes the id will never change unless you change it so it always points to that exact uh that exact version it is a save id it points to that exact uh a save of that code file yeah like if you ever work with git or something right so every git commit has its own like uh hash like its own kind of version and it never changes uh so our urls work exactly the same right so all that like magic edge that you see at the end uh it's basically your commit hash so uh it's gonna be around forever i mean like at least uh forever yeah forever uh so it's all cached on the cdn too like where i uh your my code uh talking to blix the person who architected the the module cdn there's never been more backups of my code than there has been on the the module cdn it is uh there's backups on backups on backup so yeah um let's see oh it's maybe like avoid the url id update so maybe like avoid updating urls to get the latest change i suppose yeah maybe like i'll always use the latest yeah and that's what you meant like just clarify that in the in the chat and we'll yeah um let's see let me see what other um other questions there was a question oh you answered one about the the code like using the urls right i like yeah cool all right so um i got distracted over here but i am building this component out here with a title and a subtitle and that we're going to use actually we can call this price maybe and we're going to try to use this over here um ask that price so we're going to copy this handshake import dive into this massive code base well in terms of a template like there's tons of components here and so we can just go in and decide we want to use one of these components to be handshake component and i think that's really really exciting like if you have a production site out there you want to just get a taste of handshake you can just try making a pr of one page with a handshake component especially if you're on next.js already um you might as well just try it out and for sure if you run into any hiccups let us know on the discord or if you make anything really cool let us know on the discord um we've uh we're still in beta so uh we're kind of looking for any and all feedback and uh you know as any people who build products we love seeing people be successful uh building things so um i'm just gonna put it up here so i can reference so i'm gonna shopping card and let's say image product.images.url so let's try that as image and how do you manage dependencies i see 20 versions sneaking into production when used in a lot of components when you forget to update urls yeah so there's well actually you want to talk about that boba you talk about either managing a file or import maps or yeah yeah so basically um like what you can do and uh what we recommend doing is like uh just like create a separate file which you like named your dependencies that yes or like framework components.yes or dot js and you put all of your uh imports like url inputs into that file and then you re-export your components from that file and that means that all of your urls are actually now nicely scoped into like in the same file so you'll never have uh like diverging versions and stuff so this is one solution another one is more for the web-based projects i guess you can just map that url to a kind of magic bear module specifier that's called that basically like an alias uh you can call it like framer button and then you map it to a url and but for that you need uh input maps to be supported by your browser uh it currently is only chrome and other browsers with a polyfill basically yeah there are solutions for that you can definitely like limit uh all right i think i got uh i don't think we don't want a big size i'm just kind of playing around with this component here but as you can see we're able to change the component in this code base super quickly and everything else kind of works and it swaps out everywhere that component is and uh we can like the the website also has to build these pages but we changed one component and everything still works uh super snappy as before and we can let me add a link to this page i think we need a link in an a tag to cover this um just to add the normal next.js link then we'll close the a tag and then we'll close the link tag so we just found a random component on this on this template and replaced it by just doing an early return here with a handshake component and i don't think we need this if we hop back over to there we should be able to use these for navigation as well yeah so there we go we added the link tag and these things work as exactly as they did before and we have the little components here we have the feeds in the images properly has the prices and we could build we could replace any component on this page with a smart component if we wanted and they kind of they fit in right alongside each other because they're all react components um yeah is there anything else i could do i could change another component maybe on the main page i can make that scale up we don't need these big variants anymore yeah and just make that a bit more fun yeah hey you wanna let's see what we can do to make this a bit more fun this is i want maybe two that's what i want i want it to be fractional there we go fraction and that's going to fill that so let's see if we can make that and then let's make it wanna make this not explode but we can make it rotate on hover that was not on hover you can make it feel down and rotate to really make you want to click on it and if you don't want to click on it still then we'll add a press state well we've got to give you a little payoff when you uh click on it all right let's see if that looks fun in production oh we can preview it here see if it looks good oh yeah i'd click on that buy that item um is there anything else you wanted to kind of talk about uh kind of any more a peek behind the curtain there were some people asking discord about the the story behind it um how did you hear about esm and all that stuff yeah well uh i think like the moment we decided that we're gonna migrate framer to browser we kind of you know realize that we have to change the way we approach like building code and components overall like in framer and then we thought that okay but now brothers are pretty good at you know javascript that javascript modules like at that point esm was supported by all the major browser browsers already uh so we decided okay we're gonna build our new uh platform upon the browser standard and so that we don't need to do like any bundling uh in the background uh like on the server because like servers are never meant to be used like for bundling actually um and yeah so since that moment like the whole journey started and it took yeah it took a while to get to the place where we are right now uh but i think like it's really like the payoff of uh of the fact that now you can share your ideas like so easily with just like a url that you can send easily to your friend and they can use it in in their app like instantly without you like taking on this whole journey of like publishing an npm package or whatever i think it's like really cool and exciting um so yeah it's been a long project but i guess uh without like of what we achieved with that yeah yeah it's been it's been a long one but it is nice to get it out there yeah so any other uh i could try that uh audio analysis hook or something yeah i think we have like a couple more questions there or yeah you want to do like you see uh how do you manage dependencies we saw that does anyone else have some more questions yeah yeah how much overhead do these have yeah that one is good one and like the about the announcement i think there was something oh really like a bit up there the beta announcement came nicely with the announcement of next chest 12. oh that's a good question you want to talk about that yeah um oh uh yeah so nexjs 12 um we've been talking for a while um because next js is like if you start a react project on the web next guest is such a great way to start um and it's how i start a lot of my projects now and we started talking to purcell and we realized that uh they were as excited about url imports as we were and kind of building the future of the web and working on these things so we said we started up a shared slack channel and we've kind of been sharing our progress as we got closer to this idea of visually building a component um and having it show up and react and they've been super excited about it the entire time and so as we got closer to something uh lee they're head of devrel uh just asked if uh we wanted to be have a part uh have a small demo in uh next.js conf because uh it made sense in the theme of like the development of the future and uh because we like we purcell and nextjs so much that uh we thought it was a perfect fit and kind of we're after the the same thing really innovating uh how developers work and create the web so it's really a perfect fit and uh so i uh shared with lee the demo that we'd been using for uh the handshake and we thought it'd be a good time to also switch to beta because everything is starting to feel more stable we have been practicing more like we're trying out more things and everything has been feeling pretty solid and with experimental support in xjs uh we thought it was the perfect time to to take it into beta yeah and uh uh yeah their whole team has been super helpful from building the uh actually building the support for it and thinking about all these things like local cash and all that stuff so it's it's a really uh exciting uh partnership we had going to to make that uh make that release happen so yeah it's a good coincidence that we were both working on the future of the web but uh after that we uh we did plan together yeah accessibility uh that is uh we're thinking about we're talking about that today we're uh we have ideas and uh some kind of prototypes that we're uh we're thinking about so it is uh it is not not forgotten and uh we want to make sure that these components before we uh or we send them out into the world that it's something that we really consider because yeah it's actually like in the works it's like yeah knows and false who are literally like starting working and that yeah it's like next week probably but yeah yeah uh what was the other one you wanted to oh overhead that's a good one for you to talk about yeah the overhead i mean like you can examine the code yourself by just pasting the link in the in the browser like the component link into into the browser um bar [Music] it's basically yeah it it looks like generated code that uh in terms of maintainability i wouldn't like to maintain like code like this but luckily i don't have to uh but in terms of performance and stuff like we take those things extremely seriously so uh this generated codes is like super performance right so we make sure all of your animations they like work great uh the code itself is uh basically minified so we try to reduce the size as much as possible um so yeah the performance aspects we take seriously the you know obviously the code itself is it's still like generated code but it's also like generated using the same techniques that a normal like engineer would use to code their red components so nothing like crazy there so i wouldn't say that you take on like much overhead with those um uh he's asking about that yeah the kind of the how do you get uh the component without pasting uh the url um you want to talk about version login maybe or prototyping or that is something we gotta uh i think uh we wanna focus on that workflow a bit more kind of flesh that out um if you restart your devs if you get rid of the the version at the end there and you restart your uh dev server you will get the it'll fetch the latest every time or if you have something that doesn't a setup that doesn't cache every time you refresh the page it will yeah maybe you can like just demonstrate how those uh version less and or like working full urls actually work in the browser like they yeah i don't just resolve to different things right template here code sandbox template or something yeah that would probably not cache right or yeah you probably need your template of your import map template to use the latest one so yeah probably okay yeah okay maybe that's a demo for another day but uh you can do that yeah i mean like that if you omit this uh last piece of the url just delete this then that's going to get me the the latest code right away the latest yeah yeah so if you use a setup that doesn't cache um then every time you refresh the page you'll get that latest one and then you can turn caching back on um this is a workflow that i want to add to the docs uh soon as we get a better idea of what's up what's a good way to make it work can you batch export urls for to bump all versions of a component at once and paste into a central file et cetera um um yeah i think batches that probably would follow the same solution of trying to update uh get the latest of a component um yeah i mean if you mean like all the components from the same project and like paste all of them then probably it's not it's not possible currently right so you can actually do that uh yeah that is a i'll write that down i'll see if we can uh see if we can actually get a workflow for that batch update and get all the latest yeah okay that's cool and max asked um can you batch import all components that have to open all the pages during yarndev that's more on the versailles side of things so i will uh i will pass that feedback okay we actually erased that already right yeah that's a good point i don't remember what they responded though um well i'll make a note to remind myself to just talk about that so that was um yeah import without the iron via max was running into that earlier today um that's the issue ran into today wouldn't build because yarn oh you did yarn clean without running yarn dev again okay yeah i will pass that on again that more people are running into that oh that's that's an interesting one um you update a button but some other card component uses the button it won't update unless you remember to update the card url too yeah that that kind of stuff i mean you just need to update your card if you wanted to have that because right so it's it's impossible for us to guess uh what would be uh the behavior you expect in this case because like some people would ex expect like okay uh i want my components to not magically change when one of their dependencies change uh so i want to be like right or actually like explicit about those things and like explicitly click that update button uh like in the components panel or whatever or like paste the new url in the frame in the next chess project but like some people would prefer to like you to magically do that so yeah i mean like we decided to go uh down the path of least surprise so the list surprise in this case is just like stuff is not updating without you like opting for that yeah and these are the the kind of feedback that uh is super helpful to us too they hear about these workflows and like when you run into these things so if you start using handshake in your production sites or [Music] start trying it out like please let us know in the discord like these are the things that we want to make sure we have solutions for um before we come out of beta so uh yeah please uh we're we're trying to listen as closely as we can to what uh everyone has to say right now so um please just keep it coming uh is there any other this is you import the and in the barrel file exactly again yeah all right is there anything uh i just hit a flexbox gap on are we using gap yeah we're using gap there already or we transpiling the css i think we we're using gap i'm i mean like gap is supported by all the major browsers right now is it on mobile safari or maybe it might be one of the newer versions or something i think it's yeah it's close but i will uh i will write a note to look about that as well okay yeah um just to end it off i think as i think we're seeing less questions unless you saw anything i just wanted to show a fun little i don't know this is just uh i randomly toss a one of like things i like about url imports is that you can just kind of import you can make little help for helpful hooks that are fun or like creative coding or like useful and share them with anyone so like i always like to add this random hook that is something you couldn't do um you couldn't do like like sharing a little hook that you can import and you just had in a random framework file is not something that uh you've always been able to do so i like to do um let's see if i can remember the api on this one um you might want to open that code file in the browser though i mean the url just in check yeah you're probably right but like i have a helper hook that i use sometimes uh i like to play with some like audio analysis stuff in framer just because it's like a really that's like the fastest feedback of any code editor for me so it's like where i like to play with ideas and stuff so i have this hook here um we are trying to figure out types at some point but let's see um actually have it here made audio and i think that type is actually wrong i give it let's see if this works this should be a motion value um yeah i think this should be fine okay motion value is made up of motion values so we just imported this hook that takes this thing and then i believe card is let's see i'll wrap the card there now this is the wrong page oh maybe it's fine um but yeah it's just like with framer you have the smart components you can put card code components from an import inside a smart component compose hooks from three other people on the discord that you shared because you thought they were cool and then you use all that in another smart component import that as a url like it all compounds uh and kind of every piece of code you share very smart component you make can be utilized to create something else and i think that's uh that what's that gets really uh exciting um yeah if anyone has any more questions i'm just kind of stalling to make sure to see if there's any less last questions coming but i think uh i think we'll probably wrap it up here we can see if we can get this working and then uh it doesn't like that key prop yeah um yeah a question like we're considering exploring all component libraries under one module um yeah so we're we're thinking about that so sometimes it's basically like if you've been around framer for a long time you probably remember packages so there are definitely like you know use cases for packages when you literally want to like explore multiple components um yeah like together like they work together nicely or whatever you they're just like a part of the same um component library uh we're thinking about that and yeah we're gonna be working on something like that um just not not currently but yeah it's on our list yeah definitely well there you go here's the audio analysis live imported through a hook so normally if you did this like you'd have to publish this on a thing uh i don't know it's just like a fun example that is like this is one import and it exports a motion value based on that yeah the rms i forgot what that stands for but it's one of the audio analysis vectors or features um and you can use that to animate stuff so you can kind of like play off these things you could also add like uh you want to import 3d or firebase and it's really easy to compose these things and just kind of fun ideas um and yeah i think it's just like in general speaks to like the ease of like sharing your ideas with uh with urls right so that's like the superpower of the web platform that we can do things like that and until recently i mean it's been like way more hindrance that i i would like uh prefer uh for sharing codes uh between like apps or whatever just like in general on the web so that was part of our mission to basically bring back that that fun of like simple sharing yeah yeah so now that i've a broken rxn uh our example here and uh made it awful i think that's probably a good time to wrap it up but yeah bove and i both like we we care about the web and that's why we we do these things um and we care about people uh being creative and trying things out so i've said it probably four times now but if you make anything cool with code and frame or handshake and framework uh please share we love to see it um just like maybe a little kind of hint or whatever it's like if you are also like missing this uh kind of old like packages functionality i mean try setting up your own project like as a sticker sheet basically uh put up your like a bunch of components there and uh allow folks to just like copy and paste links from those components like yeah they can paste them into other framework projects they can paste them into their production apps things will just work so i mean yeah just try try out sharing yeah i think it's the most powerful part of this feature actually yeah if i see a hands handshake component link on twitter i'm uh i'm gonna be excited so uh hopefully i see one of those soon um and what's cool is that we haven't even finished unlocking all the potential we have ideas floating around that we've had for a little while that we just haven't gotten to yet um so yeah we still more to come which is pretty exciting uh there's a lot to lean into into this tech and really explore with so yeah um thanks for the hype guys uh you know my first stream uh on my first framer session solo uh thanks for vova to joining me there but i'm glad everyone uh enjoyed enjoyed watching and uh yeah hopefully uh yeah i hope to see you on the discord um yeah all right it's been fun see you later folks thanks for watching you

Channel: Framer

Views: 1,731

Keywords: Framer, Framer X, Live, Design, Code

Id: 6SEHttXpLKI

Length: 74min 44sec (4484 seconds)

Published: Fri Nov 05 2021