Star Wars Space Directory Integrating API’s in JavaScript Frameworks

JavaScript frameworks are very popular and many people can’t live without them. Frameworks are pre-built code that handles a lot of the tedious code like working with the DOM or making websites into single page application. I wanted to learn more about these frameworks so I made a simple single page application using React.JS and Vue.JS. I also integrated an API for the content of the application. Both of these frameworks work differently under the hood but they accomplish the same results.

Web Tools React/Redux & Vue/Vuex

I made the exact same single page application using React.JS and Vue.JS. I used Redux with React and Vuex with Vue. This helped with managing state for the whole app. Overall I enjoyed using Vue more than React. With React, most of my time was spent setting it up and linking everything together, on the other hand, Vue automatically did the set up and I spent most of the time coding. This makes sense since React is not a real framework. React is a JavaScript Library which means it is a useful tool for working with single page applications but it lacks many features like routing.

Web Tools Star Wars API

I learned about the Star Wars API a while back. This felt like a good opportunity to use the API with React and Vue since the Star Wars API is a read only API which means I can only retrieve data from the API. The API provided all the content for the app. Using state management I loaded the data once the app loaded. The data was then stored as an object. This would allow me to use the data without making additional requests. The content I needed wasn’t much so this seemed like a good approach. For a bigger application I would probably only load the data I need at the moment or load the data in chunks.

Process Creating Pages and Router

In order to make the app feel like a multi-page website I had to use a router. Vue already has a built-in router system; however, React doesn’t and I had to get a third party React Router. The app has a few pages. The home page display Star Wars categories: starships, planets, and films. There is a page for each category. The page displays a list of all the items in that category. By clicking on an item more details on the item display without requesting another page from the server.

Process Linking the Content

Creating the pages and working with the API was easier than I thought. I can see now why many developers are using React or Vue. I decided to take another step and challenge myself. All the pages were independent. I found a way to link the content together. At first I didn’t know how to do it. The process was simple since I already had the data I needed and it was all stored in objects. By combing the objects I was able to link the content together. For example when viewing the details on a film, you can see the planets featured on the film and now you can see the planet details from the film page.

Going Forward New Features

This is a simple app. The app doesn’t do much it just displays data. Many features can be added to improve the app. I would add an authentication feature allowing users to create their own accounts. This would make it possible to let users favorite various items from each category.

Conclusion In Closing

This was a fun side project where I learned about how each framework functions and behaves. I learned how each of the frameworks handles state. I enjoyed working with React and Vue but I would prefer to use Vue because it has many built-in features. I was able to create the same app using React and Vue. The app looks identical on both frameworks. In my opinion, one is not better than the other, it is mostly preference. They both work differently but the results are the same.