star-wars-planets

Web Component using Custom Element, Shadow DOM, fetch, async/await, and the Star Wars API

Github Pages Demo at https://richard-flosi.github.io/star-wars-planets/index.html

Hackathon 2018

Project Name:

Web Components

Team Members:

• Richard Flosi
• Erik Harper

Abstract:

Technologies for developing in the web browser are constantly in flux. Almost every day a new JavaScript framework is introduced that attempts to corner the mindshare market, but leaves the web development community in a constant state of fatigue researching the best way to build their web application. The Web Components specification and its related features such as Custom Elements, Shadow DOM and ES6 Template Literals are an attempt by major browser vendors like Chrome to define a new way forward with building functionality in the browser through a component model made popular by libraries like React. The hope is that using Web Components will make code built for the web closer to the platform and thus less likely to break in the future. Consider adopting Web Components technology to make the code you write closer to the web platform and less dependent on third party libraries and tools like React that constantly have to be upgraded to keep pace with progress. The goal of this project is build a concept app with the vanilla Web Components API using as few dependencies as possible that allow us to manage state, passing immutable props down a tree of components and triggering DOM updates based on state and prop changes. To do this we leveraged an existing Star Wars API to get a list of Star Wars Planets using the Fetch API which are then presented in a paginated list use Custom Elements. Take at look at index.html.