KEMBAR78
Why Would A Programmer Fall In Love With SPA? | PDF
Why would a programmer
fall in love with SPA?
Creating Single Page Applications with Rails && Ember.js
Created by / fromMaria Stokłosa @mariastoklosa netguru.co
Idea of Single Page
Applications
Single Page Applications allow to redraw any part of the
website without additional server requests to get the HTML
code.
Traditional page lifecycle
CLIENT creates an initial request
Traditional page lifecycle
SERVER responds with HTML code
Traditional page lifecycle
CLIENT creates HTTP request
Traditional page lifecycle
SERVER responds with HTML code
Traditional page lifecycle
Website reloads
SPA page lifecycle
CLIENT creates an initial request
SPA page lifecycle
SERVER responds with HTML code
SPA page lifecycle
CLIENT creates an AJAX request
SPA page lifecycle
SERVER responds with JSON
SPA page lifecycle
Website does not reload! :))))))
SPA websites - pros
Better from the UX point of view
Mobile preferred
Provide separation of client and server responsibilities
Complete control of the loading experience because of
AJAX calls
SPA websites - cons
Client has to have JavaScript enabled
Good SPA apps are hard to develop
Unnatural URLs (fragment identifiers)
Indexing a website may be complicated
How to create a SPA
application?
Ember.js
AngularJS
Meteor
Backbone.js
How to choose a proper
framework?
Routing
Templating
Testability
Browser compatibility
API integrations
Why Ember.js?
Ember is now fast (isemberfastyet.com)
Using MVC framework has many benefits
Getting 15 jQuery plugins to work together might be
problematic
Binding templates to variables is cool
Is Ember.js better than
AngularJS?
NO
Creating SPA websites
won't fix your poor
UX/design problems
Ways to use Ember with
Rails
2 separate applications
Ember.js embedded in Rails application
How to start?
Include in your Gemfile && run bundle install
gem 'ember-cli-rails'
Use generator to guide you
rails generate ember-cli:init
Hook ember app to your
page
EmberCLI.configure do |config|
config.app :enrollment, path: 'app/ember/frontend'
config.app :admin #=> path will be app/admin
end
= include_ember_script_tags :enrollment
Mount EmberCLI test
engine in config/routes.rb
mount EmberCLI::Engine => "ember-tests", if: -> { Rails.env.development? }
Add root element to
config/environment.js
APP: {
rootElement: '.enrollment'
}
Create a rake task for
running ember tests
task default: 'ember:test'
THE END - Q & A
-
-
Ember.js documentation
Ember-cli-rails

Why Would A Programmer Fall In Love With SPA?