Your SlideShare is downloading. ×
0
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Coffee Backone Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Coffee Backone Introduction

336

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
336
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 17.09.12 Workshop-Intro Programmiersprache: CoffeeScript [24] Kleine Programmiersprache, die zu JavaScript kompiliert wird Einflüsse: Ruby, Python Features: Bereinigte Syntax, Klassensystem, viele kleine Sprachfeatures Vorteil: Lässt viele Probleme von JS verschwinden, mittlerweile recht populär [25] Nachteil: Geschmacksfrage, Code schwerer zu debuggen [24] http://coffeescript.org/ [25] https://github.com/languageslocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 29/94
  • 2. 17.09.12 Workshop-Intro Warum kein JavaScript? / a om irru? /Wskmthe as 4.otig) 2tSrn(; / reoe as? /Tu drfle nwBoenfle =tu; e ola(as)= re / reoe as? /Tu drfle { =1 }= ; / a asethe? /Wspsir ir i(re{ ftu)   fnto o({   ucinfo)     rtr wf;     eun"t"   }    } fo) o(;localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 30/94
  • 3. 17.09.12 Workshop-Intro JS == WTF / a om irru? /Wskmthe as 4.otig) /SnaErr nxetdtknILGL 2tSrn(;/ ytxro:Uepce oe LEA / reoe as? /Tu drfle nwBoenfle =tu;/ re e ola(as)= re /tu / reoe as? /Tu drfle { =1 /Wdrnc!SnaErr nxetdtkn= }= ;/ ee oh ytxro:Uepce oe = / a asethe? /Wspsir ir i(re{ ftu)   fnto o({   ucinfo)     rtr wf;     eun"t"   }    } fo) /Ahni o e SEgn vroe nE5 o(;/ bäggvndrJ­nie(ebtni S)localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 31/94
  • 4. 17.09.12 Workshop-Intro Kein Problem in CoffeeScript #Wskmthe as  a om irru? 4.otig)#Srn 4" 2tSrn(  tig"2 #Tu drfle  reoe as? { =1#fle }=   as #Tu drfle  reoe as? nwBoenfle= re#fle­Vrlihmt== e ola as =tu  as  egec i = #Wspsir ir  a asethe? i re ftu  fo=­  o  >   rtr wf   eun"t" fo)  tig"t" o( #Srn wflocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 32/94
  • 5. 17.09.12 Workshop-Intro CoffeeScript­Features #Atmtsh a­elrto  uoaicevrDkaain #Sasm ukin­ytx  praeFntosSna #Srkuirn uc htsae  tutreugdrhWiepc #Vraeet ü aaee  ogbwrefrPrmtr #Atmtshsrtr  uoaice eun sur  x=4)­ qae=(  2 >  x*x     #RneKamr pinl  ud lmenotoa egbi  qae13 rens=sur 37localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 33/94
  • 6. 17.09.12 Workshop-Intro CoffeeScript­Features #Kmaa(n eioos o elnmrce pinl  omt udSmkln)vrZieubühnotoa bos=[ ok    {nm:ue,rtn:5}   ae Dn aig    {nm:e as,rtn:4}   ae RdMr aig    {nm:lee abn,rtn:3}   ae AtrdCro aig   ] #Enah opeesos  ifceCmrhnin go  bnm o  nboswe .aig>3 od=(.aefrbi ok hnbrtn  )localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 34/94
  • 7. 17.09.12 Workshop-Intro CoffeeScript­Features #`nes l eesükz i`(uh utl ü wie)  uls`asGgntc u`f ac:`ni`fr`hl` #Ki lme­nak erbiClbcs  enKamrIfrtmh e alak #Eitn­prtr``ac nPoet­okp  xsezOeao ? uhi rpryLous #PsfxI ud`nes)  oti­f(n uls` uls fln nesofie  $.e foaa.x rsl)­  ?gto/jxtt,(eut >   aetrsl frsl?   lr euti eutlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 35/94
  • 8. 17.09.12 Workshop-Intro CoffeeScript­Features zh  ubrwno.rmti ieZh i al=Nme idwpop Gben alen #AlsitenAsrc sls r/ac)  le s i uduk(ebttycth #Fltruhbi`wth idvridr  alhog e sic`wr ehnet sau  wthzh tts=sic al  we 3te enNr  hn2 hni ed  we 2te enGe  hn4 hni ek  es  le   #Vrett egece    ekteeVrlih   i 00>zh  90   f90  al>­00    agelg    lnwii   es   le    rßnaning    göewhsni #Srn­neplto  tigItroain wno.lr D it#sau} idwaet"ubs {tts"localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 36/94
  • 9. 17.09.12 Workshop-Intro CoffeeScript­Features casTe               lse ls ir             #Kasn  eege   nri:0  cntutr @ae=en >  aaee­eals  osrco:(nm  Brd)­ #PrmtrDfut  fis >@nri+         @  ti`  rs:­ eege+       #``=`hs  sib >@nri  1  tr:­ eege=­ casShag xed ir ls clneetnsTe  fis ofr >  rs:(pe)­   ofrsib)   pe.tr(   spr)             ifce spr)   ue(            #enahs`ue(` brd=nwTe( en  e ir) ags  e clneuut) uut=nwShag(Ags ags.rs en uutfisbrd wno.lr uuteege idwaetags.nrilocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 37/94
  • 10. 17.09.12 Workshop-Intro CoffeeScript­Nachteile Große Ausdrucksfreiheit (mehr Nachdenken erforderlich) Whitespace kann nerven (v.a. bei Wrapperfunktionen) Debuggt werden muss das kompilierte JavaScriptlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 38/94
  • 11. 17.09.12 Workshop-Intro Architektur: Backbone.js [35] Clientseitige „MVC“­Komponenten Setzt auf jQuery [36] und Underscore.js [37] auf Backbone liefert: Basisklassen (Models, Collections, Router, Views) und Konventionen Backbone liefert nicht: Struktur/Framework (Erweiterungen in diese Richtung: Aura [38] , LayoutManager [39] , Marionette [40] , Chaplin [41] uvm.) [35] http://backbonejs.org/ [36] http://jquery.com/ [37] http://underscorejs.org/ [38] https://github.com/addyosmani/backbone­aura [39] https://github.com/tbranyen/backbone.layoutmanager [40] https://github.com/derickbailey/backbone.marionette [41] https://github.com/chaplinjs/chaplinlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 61/94
  • 12. 17.09.12 Workshop-Intro Backbone­Klassen in Aktion #etn( rtltenapsbrsAzebl e  xed)esel i nasae bihiddr #BsslseBcbn.oe  aikas akoeMdl Ie  akoeMdletn( tm=Bcbn.oe.xed) #CletossmenMdl  olcin aml oes IeCleto  akoeCleto.xed{ tmolcin=Bcbn.olcinetn   mdl tm  oe:Ie } Ies=nwIeCleto( tm  e tmolcin) #Vessn erKneto l oe  iw idmh ovninasCd IeVe  akoeVe.xed{ tmiw=Bcbn.iwetn   rne:­  edr >   @e.tl@oe.e(tx   $lhm mdlgtet)   $oy)apn $l   (bd.ped@e   rtr hs   eunti }localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 62/94
  • 13. 17.09.12 Workshop-Intro Backbone­Klassen nutzen #Afnu itäei e olcinrairn  u eeEnrg ndrCleto egee Ieso ad,(eMdl > tm.nd nwoe)­  nwIeVe(  e tmiw{   mdl eMdl   oe:nwoe  }.edr)  )rne( #Nu oesalgn.  eeMdl nee.. ie1=nwIe(.e(tx Hlo tm  e tm)stet,al!) ie2=nwIe(.e(tx Wl!) tm  e tm)stet,et #..udi i olcinsekn  . n ndeCleto tce Iesad[tm,ie2 tm.d ie1 tm]localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 63/94
  • 14. 17.09.12 Workshop-Intro Backbone und REST #CletossmenMdl  olcin aml oes IeCleto  akoeCleto.xed{ tmolcin=Bcbn.olcinetn   mdl tm  oe:Ie  ul /p/tm/ #W ig i P?  r:aiies  oletdeAI } Ies=nwIeCleto( tm  e tmolcin) #`ec(`hl ae o e aeqel  fth) otDtnvndrDtnule #DsCni­betetpih e o jur.e(`  a ofgOjk nsrctdmvn`Qeygt) Iesfth{ tm.ec   sces cleto)­  ucs:(olcin >   cleto.ah(tm >   olcinec ie)­    nwIeVe(    e tmiw{     mdl tm     oe:ie    }.edr)    )rne( }localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 64/94
  • 15. 17.09.12 Workshop-Intro Daten speichern <ommto=ps" fr ehd"ot>   <nu ye"et ae"il"   ipttp=tx"nm=tte       lchle=Ttl eurd      paeodr"ie"rqie>   <eetnm=pirt"   slc ae"roiy>     <pinvle""Nerg/pin     oto au=0>idi<oto>     <pinvle""Nra<oto>     oto au=1>oml/pin     <pinvle""Dign<oto>     oto au=2>rned/pin   <slc>   /eet   <nu ye"umt>   ipttp=sbi" <fr> /omlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 65/94
  • 16. 17.09.12 Workshop-Intro Daten speichern #Frua­bednafne  omlrAsne bagn $om)sbi et > (fr.umt(v)­  etpeeteal(  bednsopn  v.rvnDfut)#Asne tpe  nwtm=nwIe(  ee oe ae..  eIe  e tm)#NusMdlbun.  nwtmstil (iptnm=tte])vl)  eIe.e tte,$nu[ae"il".a(  nwtmstroiy,$eetnm=pirt".a(  eIe.e pirt (slc[ae"roiy])vl)  Iesadnwtm   . e olcinhnuüe..  tm.d eIe  #..drCleto izfgn.  nwtmsv(     . n pihr!  eIe.ae)   #..udsecenlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 66/94
  • 17. 17.09.12 Workshop-Intro (Stellt euch hier einfach eine Demo des Gezeigten vor)localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 67/94
  • 18. 17.09.12 Workshop-Intro Gute Sachen Fertige Bausteine (Models, Views, Collections) mit nützlichen Defaults Viel nützliches Zubehör (Underscore, Events, Templating) Konventionen und gleichzeitig viele Freiheitennlocalhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 68/94
  • 19. 17.09.12 Workshop-Intro Offene Fragen Wie strukturieren wir übergeordnete Konzepte wie Module? Wie wird ein „Item“ repräsent? Seite? Widget? Wie managen wir Permissions und Authentifizierung? Backbone gibt uns keine Antworten hierauf!localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 69/94

×