Introduction

So, you’ve now learned a lot of juicy JavaScript, enabling you to make various components of your HTML/CSS page react to user actions and/or input. That’s great! As you’ve seen, you can get your apps to do a lot of pretty cool things already, just using client-side JavaScript. You may have noticed, though, that there is still an important piece of the puzzle missing: unless you use Local Storage, your app ‘forgets’ the user’s preferences, as well as any other changes made, as soon as the page gets reloaded.

While Local Storage is great, it’s not ideal: it only stores data on the computer from which the user is accessing the page. This approach does not allow for the app to ‘remember’ anything when the same user tries to access it again from a different device. For that, you’re going to need a real backend.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• Explain how “unobtrusive JavaScript” works.
• Explain how to pass data from your Rails application to your JavaScript.
• Explain why you should use AJAX to load large batches of data.

Building your own backend with Ruby on Rails

Since you’ve already learned Ruby on Rails in our full-stack Ruby on Rails path, the next step is obvious: you get to build your own backend with Rails! In preparation, reread the Rails lesson on building an API to refresh how to set up a Rails backend that can handle JSON requests.

Are you done? Good. Next, it’s time to practice allowing your front end JavaScript to talk to your Rails backend using AJAX. We’ll cover some best practices for how to pass data from one to another, but otherwise it’s up to you: you’ve got everything you need to put together those final pieces of the web development puzzle.

Assignment

Additional resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

• How to Build a fullstack Rails 7 backend with React Frontend
• Grabbing your Rails form CSRF token with JavaScript so Rails doesn’t yell at you with “Warning, can’t verify CSRF token authenticity”, via SO
• … and another SO post on the CSRF token

Knowledge check

• How do you load custom JavaScript in a given Rails view page?
• How does “unobtrusive JavaScript” work?
• How can you pass data from your Rails app to your JavaScript?
• Why would you want to use AJAX to load large batches of data?