Django as your Backbone

4,460 views

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
10 Likes
Statistics
Notes
No Downloads
Views
Total views
4,460
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
45
Comments
3
Likes
10
Embeds 0
No embeds

No notes for slide

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

×