Ruby on Rails #54 Gem VanillaNested by Ariel Juodziukynas (Cocoon successor without jQuery)

hello so today is going to be a special episode where we have a guest star and this is ariel a creator of a new ruby on rails gem that should replace the gem cocoon and the gems name is vanilla nested so ariel can you tell something about yourself sure great thanks for having me here i'm marielle i'm from argentina i'm a race developer since 2010 i think and i've been doing mostly ruby on race over the last 10 years or 11 years um and i remember at some point during my career i had to start migrating off from jquery on the project because we wanted to optimize and request times and those things and we were using using the gem cocoon and i was really struggling to remove jquery because i have all those shams with dependencies and at that time i couldn't find any replacement for cocoon that will use just vanilla javascript and i started just doing some things in-house for that and over the years i found that it was an interesting idea to create the gem to actually have that available for everyone and to also update with the more modern things in ruby on rails like i know using web packer so yeah i decided to a few years ago to create this gem it would be like uh it's a a similar gem to cocoon it helps you add input fields dynamically or remove input fields dynamically for your nested forms but it uses vanilla javascript so it has no extra dependencies and it's it has some features that are different than cocoon i think more advanced feature like undoing changes or some different events for the user to to really um connect to different parts of the process to really customize the experience um and yeah i think a few weeks ago i released this then i released a new version of the gem i fixed some bugs that were there for a few for some time uh but i got the time to to finish fixing those and release uh the new version yeah actually i know cocoon is one of the gems that i've been using in most of my uh applications and uh well uh i really love the feature of being able to like dynamically add or remove fields inside a form and the one thing that has been really holding me back uh since rail six was released so uh uh now usually try to keep away from using jquery and uh like when i google something i always try to find a solution that doesn't use jquery and kuhn has this jquery dependency and uh i didn't like the idea of installing the jquery just to use this gem and uh like i remember cocoon had a few uh issues about uh like open issues about uh rewriting cocoon in the vanilla and uh well um it's already quite an old gem so it's really cool that uh now you've made some fresh vanilla code and we wouldn't be needing to use jquery anymore so maybe let's have a look at the gem and how it works yeah sure let me share my screen um okay so the the gem like in most modern rails gem that needs some assets in javascript it consists in two things one thing is the gem and there's also an old package for that so it's all in the same re in the same package here so uh you can use this gem if you are not using webpacker you just use the gem like jam insta gem vanilla and it works with sprockets out of the box and if you want to use it with webpacker you also need to add the the node package or using yarn and right now it's pointing to my github repo it's not um in yarnpackages.com um and you need only you only need to add the import in your application.javascript um i think at some point i didn't know how to use to set up this thing to web pack properly and you had to manually copy this the javascript file in your javascript folder but now it's just uh it's a whole package it's work with all the rails version with sprockets or we knew your version with webpacker cool um so the gem consists in two parts it includes helpers that you can use on your backend and it includes some javascript that will connect your uh the tags that the helpers created with all the dynamic parts of it with in your client in the client side uh so let me show you the part of the call here so if you are familiar with cocoon it has two helpers basically uh you have the link to other association and the link to remove association i had i i i was inspired by that gem and by the rails cast but from ryan i remember the name yeah last name ryan bates um so we have similar method here you have a link to ad nested and we have also lean to remove nested and there's a lot of things that we can pass here to customize the functionality of the the the style and the functionality the way this works basically is that it will you will need a partial with the fields of your you want to add or remove dynamically and it will render the partial as a string and it will add the string with all the html content as a data attribute of the of the tag that we rendered there in the view and then we also have the client-side part of the gem that is this javascript file with all the that connects everything so it will just um when the application runs this is set up so it works with turbo links and without turbine so it works in both ways so it's just when the upstart it reads all the vanilla nested special classes from those from those things and you will connect all the javascript um so every time you don't need to connect anything it just it just works but you can connect to a lot of events that happens during the process of the when you are using the mini the application um so you could even connect to i know an event when a field was added when it was removed when it was hidden from before the undoing because it it gives you more features like undo and it reads i know uh some advanced features are like you can it detects that you set a limit on your association and will three or so events so you can act on that so i know we can i think we can uh if you want we can check an application that's using the the gem and see how it's set up and how it works yeah absolutely sure okay so in the same rep i'm going to use the application that we have in the in the repository uh that i'm using for the test of the app and so the first things are that in the gem file we add the gem right now i'm going to i'm pointing to the local version because this is the repository but you you wouldn't use this part and then in the package.json we have the vanilla nested i'm also pointing to the local file here but it will point to my github repo and then we need different models that we need to associate so we can add nested forms and we can use this this this tool so one requirement of the of these two for for this to work is that we need to use the accepted nested attributes for helper that's something rails needs so the fields for are handled properly in a form when you do nested forms and when you submit the form raise will handle this we handle everything for you it will set up everything it will handle the attributes and all the associations and deletion um and we also have uh another model that is associated with that then in this case we are going to have a user with many bets for example and you can see here i'm setting a limit of 3 and that this is a feature of rails [Music] that it would validate that you are only that number of associations and in vanilla nestle when that number is reached it will trigger an event so you can react to that for example and now this will enable the button or show a warning or maybe remove the oldest one i know you can do whatever you want with that i didn't want to add any default value uh one option was to disable that when you reach that limit but i didn't want to force a behavior i just want to i just emit an event and somebody can listen to that and react and do something yeah i actually don't know that you can set a limit oh yeah it's uh i when i was uh doing the research for this gem i was trying to do to check what are all the features that you can use for accessing nested use for and what can i automate for that and yeah if you said if you don't set the limit you can do anything but if you set a limit i know you can say i want only three pets here uh if you try to save a record with more than three it will fail so i wanted to automate that in the gym in the gem zoom um so this is a test application so it has many cases use cases so if you go to the app it it has a test for a basic usage is here but it can also it showcase how to use custom tags by default it creates an anchor tag and a tag but you can change that to be a button i know a span uh id whatever you want and it also includes an undo feature so if you by mistake delete something you you have some time to undo it uh but it's also configurable by default it doesn't have another feature but you can set up some time out there uh so let's see i have this uh basic form and when i click add pet it will add more fields to this thing and we don't need to to to do our requests right um so that's the that's the functionality of the gem when you click dx here it will remove that and for these things to work um let me inspect this button so you can see here in this in the button we have all the html that is being added every time you click it's in the data attribute so this this is device of how it works [Music] let me go back to the code to show you how this is actually set up so if you have you have your form right it's a basic rails form and at some point you have to call the helper that's called link to add nested and you you have to set up the the arguments are the actual form builder using here the name of the association is symbol and the id of the of the element where you are going to insert the the new fields right so these are the the form from here this is the name of the session and this id is the one i have here in the id equal parts um this it's you can put any content you want here you can add a blog if you want to make some complex stuff here or you can add um there's a property link text an attribute that you can use linked um argument that you can do you know like and you don't need to add a block so you have the possibility of only a string or more complex content and this is a basic rails feature this is not anything related to the gem but we need to use fields for the field for our helper this is connected with ax accept network attributes for uh we need both working at the same time so this works and you just add the name of association and it will give you a form builder for the association for one each element of the association and then we are rendering um partial with that with that object one thing to consider is that the gem by default will fall back to this to this name the name of association underscore fields but you can also customize that if you have let me give you show you another example if you have this uh a different name for the partial you only need to add a partial argument to the helper and you can just use a different name so you know by the default is the association in singular underscore fields but you can customize that if it doesn't feed your your space we do need the the partial because it's what we use in the helper to to render this in the attribute so we need a partial for that and the partial will just include your form information the order form fields and we need to add this helper to remove the association right it is the same i'm just adding thing here because this is for the test application but we can also have link text here and say x and that's it but sometimes you want to render a nikon image style or whatever and you can customize that here one important thing is that this helper must be a child of this tab because this uses a javascript closest method and it take it checks for a parent with some uh id so it needs to be a children of that element if you put this outside it won't work but you don't need it it doesn't need to be a direct children it can be a nested children and it will work anyway so that's the basic setup we have the the form rendering a partial and in those in these two places we need to add the head to to call the helper the add to nested to create the add button and then remove link to remove nested to create the x button okay so after that's that's connected we have for example here when i click this button it will read the html from the data attribute and it will inject that in the inside this um inside this the element with that id in this case it's id pets so i do that i add more things and when i get to the limit that it was reported by it was set up in the model it will trigger an event um by default it's just triggering the events so i'm in this test application i connected i'm connected to that event to render this message so i can show you how to connect to events so you can react and do whatever you need to right so if you go to your javascript i'm importing the vanilla nested gem and then in the document object you can listen to all the events that vanilla nested is triggering and it every every event will be we will start with this namespace vanilla nested colon and then the name of the event and for each event you will have information that you can use if you have your event of your event object here you can inspect that and it will give you the name of the the actual element that was added or removed the what thing you click any information related to that event um there are many events that we can listen to so for example let's go back to the readme this is another readme so the scene is a bit hard because it looks better so here in the readme we have all those things that i show you is how to set up the accept administrative use for the oh one thing one important thing is with any rails nested form you have to permit the name of the association in plural underscore attributes this is rails nested forms um a requirement for them and also with the you need to add the underscore destroy um you need to allow this if you want to remove things from your phone then it shows you how to use the the links helpers and then we have all the the options we can pass to the to the helpers we can set up a different text classes we can say if we want to add the the new fields at the top or at the bottom of the list so we have the insert method we can do prepend or append we can change the model partial we can um if in our partial the variable is called f f instead of form or whatever name you can just change that in the also as a variable because sometimes you need to adapt to a form partial that's already there so you can customize the name of the partial and the name of the variable that that holds the form builder this is somewhat new feature uh yeah you don't need to always render an a tag you can render a span you can render a button you can render anytime and i have a an idea of a next feature that you can also pass attributes for that tag so if you want to i know if you have a a tag and you want to pass i know um tab index or if you have an if you have a button and you want to provide a name attribute you can do that here but it's not it's not there yet um and you can also add content as a blog and not as a string if you need to have more complex stuff like uh i like tags just text and you have similar things for the link to remove nested so we have the same link text or block classes um oh sorry my dog is working yeah that was nice if if you want by default the way this works is it will it will use the name of the association underscore fields to detect what's the con the wrapper of your fields but you can also customize that maybe if you depend on a form uh if of a partial that's already built you don't you want to say okay this is the uh the selector i want to use for example and not a hashtag i need some id then let me see uh it also has a tag and this is uh i think it's a interesting feature that you can undo the deletion so if you set up the undo link timeout and the undo link text you can actually undo the the removal before that time time happens so let me go back to the two examples here so there's an example with an undo yeah so when i click here it will give me an undo or it's it's too fast right now it's set up let me change that so it's [Music] we undo it's too fast right now so let's do five seconds so if i open the app and i click here i have five seconds to undo this thing and when i click it goes back so if you click by mistake this button you can you can you can revert that it's not a problem uh you can also connect to the events to prevent the click if you don't want if you want to show a warning or an alert or whatever and you can also you can customize the time and you can customize this string by default it says undo but you can there you you can use an icon i don't know a recycle icon or whatever um and what else let me see oh and then we have all the events so for each event that happens during the use of the of the tool you will have different events on the document object so you can have uh when something is added you will have this event and with this information so you can get the name the container the the link that you clicked so sometimes you may have different uh forms in the same page so you you want to know which one was the one that you clicked um you also have a field limit reached so if you get to that limit it will send the event it won't do anything more than sending the event so if you click more times it will add more fields and and emit more events so this is not limiting you it's just sending an event the same you have for fields removed so when you click the dx it will trigger this event and you have the information of the thing that was removed and if you set up an undo time it will first hide the elements so you have an um event for that and when that gets removed it will call d72 so you can connect to those two steps during the the removal uh if you undo the hiding you can also have this event so if you click undo you also have an event for that and you can redo something that you did when you click the removal um yeah i think those are all the features for the for the gem yeah actually there is one of my main applications that is still running rails 5 and like i went to the jump file and made kind of a plan of things that needs to be changed to use the gem with rails 6 and some things were like the gem was using bootstrap three and uh i wanted to use bootstrap five and it requires like some different gems and then uh it wouldn't require gquery also uh uh i didn't want to use cocoon and uh like keeping jake fury inside the application because of uh cocoon was also kind of holding me back so i mean i'm really looking forward uh to trying to replace cocoon in an existing application with the vanilla nested and seeing how it goes yeah hopefully the change is not that different because i'm i was inspired on that gem on that gem so it's using similar helpers and the basic idea of having partials nested forms except in strategy for is the same in both so hopefully it's just replacing the gem adapting a little bit of the of the code but it shouldn't be that that hard yeah i mean i like the idea that uh it's a new gem it was built based on the existing knowledge and it doesn't use jquery so oh and and i love the undo feature yeah that was something i was i i had to implement at that point using cocoon and i had to listen to the events that cocoon was triggering to add some thing but i had to do some hacky stuff like listen to the undo save that information somewhere then let's go to the delete set information and then adding that thing on my childhood i wanted to have that in this gem because i think it's super related to that right it's uh it's something you would expect on this thing to handle because you are removing that and you want everything there uh but it's optional it by default is not doing that so um it's it's more versatile yeah and uh is your first gem or have you created john's before um [Music] i did some gems in the past or were mainly hacky stuff that i needed for work maybe extracted something to a weird gem that i only knew how that worked and shared that with my other projects there was no documentation no anything uh this is the first one that is actually made to be a gem for the public to use with real research on how to use it how to do it properly how to connect with different race versions how to support different things and it's uploaded to robbie gems so this is the first time i do that i'm currently working on a different gem it's not related to this thing but it's uh it's like a we start um interactive rails new command that lets you add a lot of tools um i know you can run this command and it will ask you i know you want to use some um template handler and you say i want rbm handle or slim do you want to use i know r spec or mini test do you want to use simple code yes or no so it asks you a lot of questions of different popular tools and it will create a new race application with all those tools set up for you this is it's working it's there in in my github account uh i haven't published that yet in rubygems or like on twitter or anywhere because it's something i want more people to test before doing a real announcement but yeah i think it's uh it's like a better avatar version of the gym yeah actually i remember like uh a year and a half ago or so i was reading the forum post on the ruby forum and there was this discussion about making the rails new command more interactive so i mean by default you can just say the name of the app the name of the database and which uh like if you want to include or don't want to include some kind of like action mailbox or action text or something like that so uh i guess there were like a few tools that was fun out of that uh forum like there was uh railsnew.io then uh there's this jam boring generators that just has some templates on like you just run the name of the template and it installs device or something like that and then like rubidium and rails bytes so kind of couple of public places where you can host your template scripts and run them in an application so your tool would be like uh similar but with the rails new command yeah it's um [Music] it's it the idea of the channel is to give you all the functionalities of the to set up the flags for the price new command but also give you more things that are outside of the basic rails new command uh let me show you right now it's so beta that i don't even have a name it's called race new app um so right now it's it gives you all these different things so if you want to set up different gems different databases this is just setting the flag from the raze new command but then i know if you want to use our spec simple code factory board and faker it will also add your those gems for you so it will ask you during the wizard step by step what do you want to add and what you want we don't need and these are all the things that it's already supporting so you can set up different tools for your tests different template engines different form helpers different pagination gems this is also setting just one fly for uh for the right new command uh you can add authorization with bandit or can can con you can have authentication with device you can set up different linters and one thing that i always have to do when i start a new race application is i have to add the remote that i have on github and i i usually like to change use main like we have on github right now that's the default so i added this thing that will also make your first new commit change the name of the branch and add the remote for you so you don't need to do all the state manually it will just ask you during the the process you just press enter at the end and you see doing a bunch of stuff adding gems doing everything and you are there with your universe application with all these tools set up for you if the basic setup then you have to customize and add more things but at least you have the bare bones working yeah i really like this uh idea of like uh setting flags uh then running your rails new command but not uh i mean not starting with some kind of uh uh just template uh that you've created the a year or two years ago or some kind of random template from the internet or let's say uh just finding some kind of uh script on how somebody once installed device so i mean looks uh kind of promising to me i mean uh it's got uh tests it's got uh what do i need most i would need the like ruby linter so like robocop i would guess then aspect uh i guess stimulus and i like the last one so git add remote set branch name and so on and some things i want to add to this is for example to already set up your desired ci file i know a docker container so you don't need to create a new i know github actions file configuration it will read your setup and we'll just add the commands you want on github on ti yeah actually i like that for github actions yeah so like always when i install robocop the next step is uh setting up github actions for robocop so i mean i think it's a must-have yeah uh but yeah this is a beta thing if people is interested into trying this and give some feedback that's great um for me i've used that and it's working but i haven't tested in too many places and i developed this on linux so i don't i haven't done that on windows for example so yeah if people is interested on this that's great you can see that in my in my github repo cool uh well okay aerial uh thanks a lot for sharing the vanilla nested with me and uh with me today and with the world on github and uh yeah i'm really looking forward to trying to implement it uh locally and trying to replace uh cocoon in running application with vanilla nested great thank you thank you for having me here yeah um i i love to talk about all these things so i think it's really interesting to to be able to show the code and see the reason why i did something because uh sometimes i like this idea of when i read when i see a new gem i sometimes i don't understand what's going on i just use the gem but i think it's interesting to know why the gem works and how it's done i mean uh like i i could just do it on my own i mean i would just open the gem look at the readme try to implement it uh locally and i know record a video but i mean it's uh in my opinion one thousand times more valuable if like i have the opportunity to speak to you and you know well the way you wrote the code better than anybody and then you go through and explain it and the features of the gems so thanks for that yeah that's great that's a really good idea to have uh developers talking about their their creations yeah okay so then cheers great thank you

Channel: SupeRails

Views: 343

Keywords: ruby, rails, ruby on rails, tutorial, programming

Id: iLKnbK__2_M

Length: 33min 56sec (2036 seconds)

Published: Mon Sep 13 2021