Code Monkey home page Code Monkey logo

ember-rails-devise-demo's Introduction

Ember Rails Devise Demo

This app is working example of using Ember with Rails and Devise.

The running app can be viewed at: http://emrailsdevise.herokuapp.com/

For a more full-featured Ember example app using Ember, Rails and Devise, see Crambear, an Ember flashcards app.

Features

  • User Login and Registration using Devise
  • Illustrates basic usages of Ember components like routes, controllers, and templates.

Ember Version

Currently runs on Ember.js 1.0

Getting Started

To run the app:

(clone or fork the project)
$ bundle install
$ bundle exec rake db:create
$ bundle exec rake db:migrate
$ bundle exec rake db:seed            #will create a test user, or just register a new one from the app
$ export ERD_SECRET_KEY_BASE='generate-a-secret-key'   #used in initializers/config/secret_token.rb
$ rails server

Basic Architecture of an Ember App

In traditional Rails apps, pretty much every user click results in an HTTP request. The server processes the request, and generate an HTML page, which it returns to the client. This happens even for tasks the client has the data to handle, such as sorting a list on the page.

To improve responsiveness, Web 2.0 moves responsibility to the client using Javascript and libraries such as JQuery. Rails 4 has also moved in this direction with Turbolinks. But these more complex clients no longer can rely on the server framework Rails did so well. Hence the need for comprehensive client-side frameworks such as Ember.

In the Ember/Rails world, Ember handles client interactions and page display. Rails may serve the initial page, as done here (also can be done by an HTTP server like nginx). Then it waits for AJAX requests and responds with JSON, often using a gem such as Active Model Serializers.

Under this architecture, the Rails components which pertain directly with the client are:

  1. a bare-bones layout (views/layouts/application.html) which includes the Ember client and css
  2. a blank root page (here view/home/index)
  3. a root controller (here HomeController)
  4. routes defined in routes.rb
  5. serializers, here using the active_model_serializer gem for packaging (in the app/serializers directory)

Devise with AJAX

When using Devise with AJAX you must add:

respond_to :html, :json

to the appropriate Rails controller(s). In this app, its been added to ApplicationController. More here.

The Devise AJAX calls are in the AuthController in javascripts/controllers/controllers.js.coffee

Tests

###Capybara Tests###

There are a couple of capybara-webkit tests up. The first tests a registration-logout-login cycle. Was going to separate these out, but the standalone login test doesn't work for some reason (even though works in development). Appreciate if anyone can figure this out.

###Konacha Tests###

Konacha is a Rails engine that allows you to test your JavaScript with the Mocha test framework and chai assertion library.

The tests here are for reference to show how to set up Konacha and far from comprehensive.

Setup is easy:

  1. Add the gem to your gemfile (and run bundle install)
  2. Write some tests
  3. Run the task: bundle exec rake konacha:serve. This will startup up a server running, by default" on port 3500.
  4. Go to localhost:3500 to see test results

See the Konacha github page for detailed info.

To Do

Most immediately, validations and tests are sparse. Plan to add features as time goes by.

Other Ember.js/Rails Resources

Demos and Learning Resources

The official guides:

The following is useful and fairly up to date (RC6 as of end Aug 2013):

Add-ons

Think HTML/Handlebars too verbose? Alex Matchneer is developing a Slim-like templating solution:

###License Copyright 2013 Michael Madrid under the MIT License

ember-rails-devise-demo's People

Contributors

dylan-conlin avatar goern avatar kagemusha avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.