Dominating the DOM to Create a Market!
I decided to create an e-commerce style app using Javascript(JS) on the frontend and Ruby on Rails(RoR) for the backend. While using RoR on the backend, I decided to create two methods, instance_to_json and self.array_to_json, inside the Product model to better shape how the data from the JSON would return to the frontend without excess information. RoR handles the database of users and products for the app while Javascript, CSS, and HTML handle everything on the frontend. The app, iShopiSell, allows users to create products to put on the market in addition to buying other products that have already been placed on the market. It currently does not deal with actual money, but instead utilizes the concept of money, each initial user starting with $200 in their account. Products can be sold at any price and users must also put the quantity of the product they possess when placing it on the market. Users can only get additional funds in their account through selling products, and the market also makes a $1 per unit sold of your product. I would advise anyone making a similarly designed app or using JS and RoR to create a web app to create their models in Ruby first then the classes in JS — one at a time - it will make the process go a lot smoother.
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.
While working on this project, I gained a better understanding of JavaScript and DOM manipulation that I know will be useful in the future.
