Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Why Would A Programmer Fall In Love With SPA?

1,711 views

Published on

Creating Single Page Applications with Rails & Ember.js. Slides by Maria Stokłosa, Ruby on Rails Developer at @netguru for StartUp Lab #2 || Ruby on Rails.

Published in: Technology
  • Be the first to comment

Why Would A Programmer Fall In Love With SPA?

  1. 1. 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
  2. 2. 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.
  3. 3. Traditional page lifecycle CLIENT creates an initial request
  4. 4. Traditional page lifecycle SERVER responds with HTML code
  5. 5. Traditional page lifecycle CLIENT creates HTTP request
  6. 6. Traditional page lifecycle SERVER responds with HTML code
  7. 7. Traditional page lifecycle Website reloads
  8. 8. SPA page lifecycle CLIENT creates an initial request
  9. 9. SPA page lifecycle SERVER responds with HTML code
  10. 10. SPA page lifecycle CLIENT creates an AJAX request
  11. 11. SPA page lifecycle SERVER responds with JSON
  12. 12. SPA page lifecycle Website does not reload! :))))))
  13. 13. 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
  14. 14. 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
  15. 15. How to create a SPA application? Ember.js AngularJS Meteor Backbone.js
  16. 16. How to choose a proper framework? Routing Templating Testability Browser compatibility API integrations
  17. 17. 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
  18. 18. Is Ember.js better than AngularJS? NO
  19. 19. Creating SPA websites won't fix your poor UX/design problems
  20. 20. Ways to use Ember with Rails 2 separate applications Ember.js embedded in Rails application
  21. 21. How to start? Include in your Gemfile && run bundle install gem 'ember-cli-rails'
  22. 22. Use generator to guide you rails generate ember-cli:init
  23. 23. 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
  24. 24. Mount EmberCLI test engine in config/routes.rb mount EmberCLI::Engine => "ember-tests", if: -> { Rails.env.development? }
  25. 25. Add root element to config/environment.js APP: { rootElement: '.enrollment' }
  26. 26. Create a rake task for running ember tests task default: 'ember:test'
  27. 27. THE END - Q & A - - Ember.js documentation Ember-cli-rails

×