heroes-angularTour of Heroes app written with Angular

联合创作 · 2023-09-21 07:01

Tour of Heroes

This project was created to help represent a fundamental app written with Angular. The heroes and villains theme is used throughout the app.

by John Papa

Comparative apps can be found here with Svelte, React, and Vue

Why

I love JavaScript and the Web! One of the most common questions I hear is "which framework is best?". I like to flip this around and ask you "which is best for you?". The best way to know this is to try it for yourself. I'll follow up with some articles on my experiences with these frameworks but in the meantime, please try it for yourself to gain your own experience with each.

Live Demos

Hosted in Azure

Tour of Heroes with Angular
Tour of Heroes with React
Tour of Heroes with Svelte - coming soon!
Tour of Heroes with Vue

Getting Started

Clone this repository

git clone https://github.com/johnpapa/heroes-angular.git
cd heroes-angular

Install the npm packages
```
npm install
```
Run the app!
```
npm run quick
```

Cypress Tests

You can execute all of the UI tests by running the following steps
```
npm run cypress
```

What's in the App

Each of these apps contain:

Each of the apps written in the various frameworks/libraries has been designed to have similar features. While consistency is key, I want these apps to be comparable, yet done in an way authentic to each respective framework.

Each project represents heroes and villains. The user can list them and edit them.

Here is a list of those features:

Why Cypress?

Cypress.io makes it easy to run all three apps simultaneously in end to end tests, so you can watch the results while developing.

Why abstracted CSS?

The goal of the project was to show how each framework can be designed to create the same app. Each uses their own specific techniques in a way that is tuned to each framework. However the one caveat I wanted to achieve was to make sure all of them look the same. While I could have used specific styling for each with scoped and styled components, I chose to create a single global styles file that they all share. This allowed me to provide the same look and feel, run the same cypress tests, and focus more on the HTML and JavaScript/TypeScript.

Why JSON Server?

The app uses a JSON server for a backend by default. This allows you to run the code without needing any database engines or cloud accounts. Enjoy!

Problems or Suggestions

Open an issue here

Thank You

Thank you to Sarah Drasner, Brian Holt, Chris Noring, Craig Shoemaker, and Ward Bell for providing input and reviewing the code in some of the repos for the Angular, React, Svelte, and Vue apps: