Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Using Angular with Rails
1. Rangular development
Using angular with Rails
(for Single Page web apps)
Jamie Davidson
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13
2. Traditional Rails request flow
Pathgather // follow me : @jamiehdavidson
/users/3
navigates to
✓ Is route defined in routes.rb?
resources :users
- Ensure it’s an HTML request
- Run before_filters, authenticate user
- fetch the user, store in instance variable
application.html.erb/.haml
show.html.erb/.haml
<h1><%= @user.name %></h1>
Thursday, June 20, 13
3. With Angular + Rails,
this workflow is
usually bypassed....but
not always
Thursday, June 20, 13
4. Step 1: Build an API
‘Shell’ controllers to handle html requests
Often bypassed
Pathgather // follow me : @jamiehdavidson
api controllers to handle json requests
Never Bypassed
Thursday, June 20, 13
5. +Rails Code Structure
Startup Institute boston // follow me : @jamiehdavidson
Few Html requests = Few to
none rails helpers
Thursday, June 20, 13
6. +API vs HTMl Controller
Pathgather // follow me : @jamiehdavidson
app/controllers/users_controller.rb app/controllers/api/v1/users_controller.rb
* Only exists to accept full HTML requests to /users/:id.
Often bypassed
* Separate base controller allows us to specify before_filters
and handle errors specific to API requests
Thursday, June 20, 13
7. Step 2: Define JSON View
‘Shell’ html views to handle html requests
Often bypassed
Pathgather // follow me : @jamiehdavidson
json views to define returned json structure
Never bypassed
Thursday, June 20, 13
8. + RABL
Pathgather // follow me : @jamiehdavidson
app/views/users/show.html.haml app/views/users/show.json.rabl
* Totally blank file. Seriously, it exists, but contains
nothing.
Maybe there’s a better way???
https://github.com/nesquena/rabl
http://railscasts.com/episodes/322-rabl
Railscast:
Thursday, June 20, 13
9. Step 3: Add angular
why angular over the others?
Pathgather // follow me : @jamiehdavidson
how does it change our normal rails-y javscript stucture?
Thursday, June 20, 13
10. +Angular Code Structure
No more users.js.coffee,
products.js.coffee, etc, with random
jquery selectors
Extra resources:
- http://briantford.com/blog/
huuuuuge-angular-apps.html
- http://cliffmeyers.com/blog/
2013/4/21/code-organization-
angularjs-javascript
Thursday, June 20, 13
11. + Angular App Specification
Restangular over $http or ng-
resource (https://github.com/
mgonto/restangular)
jst covered in a few
Thursday, June 20, 13
12. Step 3A: Angular Controllers
sends requests to your rails api,
saves response to a scope variable
Pathgather // follow me : @jamiehdavidson
Don’t touch the dom!!!
Don’t even query the dom
Creates listeners for changes made by user
$watch is your friend
Thursday, June 20, 13
13. + Angular Controller + View
app/assets/javascripts/my_app/controllers/user.js.coffee app/assets/javascripts/templates/users/show.hamlc
Note: I don’t like this. USer sees a blank template before
seeing the actual user data
Instead, query for your data before the template
loads. leads to a smoother transition between views:
Thursday, June 20, 13
14. +Handling HTTP ERRORS
No ugly red error pages by default anymore
Need to ‘intercept’ api errors and render an error
page
reuse those ugly red pages
What happens when the user makes an api request for data that doesn’t exist or data they
aren’t allowed to view?
yourapp.js.coffee
Thursday, June 20, 13
15. pathgather // follow me : @jamiehdavidson
HTML
https://github.com/netzpirat/haml_coffee_assets
Haml can be used for angular templates
closing html tags
Thursday, June 20, 13
17. + Service example: current user
let’s see some real code
Thursday, June 20, 13
18. Angular Filters
Simply used to format data
Pathgather // follow me : @jamiehdavidson
if you need to format data by rendering/manipulating
html, use a directive
Angular ships with many predefined filters:
- formatting dates and currency
- searching within an array (see angular docs)
- http://www.cheatography.com/proloser/cheat-sheets/angularjs/
Thursday, June 20, 13
19. Angular Directives
horribly complicated
Pathgather // follow me : @jamiehdavidson
Highly technical documentation
But read, re-read, and re-re-read
absurdly powerful
Register behavior, transform the DOM, create reusable widgets, etc
Unfortunately, i could spend this entire talk on
directives, and you’d probably just leave confused
Angular ships with many out of the box
ng-repeat, ng-cloak, ng-view, ng-*
(Create your own prefix. Don’t use ng)
Thursday, June 20, 13
20. +Directives and jquery plugins
DON’t:
Text
/app/assets/javascripts/[some model].js.coffee
Minimal:
Thursday, June 20, 13
21. A note about jquery and angular
I find myself very hesitant to use jquery only plugins
Pathgather // follow me : @jamiehdavidson
when starting out with angular, don’t include jquery
‘Roll your own’ first, jquery plugin last
share your directives on github. sharing is caring!!
set a maximum number (single digits) of jquery-only
plugins you’ll use
Thursday, June 20, 13
22. +User Authentication/Authorization
Server side authentication doesn’t change (beyond
API authentication), but you can’t do this anymore!!
So how do we alter the view to dynamically
display html based on who the current user is?
Thursday, June 20, 13
23. +Angular + Rails user authentication
You can send AJAX requests, do full page loads, or....
Current user service + directives
But Wait, this is javascript. won’t some average hacker be able to
disguise themselves as another user?
Yep. But we’re good little rails developers, so we have server-side checks (devise, cancan, etc) to ensure the
logged-in user can actually access/modify the data.
they can make themselves look like the current user On the client...but they can’t act like them
Thursday, June 20, 13
24. + Angular + SEO
What a crawler sees What our user sees
Thursday, June 20, 13
25. + Angular + SEO
Manual lifting required
You have to build a pre-rendered version and render that
to the crawler only
Stay Tuned for crawler improvements and js-heavy/one
page apps
Resources:
- http://www.yearofmoo.com/2012/11/angularjs-and-
seo.html
- https://developers.google.com/webmasters/ajax-
crawling
Thursday, June 20, 13
26. Final Resources
Pathgather // follow me : @jamiehdavidson
Angular UI
angular-ui.github.io
angular screencasts
egghead.io
railscast
http://www.cheatography.com/proloser/cheat-sheets/angularjs/
Cheat Sheet
https://github.com/jmcunningham/AngularJS-Learning
Github repo of learning resources
http://railscasts.com/episodes/405-angularjs
Thursday, June 20, 13
29. Q&Atime for me to shutup and for you to talk
or i can tell you more about directives
Pathgather // follow me : @jamiehdavidson
Thursday, June 20, 13