Tour of Heroes app written with Angular
Switch branches/tags
Nothing to show
Clone or download
Latest commit c2cb179 Dec 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cypress maddie Nov 8, 2018
e2e initial commit Nov 1, 2018
src about page Dec 5, 2018
.dockerignore Server (#2) Nov 15, 2018
.editorconfig initial commit Nov 1, 2018
.gitignore Server (#2) Nov 15, 2018
Dockerfile Server (#2) Nov 15, 2018
README.md readme updates Nov 15, 2018
angular.json init Nov 2, 2018
cypress.json fixed cypress and app Nov 2, 2018
db.js maddie Nov 8, 2018
db.json added npm run e2e Nov 17, 2018
docker-compose.debug.yml Server (#2) Nov 15, 2018
docker-compose.yml Server (#2) Nov 15, 2018
package-lock.json ng 7.1 Dec 3, 2018
package.json ng 7.1 Dec 3, 2018
proxy.conf.json json server fix Nov 15, 2018
routes.json init Nov 2, 2018
server.js Server (#2) Nov 15, 2018
tsconfig.json ng 7.1 Dec 3, 2018
tslint.json initial commit Nov 1, 2018

README.md

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 written with Vue and React can be found at at github.com/johnpapa/heroes-vue and github.com/johnpapa/heroes-react

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

Getting Started

  1. Clone this repository

    git clone https://github.com/johnpapa/heroes-angular.git
    cd heroes-angular
  2. Install the npm packages

    npm install
  3. Run the app!

    npm run quick

Cypress Tests

  1. 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:

  • routing
  • lazy loading
  • container/presenter components
  • redux state management pattern
  • The same CSS

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!

Why Docker?

You can host the app any way you prefer. I chose Docker because it is familiar to me and makes it easy to run anywhere (local or cloud). You do you though and feel free to run this in yur own way.

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 the three repos for the Angular, React, and Vue apps:

Resources