Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Coffescript
Search
creantbits
July 26, 2013
Programming
0
80
Coffescript
Presentació de Pau sobre Coffescript i la seva utilització
creantbits
July 26, 2013
Tweet
Share
More Decks by creantbits
See All by creantbits
Somos lo peor
creantbits
0
95
check-mk
creantbits
0
130
Raspberry i Tinc
creantbits
0
130
puppet labs
creantbits
0
110
Other Decks in Programming
See All in Programming
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Honoとフロントエンドの 型安全性について
yodaka
4
250
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
4 Signs Your Business is Dying
shpigford
182
22k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Gamification - CAS2011
davidbonilla
80
5.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How STYLIGHT went responsive
nonsquared
98
5.3k
Designing for Performance
lara
604
68k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Transcript
Com fer-nos la vida una mica més fàcil programant per
navegadors paurullan@apsl. net Què pot fer CoffeeScript per nosaltres
programar pel navegador és JavaScript
JS com a llenguatge no és dolent
simplement no està pensat pel que s'usa avui
volem augmentar el rendiment humà
CoffeeScript: pre-parser que genera codi JavaScript
generam codi JS manco esforç més clar
No és un complet substitut sinó una ajuda (cal saber
JS)
semblança al SASS/LESS (pre-parser CSS)
The Zen of Python Beautiful is better than ugly. Explicit
is better than implicit. Simple is better than complex. Flat is better than nested. Sparse is better than dense. Readability counts.
objectiu: programar JS amb la mentalitat de Python
CoffeeScript http: //coffeescript. org
instaŀlació apt-get install coffeescript nmp install coffee-script
coffee -wc x. coffee watch + compile
$ = jQuery $(document). ready -> $("#a"). click(-> $("#b"). toggle()
)
(function() { var $; $ = jQuery; $(document). ready(function() {
return $("#a"). click(function() { return $("#b"). toggle(); }); }); }). call(this);
coffee -b x. coffee bare generació de text sense autoexecució
var $; $ = jQuery; $(document). ready(function() { return $("#a").
click(function() { return $("#b"). toggle(); }); }); bare
coffee -wc x. coffee coffee -bcw x. coffee
coffeelint npm install coffeelint http: //www. coffeelint. org/
plugins pels editors eines limitades però més que suficients
http: //coffeescriptcookbook. com CoffeeScript cook book
http: //ristrettolo. gy/ CoffeeScript Ristretto
sense problemes amb jQuery o altres llibreries
inspiració sintàtica de Ruby, Python, Haskell i Erlang
programació una mica més funcional
molt flexible, cal decidir algun idioma nosaltres som pythonistes
ús d'espais per indentació i determinar els blocs
if / else amb indentació if x < 4 console.
log(x) else alert(x)
variables sense punt i coma ni var inicial x =
1
comparació amb rangs x < a < y
funcions amb -> $("#a"). click(-> $("#b"). toggle() )
returns implícits square = (x) -> x*x
returns implícits necessari per l'estil de programació que farem
paràmetres per defecte f = (x, y=3) -> x*y
parèntesis implícits com en Ruby qx. Class. define("x. Application", extend:
qx. application. Standalone, … ) --------------------------- qx. Class. define "x. Application", extend: qx. application. Standalone,
parèntesis implícits readibility counts
diccionaris implícits bros = brother: name: "Gabriel" age: 23 sister:
name: "Carme" age: null
interpolació x = "Pau" y = "Xisco" cadena = "hola
#{x} i #{y}"
intercanvi de variables [x, y] = [1 , 2, ]
[a, b] = [b, a] (semblant al de Python però cal ficar-ho en llistes)
array destructuring weather = (location) -> # aquí obtindríem alguns
valors útils [location, 32, "Caloreta"] [city, temp, forecast] = weather("Palma")
splats tercer_endavant = (a, b, rest. . . ) ->
rest x = tercer_endavant(1 , 2, 3, 4, 5, 6) # x = 3, 4, 5, 6 *args en Python splat de Ruby
splats + destructuring s = "text a xepar per espais"
[inici, cos. . . , final] = s. split(" ") # inici = "text" # cos = ["a", "xepar", "per"] # final = "espais"
generació de rangs [1 . . 4] # [1 ,
2, 3, 4] [1 . . . 4] # [1 , 2, 3] com en Ruby range de Python
generació de rangs //[1 . . 22] var _i, _results;
(fucntion() { _results = []; for (_i = 1 ; _i <= 22; _i++){ _results. push(_i); } return _results; }). apply(this);
slicing n = [1 , 2, 3, 4, ] n[2.
. 4] n[3. . 5] = [-1 , ' a' , "bb"] [a, b. . . , x] = [1 , 2, 3, 4]
for sobre llistes for x in [1 . . 1
0] console. log(x)
list comprehension x*x for x in [1 . . 1
0] item. map((x) -> x*x) de moment no amb diccionaris
operador «@» pel «this» l = [1 , 2, 3,
4, ] h = (a, b, c, d) -> a+b+c+d l. apply(@, h)
sistema de classes class Person constructor: (opt) -> {@name, @age,
@height} = opt
source-maps mapeig del codi CoffeeScript amb el generat útil per
depurar
Preguntes?
gràcies!