Slide 1

Slide 1 text

Rails Dev’s Intro to Ember

Slide 2

Slide 2 text

Who the heck is this guy? ● Ember Core Team ● General Open Source Addict ● Twitch twitter: rwjblue github: rwjblue

Slide 3

Slide 3 text

Thank You!!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ACR’s Past https://youtu.be/2aYdtS7FZJA

Slide 6

Slide 6 text

ACR’s Past

Slide 7

Slide 7 text

ACR - 2016

Slide 8

Slide 8 text

ACR - 2016

Slide 9

Slide 9 text

ACR - 2016

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Some History…. ● Visual Studio: 1998 - 2006 ● Ruby/Rails: 2006 - 2014 ● Ember: 2014 - Now

Slide 13

Slide 13 text

Single Page Applications

Slide 14

Slide 14 text

Single Page Applications ● "Application" feel ● Snappy interactions ● User Experience

Slide 15

Slide 15 text

Single Page Applications ● Easier state management ● No more jQuery soup ● JavaScript "sprinkles"

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Rails Development UX

Slide 22

Slide 22 text

Rails Development gem install rails rails new acr16 cd acr16 rails s

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Rails Development bin/rails generate controller welcome index # add to config/routes.rb root 'welcome#index' # add to app/views/welcome/index.html.erb Welcome

Slide 25

Slide 25 text

Rails Development

Slide 26

Slide 26 text

Rails Development % bin/rails test Finished in 0.194783s, 5.1339 runs/s, 5.1339 assertions/s. 1 runs, 1 assertions, 0 failures, 0 errors, 0 skips

Slide 27

Slide 27 text

Javascript Development

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

JavaScript console.log(typeof null); // object console.log(NaN === NaN); // false console.log([] + []); // "" console.log({} + []); // 0 console.log(typeof NaN); // number let a = new Date(2016, 1, 1); let b = new Date(2016, 1, 1); console.log(a === b) // false https://www.destroyallsoftware.com/talks/wat

Slide 30

Slide 30 text

https://www.destroyallsoftware.com/talks/wat

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

(╯°□°)╯︵

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Ember Development UX

Slide 38

Slide 38 text

Ember Development npm install -g ember-cli ember new acr16 cd acr16 ember s

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Ember Development % ember generate template application # add to app/templates/application.hbs Welcome!

Slide 41

Slide 41 text

Ember Development % ember test 1..8 # tests 8 # pass 8 # skip 0 # fail 0 # ok

Slide 42

Slide 42 text

Ember Development

Slide 43

Slide 43 text

Rails Development gem install rails rails new acr16 cd acr16 rails s

Slide 44

Slide 44 text

Ember Development npm install -g ember-cli ember new acr16 cd acr16 ember s

Slide 45

Slide 45 text

Rails Development bin/rails generate controller welcome index # add to config/routes.rb root 'welcome#index' # add to app/views/welcome/index.html.erb Welcome

Slide 46

Slide 46 text

Ember Development % ember generate template application # add to app/templates/application.hbs Welcome!

Slide 47

Slide 47 text

Ember Basics

Slide 48

Slide 48 text

Ember Basics ● Router ● Route ● Template ● Component

Slide 49

Slide 49 text

Ember Basics - Router

Slide 50

Slide 50 text

Ember Basics - Route

Slide 51

Slide 51 text

Ember Basics - Template

Slide 52

Slide 52 text

Ember Basics - Component

Slide 53

Slide 53 text

So What!? Make it go!

Slide 54

Slide 54 text

Tools

Slide 55

Slide 55 text

Tools

Slide 56

Slide 56 text

Tools

Slide 57

Slide 57 text

Silly Demo % gem install rails --pre % rails new acr16-rails-api --skip-turbolinks --api

Slide 58

Slide 58 text

Silly Demo # edit Gemfile # uncomment: gem 'jbuilder' # add gem 'ember-cli-rails'

Slide 59

Slide 59 text

Silly Demo % bin/rails generate ember:init % npm install -g ember-cli % ember new frontend --skip-git % cd frontend % ember install ember-cli-rails-addon

Slide 60

Slide 60 text

Silly Demo # edit app/controllers/application_controller.rb # # not needed after: # github.com/thoughtbot/ember-cli-rails/pull/400 class ApplicationController < ActionController::Base end

Slide 61

Slide 61 text

Silly Demo # config/routes.rb Rails.application.routes.draw do mount_ember_app :frontend, to: "/" end

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Silly Demo % bin/rails s % open http://localhost:3000

Slide 64

Slide 64 text

Silly Demo % cd frontend % ember generate template application % echo "

Hello, Ancient City Ruby!

" > \ app/templates/application.hbs

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

What’s Next ● Testing! ● Testing! ● Testing!

Slide 67

Slide 67 text

Cucumber Test

Slide 68

Slide 68 text

Ember Acceptance Test

Slide 69

Slide 69 text

Resources

Slide 70

Slide 70 text

Resources - Websites ● https://guides.emberjs.com/v2.4.0/ ● http://emberjs.com/api/

Slide 71

Slide 71 text

Resources - Podcasts ● http://ember.land/ ● https://emberweekend.com/

Slide 72

Slide 72 text

Resources - Open Source ● https://github.com/TryGhost/Ghost ● https://github.com/travis-ci/travis-web

Slide 73

Slide 73 text

The End