Upload
netguru
View
781
Download
1
Tags:
Embed Size (px)
Citation preview
Why would a programmerfall in love with SPA?
Creating Single Page Applications with Rails && Ember.jsCreated by / from Maria Stokłosa @mariastoklosa netguru.co
Idea of Single PageApplications
Single Page Applications allow to redraw any part of thewebsite without additional server requests to get the HTML
code.
Traditional page lifecycleCLIENT creates an initial request
Traditional page lifecycleSERVER responds with HTML code
Traditional page lifecycleCLIENT creates HTTP request
Traditional page lifecycleSERVER responds with HTML code
Traditional page lifecycleWebsite reloads
SPA page lifecycleCLIENT creates an initial request
SPA page lifecycleSERVER responds with HTML code
SPA page lifecycleCLIENT creates an AJAX request
SPA page lifecycleSERVER responds with JSON
SPA page lifecycleWebsite does not reload! :))))))
SPA websites - prosBetter from the UX point of view
Mobile preferred
Provide separation of client and server responsibilities
Complete control of the loading experience because ofAJAX calls
SPA websites - consClient 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 SPAapplication?
Ember.js
AngularJS
Meteor
Backbone.js
How to choose a properframework?
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 beproblematic
Binding templates to variables is cool
Is Ember.js better thanAngularJS?
NO
Creating SPA websiteswon't fix your poor
UX/design problems
Ways to use Ember withRails
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 yourails generate ember-cli:init
Hook ember app to yourpage
EmberCLI.configure do |config| config.app :enrollment, path: 'app/ember/frontend' config.app :admin #=> path will be app/adminend
= include_ember_script_tags :enrollment
Mount EmberCLI testengine in config/routes.rbmount EmberCLI::Engine => "ember-tests", if: -> { Rails.env.development? }
Add root element toconfig/environment.js
APP: { rootElement: '.enrollment'}
Create a rake task forrunning ember tests
task default: 'ember:test'
THE END - Q & A- -
Ember.js documentationEmber-cli-rails