Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Coffescript
Search
creantbits
July 26, 2013
Programming
86
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
150
check-mk
creantbits
0
160
Raspberry i Tinc
creantbits
0
150
puppet labs
creantbits
0
120
Other Decks in Programming
See All in Programming
LoopHub - ローカルで動く GitHub で、AI と共同開発
jugyo
1
490
巨大モノリシックアプリ モダン化大作戦
ktcryomm
0
480
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
ayumu_yamaguchi
1
210
まだ間に合う!今年の夏こそSchemeのマクロ展開器を完全理解!
omasanori
0
650
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
140
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
140
ALB ログから Trace を気合で繋げる技術
fohte
7
880
typoなんかねぇよ
raspython3
0
680
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
danybony
1
230
Foundry Localでエージェント開発
seosoft
0
160
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
akase244
0
120
WebMCP Challenge に星空観察アプリで参加した話
okajun35
0
120
Featured
See All Featured
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.1k
ラッコキーワード サービス紹介資料
rakko
1
4.8M
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
690
Scaling GitHub
holman
464
140k
It's Worth the Effort
3n
188
29k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.5k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
430
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
490
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
Thoughts on Productivity
jonyablonski
76
5.4k
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!