+ - 0:00:00
Notes for current slide
Notes for next slide

Front-End | Face-Off


Presented By

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



angular logo react logo ember logo javascript logo

1 / 41

Agenda

2 / 41

Agenda

(1) Overview
  1. About Us
  2. Objectives
  3. Project Overview
3 / 41

Agenda

(1) Overview
  1. About Us
  2. Objectives
  3. Project Overview
(2) Walkthroughs
  1. Ember
  2. Angular
  3. React
  4. Vanilla JS
4 / 41

Agenda

(1) Overview
  1. About Us
  2. Objectives
  3. Project Overview
(2) Walkthroughs
  1. Ember
  2. Angular
  3. React
  4. Vanilla JS
(3) Goodbye ✌️
  1. Next Steps
  2. Questions
5 / 41

About Us (1)

6 / 41

About Us (1)

$ whoami
Kyle.Coberly
7 / 41

About Us (1)

$ whoami
Kyle.Coberly

kyle coberly headshot

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

ember logo

8 / 41

About Us (2)

9 / 41

About Us (2)

$ whoami
Brooks.Patton
10 / 41

About Us (2)

$ whoami
Brooks.Patton

brooks patton headshot

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

react logo

11 / 41

About Us (3)

12 / 41

About Us (3)

$ whoami
CJ.Reynolds
13 / 41

About Us (3)

$ whoami
CJ.Reynolds

cj reynolds headshot

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

javascript logo

14 / 41

About Us (4)

15 / 41

About Us (4)

$ whoami
Michael.Herman
16 / 41

About Us (4)

$ whoami
Michael.Herman

michael herman headshot

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,

angular logo

17 / 41

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
  2. Discuss the basic building blocks and paradigms from each of the respective frameworks and vanilla JS
  3. Compare and contrast each of the frameworks and vanilla JS
  4. Answer the question - Which framework should I use?
18 / 41

Project Overview

19 / 41

Project Overview

API

  1. barkwire-api.herokuapp.com/dogs
  2. 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.
  2. 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.
21 / 41

Project Overview

API

  1. barkwire-api.herokuapp.com/dogs
  2. 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.
  2. 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

22 / 41

Project Overview

API

  1. barkwire-api.herokuapp.com/dogs
  2. 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.
  2. 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

Example

barkwire

23 / 41

angular logo

25 / 41

Angular (1)

26 / 41

Angular (1)

(1) Angular 4?

27 / 41

Angular (1)

(1) Angular 4?

(2) Setup with the Angular CLI

28 / 41

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.

29 / 41

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
30 / 41

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

  2. Create a Component

31 / 41

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

  2. Create a Component

  3. Configure Routing

32 / 41

Angular (2)

33 / 41

Angular (2)

(4) Sanity Check

34 / 41

Angular (2)

(4) Sanity Check

(5) Add Some Style

35 / 41

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.

36 / 41

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

37 / 41

Questions?

40 / 41

Questions?

Well...

41 / 41

Agenda

2 / 41
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow