Your SlideShare is downloading. ×
0
Angular.js + Rails = ♥   or: The Accidental FeatureBy Jonathan E. Magen / @yonkeltron Sr. Software Engineer, WeWork
Identify yourselfJonathan E. Magen / yonkeltron errywhere elsePractitioner of the Computer SciencesResearch @ The Evergree...
About WeWork“ We want to change the way people work. ”        - Adam Neumann, WeWork Co-Founder     “ Design to make peopl...
Computing at WeWork      Tech stack        Rails        Heroku        PostgreSQL         Agile!
WeWork.com Member    Network
Spaceman: WeWorkbackoffice hawtness   Space management   Billing   Reservations   Accounting system integration
Things weve built with       AngularAudit trail + changelog inspector using audited gemInfinite scroll using will_paginate...
Angular.js + Rails       ♥
Free RESTful JSON endpointscasOfrnsotolr<Apiainotolrls feigCnrle   plctoCnrle dfidx  e ne   @feig =Ofrn.aeprm[pg]    ofrns...
ngResourceaglrmdl(ofrnsevc [nRsuc)nua.ouefeigSrie, geore]. fcoyfeig,fnto ofrn(rsuc){  atr(Ofrn ucin feig$eore   rtr $eoreo...
Rails renders Angular template HTML          Times you might want to do this:    Permissions: only rendering parts of a te...
Permission-driven rendering   <=i cretue.a_oe :uio %    % f urn_srhsrl? adtr >     <i dt-gap"pcmn>      dv aan-p=saea"    ...
i18n API column headers <al cas"al tbesrpd dt-gap"pcmn> tbe ls=tbe al-tie" aan-p=saea"  <ha>   ted    <h<=Ofrn.ua_trbt_ae:...
One minor snagcni.sesj_opesr=Srces:ayopesrnwdofgast.scmrso    pokt:LzCmrso.e o Ulfe.e(age fle #dntoltrt nms  giirnwmnl: as...
Angular on RailsRails gives you RESTful JSON endpoints for freengResource lets you consume them for freeLet Rails help you...
The Accidental Feature
It started with a spike                       The requirement:Allow a user to quickly inline edit inventory on the index p...
The search for  inline edit   Oh God, please make it stop
Yeah, I know there were easier         ways to do this        Gorillions of jQuery plugins        Far fewer Angular-friend...
A subtle rejection of ngGrid        Reimplementing t b ein terms of d v                          al             i        D...
How we did it
Offerings controllersaea.otolrfeig fnto (soe sacPrmevc,Ofrn){pcmncnrle(ofrns, ucin $cp, erhaaSrie feig cnoelgfeig Cnolr)  ...
The show/hide model for cells      in the table body <bd dt-gcnrle=ofrns> toy aan-otolr"feig"  <rdt-grpa=ofrn i ofrns>   t...
ngShow + ngResource
ProblemsVerboseSoaking wet (non-DRY)Not easily reused
Next steps for inline editFigure out how to turn this in to a reusable component
Accidental success          ↓Angular empowerment
Changelog + audit inspector          Strong audit trail          Data integrity          audited gem
Who, what, when, where, why, howcasOfrn <AtvRcr:Bsls feig  cieeod:ae adtd  uie #..   .ednAdtd:dpes:cieeod:ui <AtvRcr:Bs { ...
END / FIN / ‫סוף‬   Thanks to Google  Thanks to WeWork    Thanks to you
Angular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental Feature
Angular.js + Rails at WeWork or: The Accidental Feature
Upcoming SlideShare
Loading in...5
×

Angular.js + Rails at WeWork or: The Accidental Feature

4,189

Published on

for 2013-03-19 Angular.js NYC Meetup

Published in: Technology

Transcript of "Angular.js + Rails at WeWork or: The Accidental Feature"

  1. 1. Angular.js + Rails = ♥ or: The Accidental FeatureBy Jonathan E. Magen / @yonkeltron Sr. Software Engineer, WeWork
  2. 2. Identify yourselfJonathan E. Magen / yonkeltron errywhere elsePractitioner of the Computer SciencesResearch @ The Evergreen State College Advanced OS LabWeWork engineer
  3. 3. About WeWork“ We want to change the way people work. ” - Adam Neumann, WeWork Co-Founder “ Design to make people happy. ” - Miguel McKelvey, WeWork Co-Founder 7 Buildings 3 Cities 4000+ Members Services for the community
  4. 4. Computing at WeWork Tech stack Rails Heroku PostgreSQL Agile!
  5. 5. WeWork.com Member Network
  6. 6. Spaceman: WeWorkbackoffice hawtness Space management Billing Reservations Accounting system integration
  7. 7. Things weve built with AngularAudit trail + changelog inspector using audited gemInfinite scroll using will_paginate gemInline editLots of stuff using ngResource
  8. 8. Angular.js + Rails ♥
  9. 9. Free RESTful JSON endpointscasOfrnsotolr<Apiainotolrls feigCnrle plctoCnrle dfidx e ne @feig =Ofrn.aeprm[pg] ofrns feigpg(aas:ae) rsodt d |omt epn_o o fra| fra.tl#idxhm.r omthm ne.tleb fra.sn{rne jo:@feig,ro:fle} omtjo edr sn ofrns ot as ed n ed n #ohratos. te cin..edn ActiveRecord → JSON → HTTP
  10. 10. ngResourceaglrmdl(ofrnsevc [nRsuc)nua.ouefeigSrie, geore]. fcoyfeig,fnto ofrn(rsuc){ atr(Ofrn ucin feig$eore rtr $eoreofrns:d,{d i,{ eun rsuc(/feig/i i: @d} cet:{mto:OT } rae ehd PS , idx {mto:E iAry tu } ne: ehd GT, sra: re , so: {mto:E} hw ehd GT , udt:{mto:U} pae ehd PT }; ) }; ) Rails → JSON/HTTP → ngResource
  11. 11. Rails renders Angular template HTML Times you might want to do this: Permissions: only rendering parts of a template Dynamically populate form s l c options eet Internationalization!
  12. 12. Permission-driven rendering <=i cretue.a_oe :uio % % f urn_srhsrl? adtr > <i dt-gap"pcmn> dv aan-p=saea" <i dt-uis"e" dv aaadt=yp dt-uial-ye"% Ofrn.os%" aaadtbetp=<= feigt_ > dt-uial-d"% @feigi %"<dv aaadtbei=<= ofrn.d >>/i> <dv /i> < ed% % n >Only render the audit inspector directive iff the current user has the authorization to access audit data
  13. 13. i18n API column headers <al cas"al tbesrpd dt-gap"pcmn> tbe ls=tbe al-tie" aan-p=saea" <ha> ted <h<=Ofrn.ua_trbt_ae:ae %<t> t>% feighmnatiuenm(nm) >/h <h<=Ofrn.ua_trbt_ae:aeoiain %<t> t>% feighmnatiuenm(ctgrzto) >/h <h<=Ofrn.ua_trbt_ae:rc)%<t> t>% feighmnatiuenm(pie >/h <h<t> t>/h <h<t> t>/h <ted /ha>t e drendered by Rails includes localized column headers. This ha lets Angular render the t o ycontaining actual data. bd
  14. 14. One minor snagcni.sesj_opesr=Srces:ayopesrnwdofgast.scmrso pokt:LzCmrso.e o Ulfe.e(age fle #dntoltrt nms giirnwmnl: as) o bieae aeedn config/environments/production.rb
  15. 15. Angular on RailsRails gives you RESTful JSON endpoints for freengResource lets you consume them for freeLet Rails help you render templates
  16. 16. The Accidental Feature
  17. 17. It started with a spike The requirement:Allow a user to quickly inline edit inventory on the index page. *Actual Spaceman wireframe
  18. 18. The search for inline edit Oh God, please make it stop
  19. 19. Yeah, I know there were easier ways to do this Gorillions of jQuery plugins Far fewer Angular-friendly options Google Groups StackOverflow We knew wed need Angular.js but wanted to ease our way in gradually
  20. 20. A subtle rejection of ngGrid Reimplementing t b ein terms of d v al i Does way more than what we needed Sub project of Angular UITBH: Angular.js could really use widgets Web Components?
  21. 21. How we did it
  22. 22. Offerings controllersaea.otolrfeig fnto (soe sacPrmevc,Ofrn){pcmncnrle(ofrns, ucin $cp, erhaaSrie feig cnoelgfeig Cnolr) osl.o(Ofrns otle; $cp.feig =Ofrn.ur(;/ nRsuc ZM! soeofrns feigqey) / geore OG $cp.dtnTgl =fnto eiigogeofrn){ soeeiigoge ucin dtnTgl(feig i (feigeiig { f ofrn.dtn) Ofrn.paeofrn) feigudt(feig; ofrn.dtn =fle feigeiig as; }es { le ofrn.dtn =tu; feigeiig re } };};)
  23. 23. The show/hide model for cells in the table body <bd dt-gcnrle=ofrns> toy aan-otolr"feig" <rdt-grpa=ofrn i ofrns> t aan-eet"feig n feig" <d t> < he=/feig/{feigi}" a rf"ofrns{ofrn.d} dt-gso=!feigeiig>{feignm}<a aan-hw"ofrn.dtn"{ofrn.ae}/> <nu dt-gso=ofrn.dtn" ipt aan-hw"feigeiig tp=tx"dt-gmdl"feignm"rqie/ ye"et aan-oe=ofrn.ae eurd> <t> /d show(value) ⊕ show(input)
  24. 24. ngShow + ngResource
  25. 25. ProblemsVerboseSoaking wet (non-DRY)Not easily reused
  26. 26. Next steps for inline editFigure out how to turn this in to a reusable component
  27. 27. Accidental success ↓Angular empowerment
  28. 28. Changelog + audit inspector Strong audit trail Data integrity audited gem
  29. 29. Who, what, when, where, why, howcasOfrn <AtvRcr:Bsls feig cieeod:ae adtd uie #.. .ednAdtd:dpes:cieeod:ui <AtvRcr:Bs { uie:Aatr:AtvRcr:Adt cieeod:ae :d= :nee, i > itgr :uial_d= :nee, adtbei > itgr :uial_ye= :tig adtbetp > srn, :soitdi = :nee, ascae_d > itgr :soitdtp = :tig ascae_ye > srn, :sri = :nee, ue_d > itgr :srtp = :tig ue_ye > srn, :srae= :tig uenm > srn, :cin= :tig ato > srn, :uie_hne = :et adtdcags > tx, #< ZM df - OG if :eso = :nee, vrin > itgr :omn = :tig cmet > srn, :eoeades= :tig rmt_drs > srn, :rae_t= :aeie cetda > dttm}
  30. 30. END / FIN / ‫סוף‬ Thanks to Google Thanks to WeWork Thanks to you
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×