Front-End Face-Off - Angular vs React vs Ember

# Front-End | Face-Off

**Presented By**

*Kyle Coberly* (Ember) 
*Michael Herman* (Angular) 
*Brooks Patton* (React) 
*CJ Reynolds* (Vanilla JS)

---

### Agenda

##### (1) Overview

1. About Us
1. Objectives
1. Project Overview

##### (2) Walkthroughs

1. Ember
1. Angular
1. React
1. Vanilla JS

##### (3) Goodbye ✌️

1. Next Steps
1. Questions

---

## About Us (1)

```
$ whoami
Kyle.Coberly
```

*Faculty Director* at Galvanize

Kyle is a web app developer, business dork, and amateur economist. A lifelong educator, he has taught such varied things as web development, 7th grade band, guitar, ballroom dance, sharpshooting, and canoeing. In a previous life, Kyle was a professional musician and audio engineer.

*Specialties*: Ember.js, Databases, Agile, Design, Node.js

---

## About Us (2)

```
$ whoami
Brooks.Patton
```

*Lead Instructor* at Galvanize

Brooks is a Web Developer with over ten years of IT experience, including his work as a contractor at the NASA Advanced Supercomputing center. He has since taken those skills to make web applications, games, and automating the boring things in his life.

*Specialties*: Back End, Game Creation, Debugging, Docker

---

## About Us (3)

```
$ whoami
CJ.Reynolds
```

*Lead Instructor* at Galvanize

CJ is an Instructor, Full Stack Developer, Hardware Tinkerer and Technologist. He's worn many hats including Software Engineer, Help Desk Analyst, System Administrator and Quality Assurance Analyst. CJ has a passion for sharing knowledge, writing clean self documenting code and building elegantly structured apps that scale.

*Specialties*: AngularJS, Computer Science, APIs, Security

---

## About Us (4)

```
$ whoami
Michael.Herman
```

*Senior Software Engineer* at Galvanize

Michael is a software engineer and educator. He is the co-founder/author of Real Python. Besides development, he enjoys building financial models, tech writing, content marketing, and listening to Radiohead.

*Specialties*: Node.js, Docker, TDD, APIs,

---

## Objectives

By the end of this talk, you should be able to:

1. Create a CRUD front-end based on Ember, Angular 4, React, and vanilla JS to interact with a RESTful back-end
1. Discuss the basic building blocks and paradigms from each of the respective frameworks and vanilla JS
1. Compare and contrast each of the frameworks and vanilla JS
1. Answer the question - **Which framework should I use?**

---

## Project Overview

#### API

1. [barkwire-api.herokuapp.com/dogs](https://barkwire-api.herokuapp.com/dogs)
2. [barkwire-api.herokuapp.com/dogs/1](https://barkwire-api.herokuapp.com/dogs/1)

#### User Stories

1. `As a lonely dog, I want to see a list of all of the dogs that are available so that I can see my dating options.`
1. `As a lonely dog, I want to be able to link to a specific dog so that I can share my favorite dogs with my friends.`

#### Styles

We're all using the same stylesheet - [sample-styles.css](sample-styles.css)

#### Example

---

http://slides.com/kylecoberly/isn-t-ember-dead#/

---

---

## Angular (1)

### (1) Angular 4?

### (2) Setup with the Angular CLI

### (3) All Dogs

`As a lonely dog, I want to see a list of all of the dogs that are available so that I can see my dating options.`

1. Define a Service

1. Create a Component

1. Configure Routing

---

## Angular (2)

### (4) Sanity Check

### (5) Add Some Style

## (6) Single Dog

`As a lonely dog, I want to be able to link to a specific dog so that I can share my favorite dogs with my friends.`

Your turn!

### (7) Summary

---

https://github.com/BrooksPatton/barkwire-react-fe

---

https://github.com/w3cj/front-end-face-off-vanilla-js

---

### Questions?

Well...