19
How AngularJS saves Ruby on Rails Michael He from Odigo

How angularjs saves rails

Embed Size (px)

Citation preview

Page 1: How angularjs saves rails

How AngularJSsaves

Ruby on RailsMichael He from Odigo

Page 2: How angularjs saves rails

What is Odigo?

Page 3: How angularjs saves rails

Why use AngularJS?

Page 4: How angularjs saves rails

Reason 1

Our management asked us to use a singular frontend framework

Page 5: How angularjs saves rails

• 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

Page 6: How angularjs saves rails

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

Page 7: How angularjs saves rails

Work Changes

Page 8: How angularjs saves rails

BeforeFrontend Developer

Backend Developer

HTML CSS A little javascript

DBA

Model

Server Administration

Controller

HTML Javascript

Deployment

Testing

Routing

Page 9: How angularjs saves rails

AfterFrontend Developer

Backend Developer

DBA

Model

Server Administration

Controller

Deployment

Testing

HTML CSSPage Effect

Page RoutingPage Rendering Logic

Angular Data Model

Page 10: How angularjs saves rails

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

Page 11: How angularjs saves rails

Whats the skinny?

Page 12: How angularjs saves rails

• 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

Page 13: How angularjs saves rails

• 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

Page 14: How angularjs saves rails

Tips about using angular with Rails

• api_taster

• teaspoon

• rocket_pants

Page 15: How angularjs saves rails

API Taster

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

https://github.com/fredwu/api_taster

Page 16: How angularjs saves rails

Teaspoon

Support for running the test cases online

Support CoffeeScriptSupport for running on CI

https://github.com/modeset/teaspoon

Page 17: How angularjs saves rails

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

Page 18: How angularjs saves rails

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

angularjs-with-rails/

Page 19: How angularjs saves rails

THANKSfor coming!

Thanks Wouter for text tweaking