Ember with Rails: From Development to Deployment

Slide 1

Slide 1 text

Ember.js with Rails: From Development  To Deployment Luke Melia Chicago Ember.js April 24th, 2014 1

Slide 2

Slide 2 text

About this Embereño 2

Slide 3

Slide 3 text

Overview of this talk ★ Walkthrough an Ember + Rails App ★ Compare and Contrast ★ Development Tools ★ API ★ Deployment Approaches ★ Common Questions 3

Slide 4

Slide 4 text

Walkthrough an Ember+Rails app 4

Slide 5

Slide 5 text

Compare & Contrast 5

Slide 6

Slide 6 text

6 Server Browser The Roles of Ember & Rails RESTful API endpoints (JSON) User interface & user interactions

Slide 7

Slide 7 text

7 Diﬀerences in Development Mindsets Request / response-based Long-lived state Lifetime of state measured in milliseconds Lifetime of state measured in minutes

Slide 8

Slide 8 text

8 Diﬀerences in Development Mindsets MVC with a router MVC with a router Sounds the same,  but they are not.    Do not plan on  applying your  Rails MVC  vocabulary to  Ember. ≠

Slide 9

Slide 9 text

9 Data Flow in Rails Browser Controller View (Template) Router Model Controller updates / queries models Sends HTML to Browser for to use to create DOM Sends requests via HTTP Generates HTML

Slide 10

Slide 10 text

10 Router Controller Controller View View Template Model Model Model Model Data ﬂows down from models via bindings Events ﬂow up from view layer to the router Router updates models & controllers based on events Data Flow in Ember

Slide 11

Slide 11 text

11 Ember Takes Inspiration From Rails ★ Convention over conﬁguration ★ “Look at all the code I’m not writing!” ★ Internal DSLs for expressiveness ★ An engaged, vibrant community

Slide 12

Slide 12 text

12 Ember Takes Inspiration From Ruby ★ A focus on developer happiness ★ Object model: classical inheritance,  mix-ins, class reopening

Slide 13

Slide 13 text

13 Ember & Rails Share a @wycats

Slide 14

Slide 14 text

Development Tools 14

Slide 15

Slide 15 text

Development Tools 15 ★ asset pipeline ★ ember-rails ★ ember-appkit-rails ★ …or, develop separate from your Rails app

Slide 16

Slide 16 text

Development Tools: Asset Pipeline 16 ★ Manage Javascript ﬁles yourself ★ Embed Handlebars templates in HTML and let Ember parse them at runtime

Slide 17

Slide 17 text

Development Tools: Ember Rails 17 ★ Oﬃcial interop supported by Ember Core ★ Generators ★ Template pre-compilation

Slide 18

Slide 18 text

Development Tools: Ember AppKit Rails 18 ★ Based on ember-appkit, from my colleague Stefan Penner, which uses ES6 modules and a custom resolver ★ Used by Tilde & Dockyard ★ Future uncertain

Slide 19

Slide 19 text

Development Tools: Separate From Rails 19 ★ Separate repo for your Ember app from your Rails app. Proxy in development. ★ Use any build tools, including grunt, gulp, brunch, or broccoli. ★ ember-cli is likely to be the future, still a work-in-progress

Slide 20

Slide 20 text

Development Tools: Separate From Rails (cont.) 20 ★ Many JS build tools have option to proxy. Set it up to send /api traﬃc to Rails. ★ Or, run nginx locally and set up proxy rules accordingly.

Slide 21

Slide 21 text

Development Tools: Tips 21 ★ Development vs. Production builds of Ember ★ Ember Inspector extension for Chrome & Firefox ★ Learn the Chrome Dev Tools. Better.

Slide 22

Slide 22 text

Implementing Your API with Rails 22

Slide 23

Slide 23 text

Analogy to Traditional Rails Data Flow ★ In traditional Rails apps, controllers make instance variables available to be rendered using ERB ★ In a Ember+Rails app, controllers instead serialize these “instance variables” into JSON and make it available to Ember to render 23

Slide 24

Slide 24 text

Options for API rendering ★ ERB ★ JBuilder ★ RABL ★ Active Model Serializers 24

Slide 25

Slide 25 text

Options for API rendering: ERB 25

Slide 26

Slide 26 text

Options for API rendering: JBuilder 26 https://github.com/rails/jbuilder

Slide 27

Slide 27 text

Options for API rendering: RABL 27 https://github.com/nesquena/rabl

Slide 28

Slide 28 text

Options for API rendering:  Active Model Serializers 28 https://github.com/rails-api/active_model_serializers

Slide 29

Slide 29 text

Options for API rendering ★ ERB ★ JBuilder ★ RABL ★ Active Model Serializers: Recommended 29

Slide 30

Slide 30 text

CORS ★ It will be much easier to work with your API if your Ember app is served oﬀ the same domain as your Rails app is ★ If you must cross domains, check out the rack- cors gem. 30 https://github.com/cyu/rack-cors

Slide 31

Slide 31 text

Deployment Approaches 31

Slide 32

Slide 32 text

Two Options for Deployment ★ Deploy with your Rails app ★ Simple, but slow ! ★ Deploy independently ★ Fast, but more complex 32

Slide 33

Slide 33 text

33 Simple, but Ember apps changes are as slow to deploy as Rails app changes Rails server Dev or CI API requests dynamic Rails pages HTML for JS App JS for JS App CSS, Images for JS App AWS Cloudfront Deploy Rails  app code, HTML,  JS, CSS, images

Slide 34

Slide 34 text

34 More complex, but fast to deploy Static assets server (AWS S3) Rails server Dev or CI Deploy  JS, CSS, images (additive) API requests dynamic Rails pages HTML for JS App JS for JS App CSS, Images for JS App Deploy HTML AWS Cloudfront Deploy Rails  app code https://speakerdeck.com/lukemelia/lightning-fast-deployment-of-your-rails-backed-javascript-app

Slide 35

Slide 35 text

Common Questions 35

Slide 36

Slide 36 text

“If I have MVC on the server and MVC on the client, am I doing double the work?” 36

Slide 37

Slide 37 text

“If I have MVC on the server and MVC on the client, am I doing double the work?” (cont.) 37 ★ As Andre Malan said, “Your front end is not your back end” ★ Your Rails and Ember apps have separate responsibilities. Duplicated work on client and server is unusual.

Slide 38

Slide 38 text

“What is the diﬀerence between a Rails controller and an Ember controller?” 38 ★ A Rails controller is responsible for doing some queries or work and initiating the rendering of JSON or HTML ★ An Ember controller is more akin to a “view model” or “presenter” in Rails land. It is responsible for presenting bindable data to templates for rendering by proxying models and maintaining non-model state and computed properties.

Slide 39

Slide 39 text

“Should I match my Ember routes to my Rails routes?” 39 ★ No. ★ Rails routes are typically based on REST principles. ★ Ember routes map to the URLs a users sees as they move through the app and are nested to match the nested structure of the UI.

Slide 40

Slide 40 text

“How do I implement authentication with Ember?” 40 ★ Simplest: Separate log-in page. Standard Rails cookie-based auth. (Must be on same domain.) ★ More complicated: Token-based authentication. Login with username / password, receive bearer token. Send bearer token in Authorization header with all API requests.

Slide 41

Slide 41 text

“How do I implement authentication with Ember?” (continued) 41 ★ Most Ember apps have a UserController or MeController to allow routes and other controllers access to information about the current user. https://github.com/simplabs/ember-simple-auth

Slide 42

Slide 42 text

“How do I implement authentication with Ember?” (continued) 42 ★ Tips ★ Consider ember-simple-auth, plus ember- simple-auth-devise. ★ Use HTTPS. https://github.com/simplabs/ember-simple-auth

Slide 43

Slide 43 text

Stefan Penner, Kris Selden, Ray Cohen & me 43 Yapp Labs ! Ember.js Consulting & Training

Slide 44

Slide 44 text

Q&A Creative Commons photo credits: None 44 Follow me @lukemelia