Tying it Together(Full-Stack)

Filipp Minayev
4 min readMar 15, 2021

My project idea was to give tech companies a better organization tool to help with projects. Starting with the front end this is the file structure i utilized:

Models: like the name implies, is where my models are located. For this SPA i only needed a project model that would handle the project and the team lead. Inside the project.js, the structure looks very similar to the way we write our Ruby classes. To create an object in javascript we use whats known as a construction function. Think of it like a “blueprint” for creating many objects, kinda like the way initialize works with Ruby objects, only this time instead of the word self, JavaScript has a similar word this . In JavaScript, the thing called this is the object that “owns” the code.

Services: This is where I put all of my “crud” functions to communicate with my Rails API.

By creating a static baseUrl and headers, i am able to keep my code as DRY as i can, making it look prettier and easy to read. Static functions are class methods, meaning they are used for functionality that belongs to the class as a whole and cant be called on one instance of that class.

Global.js: Is a small file but very important. This is where all of the magic starts.

Storing these elements in a constance insure that it will not get resigned and ultimately breaking something on the page. Creating elements like inputs and forms and being able to give them specific id’s makes it more easier to create and use event listeners and functions. For example:

In this code snippet, i created a function that would take the form link element and added a click event to it that would in turn render the project form so a user can fill in that information. Key note events have certain default behaviors. In this case, clicking on a href link will cause the page to redirect to that link. By specifically telling the function to prevent it from doing that, Im able to render the project from without having to redirect ultimately saving time and improving user experience.

Index.html: This is where it all comes together. The files get scripted in to work together in giving the user a uniformed experience through the webapp.

Diving deeper into the code, there is an asynchronies function called fetch. Fetch is what i used to be able to communicate between my front and back end. When using fetch, it returns a promise or an object representing the completion or failure of the async operation. If the fetch was a success a .then can be used to turn that promise( or response) into a readable json(JavaScript Object Notation) and then be able to be used to create an object. Fetch is used to both retrieve data from the api (read) and also be able to post, patch, or delete(create, update, destroy) to the api.

Setting up my Rails API backend couldn't be easier. Running rails new "project name" --api gets rails to setup in api mode. Then using rails g scaffold "model name" gets everything setup and i mean everything. All of your controllers, models, and migration are there and ready to go. All thats left to do would be to add associations between your models. And you don’t have to worry about your views because your “views” are taken care of with JavaScript.

--

--