Fetch requests are used to connect the backend and frontend of the website, but you will also need to install the gem ‘rack-cors’ and go to the config/initializers/cors.rb file to allow your website to interact with the backend. CORS, Cross-Origin Resource Sharing is needed in order to accept cross-origin AJAX requests, i.e. fetch requests. Make sure you have seed data to test your code. Once you properly have your models prepared, using rails console, and can see the returned data from the fetch request, then you can move on to creating your class objects with a class constructors immediately once the data is received from the backend. You can now start working on your HTML and CSS, maybe start CSS later, to get a view of your website and start to test your JS skills. If you think you’re going to be manipulating any piece of the HTML in anyway, you should add an id or class name to ensure you’re able to access it in your CSS and JS file. DOM means Document Object Model and it essentially means treating your HTML document like an object in object oriented programming. It’s almost everything you need to know in JS, not really but it’s definitely involved with the essence of JS.
It allows programmers to dynamically change elements in the HTML document, create new ones, remove them, etc. It allows the user to interact with the webpage without necessarily having to refresh the page. The information is persisted(saved) using fetch request and sending the data back to the backend of the website with the database. If you’ve been naming the elements that you plan to manipulate with class and id names, you can add “eventlisteners” to the elements. In my app, there are “eventlisteners” for every button, which allows for users to log in/out, add items to their shopping cart, remove them, and creating new products all without ever having to leave the same page. The data really only persisted once a user had made a purchase or a new product or user is created. New products appear in the HTML immediately after they are created in addition to being persisted to the database at the same time. Dominating the DOM is fundamental to mastering JS and it’s also fun!
Outside of dominating the DOM, you’ll need to get familiar with classes and object oriented programming to further master JS. I created four classes for my web app, one for each model and one to handle fetch request to each model. It helps clean up the code, so there isn’t lines upon lines of code all within the same file. It can get really confusing following the order, so I put all the functions that really only applied to particular model inside the class for that model, such as products. As mentioned previously, I used a class constructor to turn model(s) from into class objects. The products are the only model that can be purchased, placed and/or removed from the shopping, so those functions are only in the product class and called inside whichever eventlistener triggers the action on the product. I call on the ProductAdapter class to send the proper fetch request to the server when the transfer needed to be persisted to the database.