for 2013-03-19 Angular.js NYC Meetup

1. Angular.js + Rails = ♥
or: The Accidental Feature
By Jonathan E. Magen / @yonkeltron Sr. Software Engineer, WeWork

2. Identify yourself
Jonathan E. Magen / yonkeltron errywhere else
Practitioner of the Computer Sciences
Research @ The Evergreen State College Advanced OS Lab
WeWork engineer

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. Computing at WeWork
Tech stack
Rails
Heroku
PostgreSQL
Agile!

5. WeWork.com Member
Network

7. Spaceman: WeWork
backoffice hawtness
Space management
Billing
Reservations
Accounting system integration

8. Things we've built with
Angular
Audit trail + changelog inspector using audited gem
Infinite scroll using will_paginate gem
Inline edit
Lots of stuff using ngResource

9. Angular.js + Rails
♥

10. Free RESTful JSON endpoints
casOfrnsotolr<Apiainotolr
ls 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..
ed
n
ActiveRecord → JSON → HTTP

11. ngResource
aglrmdl(ofrnsevc' [nRsuc')
nua.oue'feigSrie, 'geore].
fcoy'feig,fnto ofrn(rsuc){
atr(Ofrn' ucin feig$eore
rtr $eore'ofrns: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

12. 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!

13. 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

14. 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

15. One minor snag
cni.sesj_opesr=Srces:ayopesrnwd
ofgast.scmrso pokt:LzCmrso.e o
Ulfe.e(age fle #dntoltrt nms
giirnwmnl: as) o' bieae ae
ed
n
config/environments/production.rb

16. Angular on Rails
Rails gives you RESTful JSON endpoints for free
ngResource lets you consume them for free
Let Rails help you render templates

17. The Accidental Feature

18. It started with a spike
The requirement:
Allow a user to quickly inline edit inventory on the index page.
*Actual Spaceman wireframe

19. The search for
inline edit
Oh God, please make it stop

20. Yeah, I know there were easier
ways to do this
Gorillions of jQuery plugins
Far fewer Angular-friendly options
Google Groups
StackOverflow
We knew we'd need Angular.js but
wanted to ease our way in gradually

21. 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 UI
TBH: Angular.js could really use widgets
Web Components?

22. How we did it

23. Offerings controller
saea.otolr'feig' fnto (soe sacPrmevc,Ofrn){
pcmncnrle(ofrns, ucin $cp, erhaaSrie feig
cnoelg'feig 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
}
};
};
)

24. 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)

25. ngShow + ngResource

26. Problems
Verbose
Soaking wet (non-DRY)
Not easily reused

27. Next steps for inline edit
Figure out how to turn this in to a reusable component

28. Accidental success
↓
Angular empowerment

29. Changelog + audit inspector
Strong audit trail
Data integrity
audited gem

30. Who, what, when, where, why, how
casOfrn <AtvRcr:Bs
ls feig cieeod:ae
adtd
uie
#..
.
ed
n
Adtd: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
}

34. END / FIN / ‫סוף‬
Thanks to Google
Thanks to WeWork
Thanks to you