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/languages
localhost/~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 wf
localhost/~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 37
localhost/~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)­
?gt'o/jxtt,(eut >
aetrsl frsl?
lr euti eut
localhost/~peter/OpenSource/Pik6/presentations/Workshop 5 Tage/index_is24.html#print 35/94

8. 17.09.12 Workshop-Intro
CoffeeScript­Features
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'
#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 clne'uut)
uut=nwShag(Ags'
ags.rs en
uutfisbrd
wno.lr uuteege
idwaetags.nri
localhost/~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 JavaScript
localhost/~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/chaplin
localhost/~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 mdlgt'et)
$'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.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]
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>
/om
localhost/~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.
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
localhost/~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 Freiheitenn
localhost/~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