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
83
0
Share
Coffescript
Presentació de Pau sobre Coffescript i la seva utilització
creantbits
July 26, 2013
More Decks by creantbits
See All by creantbits
Somos lo peor
creantbits
0
130
check-mk
creantbits
0
140
Raspberry i Tinc
creantbits
0
140
puppet labs
creantbits
0
120
Other Decks in Programming
See All in Programming
〜バイブコーディングを超えて〜 チームで実験し続けたAI駆動開発
tigertora7571
0
170
Liberating Ruby's Parser from Lexer Hacks
ydah
2
2.3k
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
nealle
2
220
AI-DLC Deep Dive
yuukiyo
9
4.9k
アクセシビリティ試験の"その後"を仕組み化する
yuuumiravy
1
180
Surviving Black Friday: 329 billion requests with Falcon!
ioquatix
0
1k
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
150
AIを導入する前にやるべきこと
negima
2
290
VueエンジニアがReactを触って感じた_設計の違い
koukimiura
0
190
エラー処理の温故知新 / history of error handling technic
ryotanakaya
7
1.7k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
380
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
430
Featured
See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.2k
RailsConf 2023
tenderlove
30
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
170
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.4k
Tell your own story through comics
letsgokoyo
1
900
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
The Invisible Side of Design
smashingmag
303
52k
Automating Front-end Workflow
addyosmani
1370
200k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.4k
A Modern Web Designer's Workflow
chriscoyier
698
190k
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!