I added a jQuery front-end to the rails application I talked about building in my last post. While the site is still pretty bare-bones visually, I was able to make things run much more smoothly and intuitively by adding JavaScript. My main goal was not to add features or any extra functionality to the site, but to handle pieces of it with jQuery instead of always having to render entirely new pages every time you want to see something new or submit a form. Since the application is all about storing information about D&D characters, I figured it would be a good idea to allow characters to have secrets – things only the owner of the character can see – and separate it a bit from the rest of the character information. I used to have a link on each character page that would take you to another page that listed all of those characters’ secrets. That was ok, but jQuery allowed me to simply display the secrets on the same page as everything else, once the link was clicked. That way you can still see all the other character info, but secrets aren’t showing by default. I used Handlebars to create a template with which I could easily generate html to show the information on the page exactly where and how I wanted. This simplified my jQuery quite a bit because it can get really messy trying to select and change specific elements, and also include a bunch of formatting scripting all in one place.
Using jQuery along with Handlebars allowed me to abstract away a lot of unsightly and duplicate code I would have had otherwise. It was surprisingly intuitive for me to be able to replace a lot of my existing code with a different pattern, using AJAX requests to communicate from the client to the server in the background. As much as I tend to prefer back-end coding, using these basic tools actually made it pretty satisfying to code the front-end of my site. I think the more JavaScript I learn, and the more experienced I become with various front-end tools, the more I’ll be able to enjoy and appreciate what used to seem very tedious to me. I’m moving onto learning React now, which has been pretty great, so far. I think it may be the most useful thing I can learn right now, because it works with all kinds of applications, regardless of what stack they are built on, and is extremely powerful. I’m excited to keep learning, and building better and better projects.