Coffee Backone Introduction

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/languages

localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 29/94


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(;



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äggvndrJnie(ebtni S)



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#fleVrlihmt==
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 wf



CoffeeScriptFeatures
#Atmtsh aelrto
uoaicevrDkaain
#Sasm ukinytx
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 37



#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  )



#`nes l eesükz i`(uh utl ü wie)
uls`asGgntc u`f ac:`ni`fr`hl`
#Ki lmenak erbiClbcs
enKamrIfrtmh e alak
#Eitnprtr``ac nPoetokp
xsezOeao ? uhi rpryLous
#PsfxI ud`nes)
otif(n uls`
uls fln
nesofie
$.e foaa.x' rsl)
?gt'o/jxtt,(eut >
aetrsl frsl?
lr euti eut



zh  ubrwno.rmt'i 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 hn'i ed
we 2te enGe'
hn4 hn'i ek
es
le
  #Vrett egece
   ekteeVrlih
  i 00>zh  90
  f90  al>00
   'agelg
   lnwii'
  es
  le
   'rßnaning
   göewhsni'

#Srnneplto
tigItroain
wno.lr D it#sau}
idwaet"ubs {tts"



casTe               lse
ls ir             #Kasn
eege
nri:0
cntutr @ae='en' >  aaeeeals
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 clne'uut)
uut=nwShag(Ags'

ags.rs en
uutfisbrd
wno.lr uuteege
idwaetags.nri



CoffeeScriptNachteile
Große Ausdrucksfreiheit (mehr Nachdenken erforderlich)
Whitespace kann nerven (v.a. bei Wrapperfunktionen)
Debuggt werden muss das kompilierte JavaScript



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/backboneaura
[39] https://github.com/tbranyen/backbone.layoutmanager
[40] https://github.com/derickbailey/backbone.marionette
[41] https://github.com/chaplinjs/chaplin



BackboneKlassen 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 mdlgt'et)
  $'oy)apn $l
  (bd'.ped@e
  rtr hs
  eunti
}



BackboneKlassen nutzen
#Afnu itäei e olcinrairn
u eeEnrg ndrCleto egee
Ieso ad,(eMdl >
tm.n'd' nwoe)
nwIeVe(
e tmiw{
  mdl eMdl
  oe:nwoe
}.edr)
)rne(

#Nu oesalgn.
eeMdl nee..
ie1=nwIe(.e(tx' Hlo'
tm  e tm)st'et,'al!)
ie2=nwIe(.e(tx' Wl!)
tm  e tm)st'et,'et'

#..udi i olcinsekn
. n ndeCleto tce
Iesad[tm,ie2
tm.d ie1 tm]



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
#DsCnibetetpih 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(
}



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>
/om



Daten speichern
#Fruabednafne
omlrAsne bagn
$'om)sbi et >
(fr'.umt(v)
etpeeteal(  bednsopn
v.rvnDfut)#Asne tpe
nwtm=nwIe(  ee oe ae..
eIe  e tm)#NusMdlbun.
nwtmst'il' (iptnm=tte])vl)
eIe.e tte,$'nu[ae"il"'.a(
nwtmst'roiy,$'eetnm=pirt"'.a(
eIe.e pirt' (slc[ae"roiy])vl)
Iesadnwtm   . e olcinhnuüe..
tm.d eIe  #..drCleto izfgn.
nwtmsv(     . n pihr!
eIe.ae)   #..udsecen



(Stellt euch hier einfach eine Demo des Gezeigten vor)



Gute Sachen
Fertige Bausteine (Models, Views, Collections) mit nützlichen Defaults
Viel nützliches Zubehör (Underscore, Events, Templating)
Konventionen und gleichzeitig viele Freiheitenn



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!


Coffee Backone Introduction

Weitere ähnliche Inhalte

Andere mochten auch

Coffee Backone Introduction