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
83
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
140
check-mk
creantbits
0
150
Raspberry i Tinc
creantbits
0
140
puppet labs
creantbits
0
120
Other Decks in Programming
See All in Programming
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
620
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.5k
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
terryu16
0
280
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
14
6k
その問い、本当に正しいですか?AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
minodriven
14
6.5k
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
620
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
minodriven
16
8.1k
The Bowling Game- From Imperative to Functional Programming - Part 1
philipschwarz
PRO
0
160
AI時代のUIはどこへ行く?その2!
yusukebe
22
7.7k
ローカルLLMを使ってB2Bサービスを作っていての学び
yaotti
0
220
スマートグラスで並列バイブコーディング
hyshu
0
270
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5.6k
Featured
See All Featured
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
590
Context Engineering - Making Every Token Count
addyosmani
9
1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
990
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Speed Design
sergeychernyshev
33
1.9k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Designing Powerful Visuals for Engaging Learning
tmiket
1
430
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
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!