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