0
"DJANGO AS YOUR
BACKBONE"
AN INTRODUCTION
By Roderick Schaefer (We handle IT)

0
I'm a 31 year old freelance developer, currently working for
Schuberg Philis.
My focus is development in Python and PHP ac...
WHERE ARE YOU
Schuberg Philis
Mission Critical Outsourcing
DevOps
<3 Python and Django
WHY ARE WE HERE
Python
Django
Backbone ?
Moving to the frontend
OLD SCHOOL WEB APP DEVELOPMENT
Django with the MTV ("MVC") pattern
(M) models.py
casCniaehs(oesMdl:
ls addtPaemdl.oe)
cetd=mdl.aeieil(uonwadTu)
rae
oesDtTmFedat_o_d=re
cniae=mdl.oegKyCniae
...
(T) index.html
<tl
hm>
<ed
ha>
<il>yvr onwbie/il>
tteM ey w est<tte
<ha>
/ed
<oy
bd>
<i i=cnet>
dv d"otn"
<l
u>
{ frcniaei...
(V) views.py
@edrt(mapidxhm'
rne_o'yp/ne.tl)
dfls_addtsrqet:
e itcniae(eus)
cniae =Cniaeojcsal)
addts
addt.bet.l(
pae =Pae...
NEW: API DRIVEN, FRONTEND MVC
Python
Django
jQuery
TastyPie
Backbone
Require.js
Underscore
Handlebars
Backbone-tastypie ?
...
BECAUSE WE CAN!
It is not only awesome to work API driven...

IT JUST MAKES SENSE
API: Securely expose databases
Frontend(...
TASTYPIE: AN INTRODUCTION
API webservice for Django
Allows RESTful implementation
ORM exposure
Non-ORM
Authentication
Auth...
BACKBONE: AN INTRODUCTION
Frontend MVC
Leverages Underscore.js and friends
Router
Models
Collections
Views
Events
Template...
I CAN HAZ CODE
Basic frontend app, powered by Django and Backbone
your_app/urls.py
fo dag.oful ipr pten,ul
rm jnocn.rs mot atrs r
fo ap.pria ipr ves
rm psapasl mot iw
ulatrs=pten(
rpten
at...
your_app/views.py
fo anyn.eoaosipr rne_o
rm noigdcrtr mot edrt
@edrt(apaslidxhm'
rne_o'pria/ne.tl)
dfidxrqet:
e ne(eus)
rt...
your_app/templates/index.html
{ etns"aehm"%
% xed bs.tl }
{ bokcnet%
% lc otn }
<citdt-an"pria/otta"sc"srqiej"<srp>
srp aa...
your_app/api.py
casFebcRsuc(acalMdleore:
ls edakeorePthbeoeRsuc)
rve =TOeil(
eiw
onFed
'psapaslaiRveRsuc'
ap.pria.p.eiweor...
your_app/static/bootstrap.js
rqiecni(
eur.ofg{
bsUl 'sai'
aer: /ttc,
pts {
ah:
'akoe :'lgn/akoemn,
bcbn'
puisbcbn-i'
'adea...
your_app/static/app.js
dfn(
eie[
'pria/otr
apaslrue'
] fnto(eu Rue){
, ucinmn, otr
vriiilz =fnto( {
a ntaie
ucin)
Rue.ntai...
your_app/static/router.js
dfn(
eie[
'akoe,
bcbn'
'iw/ahor'
vesdsbad
] fnto(akoe Dsbadiw {
, ucinBcbn, ahorVe)
vrApotr=Bcbn...
your_app/static/views/peers.js
dfn(
eie[
'qey,
jur'
'akoe,
bcbn'
'adeas,
hnlbr'
'olcin/esn'
cletospros,
'ettmltspeshm'
tx!...
your_app/static/models/SomeModel.js
dfn(
eie[
'akoe
bcbn'
] fnto(akoe {
, ucinBcbn)
vrProMdl=Bcbn.oe.xed{
a esnoe
akoeMdle...
your_app/static/templates/SomeTemplate.html
<i cas"t-ru"
dv ls=bngop>
< he=#er/d{frr}"cas"t"AdPe<a
a rf"pesad{oUl} ls=bn>d...
BACKBONE <3 TASTYPIE
Add PATCH support to ModelResource
casPthbeoeRsuc(oeRsuc)
ls acalMdleoreMdleore:
dfpthdti(ef rqet *ka...
BACKBONE <3 TASTYPIE
PATCH part 2
casFrVldto(atPeomaiain:
ls omaiainTsyiFrVldto)
dfuit_ksl,ui:
e r_op(ef r)
i uii Nn:
f r ...
BACKBONE <3 TASTYPIE
Add File Upload support to ModelResource
casMliateoreojc)
ls utprRsuc(bet:
dfdsraiesl,rqet dt,fra=oe:...
BACKBONE <3 TASTYPIE
Glue: Backbone-Tastypie.js
<citsc"{SAI_R }j/lgn/nesoemnj"<srp>
srp r={ TTCUL }spuisudrcr.i.s>/cit
<ci...
BACKBONE <3 TASTYPIE
Form generation: Backbone-Forms.js
You could map a Django ModelForm to the frontend
vrUe =Bcbn.oe.xed...
TRANSITIONING TO FRONTEND MVC
THIS IS CONNECT
TRANSITIONING TO FRONTEND MVC
Existing application
A collection of Apps, really
Shared libs, code, authentication layers e...
TRANSITIONING TO FRONTEND MVC
Yes you can!
Wrap your base.html's javascripts in a block. Empty that block in
your Backbone...
TRANSITIONING TO FRONTEND MVC
your_app/templates/index.html
{ etns"aebs.aehm"%
% xed pg.aepg.tl }
{ bokcnet%
% lc otn }
{ ...
CHALLENGES
URL reversal (API endpoints in Backbone Model)
Session state awareness in the frontend (like Permissions,
Reque...
ALTERNATIVES
TastyPie vs Django REST Framework.
Backbone vs Angular vs Ember vs .. Check out TodoMVC.com!
WHAT'S NEXT?
Currently looking into javascript package management, sockets,
..
1. Grunt
2. Bower
3. NPM
4. Node JS
5. So m...
QUESTIONS?
See you around, enjoy your evening at Schuberg Philis!
Don't forget to grab a couple of beers while
you're at i...
Upcoming SlideShare
Loading in...5
×

Django as your Backbone

3,330

Published on

Using (Python) Django and Backbone together, in order to "move to the frontend" with your web applications. Working API driven. Also benefits from plugins like require.js. Presentation given at Python Meetup.

Published in: Technology
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,330
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Django as your Backbone"

  1. 1. "DJANGO AS YOUR BACKBONE" AN INTRODUCTION By Roderick Schaefer (We handle IT) 0
  2. 2. I'm a 31 year old freelance developer, currently working for Schuberg Philis. My focus is development in Python and PHP accompanied by goodies like Backbone and supporting tools.
  3. 3. WHERE ARE YOU Schuberg Philis Mission Critical Outsourcing DevOps <3 Python and Django
  4. 4. WHY ARE WE HERE Python Django Backbone ? Moving to the frontend
  5. 5. OLD SCHOOL WEB APP DEVELOPMENT Django with the MTV ("MVC") pattern
  6. 6. (M) models.py casCniaehs(oesMdl: ls addtPaemdl.oe) cetd=mdl.aeieil(uonwadTu) rae oesDtTmFedat_o_d=re cniae=mdl.oegKyCniae addt oesFrine(addt) dfsv(ef *rs *kag) e aesl, ag, *wrs: sprCniaehs,sl)sv(ag,*kag) ue(addtPae ef.ae*rs *wrs sl.addt.ae='jno efcniaenm Dag' df_uioe_sl) e _ncd_(ef: rtr uioesl.addt.ae eun ncd(efcniaenm)
  7. 7. (T) index.html <tl hm> <ed ha> <il>yvr onwbie/il> tteM ey w est<tte <ha> /ed <oy bd> <i i=cnet> dv d"otn" <l u> { frcniaei cniae % % o addt n addts } <i{ cniaenm }<l> l>{ addt.ae }/i { edo % % nfr } <u> /l <dv /i> <bd> /oy <hm> /tl
  8. 8. (V) views.py @edrt(mapidxhm' rne_o'yp/ne.tl) dfls_addtsrqet: e itcniae(eus) cniae =Cniaeojcsal) addts addt.bet.l( pae =Paeojcsfle(cieTu) hss hs.bet.itratv=re rtr { eun cniae:cniae, addts addts pae:pae, hss hss }
  9. 9. NEW: API DRIVEN, FRONTEND MVC Python Django jQuery TastyPie Backbone Require.js Underscore Handlebars Backbone-tastypie ? Wait.. Why ?
  10. 10. BECAUSE WE CAN! It is not only awesome to work API driven... IT JUST MAKES SENSE API: Securely expose databases Frontend(s): Consume, process, present Separation of concerns Single Page Apps
  11. 11. TASTYPIE: AN INTRODUCTION API webservice for Django Allows RESTful implementation ORM exposure Non-ORM Authentication Authorization Serialization (JSON!) Pagination
  12. 12. BACKBONE: AN INTRODUCTION Frontend MVC Leverages Underscore.js and friends Router Models Collections Views Events Templates (using plugins)
  13. 13. I CAN HAZ CODE Basic frontend app, powered by Django and Backbone
  14. 14. your_app/urls.py fo dag.oful ipr pten,ul rm jnocn.rs mot atrs r fo ap.pria ipr ves rm psapasl mot iw ulatrs=pten( rpten atrs ', ' ulr^' vesidx nm=idx) r('$, iw.ne, ae'ne', ) No need to touch this anymore from now on.
  15. 15. your_app/views.py fo anyn.eoaosipr rne_o rm noigdcrtr mot edrt @edrt(apaslidxhm' rne_o'pria/ne.tl) dfidxrqet: e ne(eus) rtr { eun } No need to touch this anymore from now on.
  16. 16. your_app/templates/index.html { etns"aehm"% % xed bs.tl } { bokcnet% % lc otn } <citdt-an"pria/otta"sc"srqiej"<srp> srp aami=apaslbosrp r=j/eur.s>/cit <i i=cnet>/i> dv d"otn"<dv { edlc % % nbok } No need to touch this anymore from now on.
  17. 17. your_app/api.py casFebcRsuc(acalMdleore: ls edakeorePthbeoeRsuc) rve =TOeil( eiw onFed 'psapaslaiRveRsuc' ap.pria.p.eiweore, 'eiw rve' ) casMt: ls ea rsuc_ae='pria/edak eorenm apaslfebc' atetcto =Cnetuhniain) uhniain oncAtetcto( atoiain=FebcAtoiain) uhrzto edakuhrzto( qeye =Febc.bet.rfthrltd'eiw) urst edakojcspeec_eae(rve' sraie =Sraie(omt='sn,) eilzr eilzrfras(jo' ) dfhdaesl,bnl) e yrt(ef ude: bnl.aagt'otn' =aeoebnl.aagt'otn') udedt.e(cnet) wsm(udedt.e(cnet) rtr bnl eun ude This is where you do the heavy lifting in Django.
  18. 18. your_app/static/bootstrap.js rqiecni( eur.ofg{ bsUl 'sai' aer: /ttc, pts { ah: 'akoe :'lgn/akoemn, bcbn' puisbcbn-i' 'adeas:'lgn/adeas100r..i' hnlbr' puishnlbr-..-c3mn } , si:{ hm 'akoe:{ bcbn' dp es :[jur' 'nesoe] 'qey, udrcr', eprs 'akoe xot: Bcbn' } , 'adeas:{ hnlbr' eprs 'adeas xot: Hnlbr' } } }; ) rqie[apaslap] fnto(p){Apiiilz(;}; eur('pria/p', ucinAp p.ntaie) ) Convention > configuration, only specify for non-standard paths or shim (Non-AMD).
  19. 19. your_app/static/app.js dfn( eie[ 'pria/otr apaslrue' ] fnto(eu Rue){ , ucinmn, otr vriiilz =fnto( { a ntaie ucin) Rue.ntaie) otriiilz(; } ; rtr { eun iiilz:iiilz ntaie ntaie } ; }; ) Small example, just load router..
  20. 20. your_app/static/router.js dfn( eie[ 'akoe, bcbn' 'iw/ahor' vesdsbad ] fnto(akoe Dsbadiw { , ucinBcbn, ahorVe) vrApotr=Bcbn.otretn( a pRue akoeRue.xed{ rue:{ ots 'ahor' 'ahor' dsbad: dsbad / mn mr rue. / ay oe ots. } , dsbad fnto( { ahor: ucin) vrdsbadiw=nwDsbadiw) a ahorVe e ahorVe(; dsbadiwrne(; ahorVe.edr) } , }; ) vriiilz =fnto({ a ntaie ucin) vraprue =nwApotr) a p_otr e pRue(; Try not to do anything besides routing. Bcbn.itr.tr(; akoehsoysat) } ; rtr { eun iiilz:iiilz ntaie ntaie } ; }; )
  21. 21. your_app/static/views/peers.js dfn( eie[ 'qey, jur' 'akoe, bcbn' 'adeas, hnlbr' 'olcin/esn' cletospros, 'ettmltspeshm' tx!epae/er.tl, ] fnto(,Bcbn,Hnlbr,ProCleto,peTmlt){ , ucin$ akoe adeas esnolcin erepae vrRveLsigiw=Bcbn.iwetn( a eiwitnVe akoeVe.xed{ e:'cnet, l #otn' iiilz:fnto( { ntaie ucin) ti.esnolcin=nwProCleto(; hsproCleto e esnolcin) ti.esnolcino(rst,ti.paeesn ti) hsproCleto.n'ee' hsudtPro, hs; ti.esnolcinfth) hsproCleto.ec(; _bnAlti,'edr,'eoe,'ep) .idl(hs rne' rmv' hl'; } , eet:{ vns 'lc .ep:'ep cik hl' hl' } , tmlt:Hnlbr.opl(erepae, epae adeascmiepeTmlt) rne:fnto( { edr ucin) ti.e.tlti.epae{ hs$lhm(hstmlt( frr:frr oUl oUl }) );
  22. 22. your_app/static/models/SomeModel.js dfn( eie[ 'akoe bcbn' ] fnto(akoe { , ucinBcbn) vrProMdl=Bcbn.oe.xed{ a esnoe akoeMdletn( ulot 'aiv/empro/ rRo: /p/1ta/esn' }; ) rtr ProMdl eun esnoe; }; )
  23. 23. your_app/static/templates/SomeTemplate.html <i cas"t-ru" dv ls=bngop> < he=#er/d{frr}"cas"t"AdPe<a a rf"pesad{oUl} ls=bn>d er/> <utni=pesdn"cas"t"Ia dn<bto> bto d"er_oe ls=bn> m oe/utn <dv /i> <i> dv <al i=apaslrvesgi"<tbe tbe d"pria_eiw_rd>/al> <dv /i> Event binding in your Views. {{forUrl}} is a variable given to Handlebars template compiler.
  24. 24. BACKBONE <3 TASTYPIE Add PATCH support to ModelResource casPthbeoeRsuc(oeRsuc) ls acalMdleoreMdleore: dfpthdti(ef rqet *kag) e ac_ealsl, eus, *wrs: ##--np- ## # -si-- # #Ti i weetemgchpes hs s hr h ai apn. rqet_edsatd=Fle eus.ra_tre as bd =rqetbd oy eus.oy #Ti i weei sos hs s hr t tp. ##--np- ## # -si-- #
  25. 25. BACKBONE <3 TASTYPIE PATCH part 2 casFrVldto(atPeomaiain: ls omaiainTsyiFrVldto) dfuit_ksl,ui: e r_op(ef r) i uii Nn: f r s oe rtr Nn eun oe #Ti i weetemgchpes hs s hr h ai apn. i iisac(r,Bnl) f sntneui ude: ui=uidt[rsuc_r' r r.aa'eoreui] ei iisac(r,ls)adui lf sntneui it n r: i iisac(r[] Bnl) f sntneui0, ude: frii xag(e(r): o n rnelnui) uii =uii.aa'eoreui] r[] r[]dt[rsuc_r' #Ti i weei sos hs s hr t tp. ##--np- ## # -si-- #
  26. 26. BACKBONE <3 TASTYPIE Add File Upload support to ModelResource casMliateoreojc) ls utprRsuc(bet: dfdsraiesl,rqet dt,fra=oe: e eeilz(ef eus, aa omtNn) i ntfra: f o omt fra =rqetMT.e(CNETTP' 'plcto/sn) omt eus.EAgt'OTN_YE, apiainjo' i 'plcto/-w-omulnoe'= fra: f apiainxwwfr-recdd = omt rtr rqetPS eun eus.OT i fra.trsih'utpr': f omtsatwt(mliat) dt =rqetPS.oy) aa eus.OTcp( dt.paerqetFLS aaudt(eus.IE) rtr dt eun aa rtr sprMliateore sl)dsraierqet dt,fra) eun ue(utprRsuc, ef.eeilz(eus, aa omt casCniaeeoreMliateore PthbeoeRsuc) ls addtRsuc(utprRsuc, acalMdleore: #Ipeetto o AIedon spotn PTHadFl ulas mlmnain f P npit uprig AC n ie pod.
  27. 27. BACKBONE <3 TASTYPIE Glue: Backbone-Tastypie.js <citsc"{SAI_R }j/lgn/nesoemnj"<srp> srp r={ TTCUL }spuisudrcr.i.s>/cit <citsc"{SAI_R }j/lgn/akoemnj"<srp> srp r={ TTCUL }spuisbcbn-i.s>/cit <citsc"{SAI_R }j/lgn/akoetsyi.s>/cit srp r={ TTCUL }spuisbcbn-atpej"<srp>
  28. 28. BACKBONE <3 TASTYPIE Form generation: Backbone-Forms.js You could map a Django ModelForm to the frontend vrUe =Bcbn.oe.xed{ a sr akoeMdletn( shm:{ cea tte il: {tp:'eet,otos [M' 'r' 's]} ye Slc' pin: 'r, Ms, M' , nm: ae 'et, Tx' eal mi: {vldtr:[rqie' 'mi' } aiaos 'eurd, eal] , brha: 'ae, itdy Dt' pswr: 'asod, asod Pswr' ades drs: {tp:'etdoe' mdl Ades} ye NseMdl, oe: drs , nts oe: {tp:'it,ieTp:'et } ye Ls' tmye Tx' } }; ) vrue =nwUe(; a sr e sr) vrfr =nwBcbn.om{ a om e akoeFr( mdl ue oe: sr }.edr) )rne(;
  29. 29. TRANSITIONING TO FRONTEND MVC THIS IS CONNECT
  30. 30. TRANSITIONING TO FRONTEND MVC Existing application A collection of Apps, really Shared libs, code, authentication layers etc "Can I haz Backbone coolness?!" Product is already live, actively in use.
  31. 31. TRANSITIONING TO FRONTEND MVC Yes you can! Wrap your base.html's javascripts in a block. Empty that block in your Backbone powered apps. Include some "legacy-scripts" template from your backbone app's templates, for compatibility with generic stuff like the main navigation.
  32. 32. TRANSITIONING TO FRONTEND MVC your_app/templates/index.html { etns"aebs.aehm"% % xed pg.aepg.tl } { bokcnet% % lc otn } { bok"aacit"%{ edlc % % lc jvsrps }% nbok } { icue"eaysrpshm"% % nld lgc-cit.tl } <citdt-an"orp/otta"sc"srqiej"<srp> srp aami=YuApbosrp r=j/eur.s>/cit <i i=cnet>/i> dv d"otn"<dv { edlc % % nbok } This is all you need for awesome.
  33. 33. CHALLENGES URL reversal (API endpoints in Backbone Model) Session state awareness in the frontend (like Permissions, Request object)
  34. 34. ALTERNATIVES TastyPie vs Django REST Framework. Backbone vs Angular vs Ember vs .. Check out TodoMVC.com!
  35. 35. WHAT'S NEXT? Currently looking into javascript package management, sockets, .. 1. Grunt 2. Bower 3. NPM 4. Node JS 5. So much to do.....
  36. 36. QUESTIONS? See you around, enjoy your evening at Schuberg Philis! Don't forget to grab a couple of beers while you're at it...
  1. A particular slide catching your eye?

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

×