How to create your own JavaScript project
To be honest I’ve learned JavaScript for some time by myself before I got into Flatiron School and I couldn’t quite understand it. Because I think JS is very messy compared to Java which I think is very logical and sensible. So I was very unsure about whether I could get through it this time at the beginning of this study session. While learning and finishing my project I could see the confusion went away bit by bit especially when we started to relate Ruby on Rails as an API and Object-Oriented-Programing with JS together.
Project idea and structure
I traveled back to China to visit my family and friends in April. The blue-ray remake version of Lord of the Rings trilogy happened to be on in the theater. Though I’ve watched them all before I couldn’t resist watching such classic movies on the big screen. This experience strikes me that I can develop a single-page application to create movie lists, add movies, delete movies and change the name of the list.
Use rails new name — as API to create backend files.
With frontend, I haven’t had any framework to do the magic for me so I just created all the files by myself.
Also, there is a song to play when browsing the page.
Set up the backend
After Rails takes care of generating most of the files. There are only a few things left I have to set up manually. Firstly go to the gemfile and uncomment ‘rack-cors’ then run bundle install. Then go to config/initializers/cors.rb to uncomment the middleware. This configuration can authorize fetch requests from the webpage that we approve. Now the model. Watchlist has many movies, movie belongs to a watchlist.
rails g resource WatchList name
rails g resource movie title watchlist:references
these are the command I use to generate two models. It will automatically state movie belongs to a watchlist but the watchlist doesn’t know that it has many movies so I still have to add it to the model. I found out later if you use watchlist:references option to generate the relation between these models, you can’t delete the parent instance if any children instances have its association. Finally, I add a serializer gem in gemfile and generate corresponding serializers to nicely format the backend data. Actually, if you’re not displaying the API page directly to users this step isn’t that necessary.
Three pillars
It’s on when we made it to the front end. This is the core of this project. What we do is repeatedly manipulate the DOM, add the appropriate event to the right DOM, and communicate with the server when the time is right.
Let’s walk this through with our index.js file.
First, we find the DOM which is a Document Object Model. Assign it to a const container, we set this DOM’s innerHTML property to a huge string which this helper returns. So now we’ve already successfully found and manipulated the DOM. The page would render some HTML code for us to use the next method to attach our data. In the fetchWatchList method, it will fetch from our rails API, this is where we communicate with the server. After getting back the data we need we continue to find the DOM, append or remove the DOM or add an event listener to that DOM so it could have some interactions with the user.
Like this, we’re adding a submit event listener to this form. When we submit we want the backend to create a new watchlist with the user’s input. So we prevent the default refreshing from happening and get the input out of the form, make another communication with our server using a post method and pass the input in our request body and then do something about the data we get back from the backend, generate a new DOM with the info we need from backend then append it to the right place.
Just like that we create, read, update and delete data in the backend, and in the meantime, we are going to demonstrate these actions on the page. Not hard, however, definitely not easy.
Rewrite with OOJS
You might’ve seen the WatchList.postList or HelperTool.watchListForm() above. these methods called on the big camel case are static methods. Just like the Java static method is called on the class name but not a certain object. Base on this feature we could write some tool classes and easily access them just like that build-in Math class. In the class, we could also write the constructor, getter, and setter methods just like Java. This part is probably the most fun I have had in this project. Refactoring into object-oriented javascript and abstracting into tool methods.
The End
Thanks for reading!
