This document discusses how using AngularJS with Ruby on Rails can save Rails developers time and effort. It provides reasons for using AngularJS like its large ecosystem and popularity. It describes the author's experience migrating projects to use AngularJS fully for frontend rendering instead of Rails views. This separation of concerns relieves backend developers and allows frontend developers more control. It also improves performance. Challenges like SEO, learning curve, and version changes are noted. Tips for integrating AngularJS and Rails like API documentation, testing, and caching tools are provided.

1. How AngularJS
saves
Ruby on Rails
Michael He from Odigo

2. What is Odigo?

3. Why use AngularJS?

4. Reason 1
Our management asked us to use a
singular frontend framework

5. • bower search angular | wc -l
> 2721
• bower search backbone | wc -l
> 520
• bower search ember | wc -l
> 253
Reason 2
AngularJS seems to be more popular

6. History of using
AngularJS in projects
• First version: "fake" SPA (Single Page AngularJS)
• Second version: Changed all pages to use
AngularJS to render data
• Final version: Completely separated frontend
and backend to real SPA

7. Work Changes

8. Before
Frontend Developer
Backend Developer
HTML CSS A little javascript
DBA
Model
Server Administration
Controller
HTML Javascript
Deployment
Testing
Routing

9. After
Frontend Developer
Backend Developer
DBA
Model
Server Administration
Controller
Deployment
Testing
HTML CSS
Page Effect
Page Routing
Page Rendering Logic
Angular Data Model

10. Big Companies
Designer
Backend Developer
DBA
Model
Server Administration
Controller
Deployment
Auto Testing
HTML CSS
Page Effect
Page Routing
Page Rendering Logic
Angular Data Model
SA
Frontend Developer

11. Whats the skinny?

12. • Less things to memorise for developers on each layer
• Frontend developer has more power and control on the
project, so they don’t need to ask for changes to the
backend developer all the time
• Relieves the backend developer from frontend works
• Backend developer only needs to focus on data
presentation, database structure and performance
• Big performance boost. (Most of the rails project are
very slow because of the complicated logic on view or
view logic in controller)
The Good

13. • SEO
• AngularJS is a little confusing for beginners
• AngularJS has major changes between different
versions, difficult to upgrade
• Server and client side validation is duplicated
• The amount of code grows and grows
• Whiles the frontend developer was previously only
handled a little javascript, now they have to manage a
large amount of javascript code
The Bad

14. Tips about using
angular with Rails
• api_taster
• teaspoon
• rocket_pants

15. API Taster
Executable API document, very good output for
backend developer to frontend developer
https://github.com/fredwu/api_taster

16. Teaspoon
Support for running the test cases online
Support CoffeeScript
Support for running on CI
https://github.com/modeset/teaspoon

17. Rocket Pants
• Version Control Solution
• Standardised API format
• Give better Error result and message.
• Cache solution
• Easy to use, seamless for rails developer
https://github.com/Sutto/rocket_pants

18. For more tips
http://blog.memoryforcer.com/best-practice-for-
angularjs-with-rails/

19. THANKS
for coming!
Thanks Wouter for text tweaking