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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
creantbits
July 26, 2013
Programming
0
82
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
120
check-mk
creantbits
0
140
Raspberry i Tinc
creantbits
0
140
puppet labs
creantbits
0
120
Other Decks in Programming
See All in Programming
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
380
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
190
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
420
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
5.9k
Oxlintはいいぞ
yug1224
5
1.3k
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
640
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
150
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
170
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
Featured
See All Featured
Navigating Team Friction
lara
192
16k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
sira's awesome portfolio website redesign presentation
elsirapls
0
140
Designing for Timeless Needs
cassininazir
0
130
Building an army of robots
kneath
306
46k
Being A Developer After 40
akosma
91
590k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Leo the Paperboy
mayatellez
4
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Building Adaptive Systems
keathley
44
2.9k
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!