How angularjs saves rails

How AngularJSsaves

Ruby on RailsMichael He from Odigo

What is Odigo?

Why use AngularJS?

Reason 1

Our management asked us to use a singular frontend framework

• 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

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

Work Changes

BeforeFrontend Developer

Backend Developer

HTML CSS A little javascript

DBA

Model

Server Administration

Controller

HTML Javascript

Deployment

Testing

Routing

AfterFrontend Developer

Backend Developer

DBA

Model

Server Administration

Controller

Deployment

Testing

HTML CSSPage Effect

Page RoutingPage Rendering Logic

Angular Data Model

Big CompaniesDesigner

Backend Developer

DBA

Model

Server Administration

Controller

Deployment

Auto Testing

HTML CSS

Page EffectPage Routing

Page Rendering LogicAngular Data Model

SA

Frontend Developer

Whats the skinny?

• 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

• 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

Tips about using angular with Rails

• api_taster

• teaspoon

• rocket_pants

API Taster

Executable API document, very good output for backend developer to frontend developer

https://github.com/fredwu/api_taster

Teaspoon

Support for running the test cases online

Support CoffeeScriptSupport for running on CI

https://github.com/modeset/teaspoon

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

For more tipshttp://blog.memoryforcer.com/best-practice-for-

angularjs-with-rails/

THANKSfor coming!

Thanks Wouter for text tweaking