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


Published on

for 2013-03-19 Angular.js NYC Meetup

Published in: Technology

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. 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| omthm ne.tleb{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"{}/> <nu dt-gso=ofrn.dtn" ipt aan-hw"feigeiig tp=tx"dt-gmdl"feignm"rqie/ ye"et 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