![webapplog.com
Iterating over an Array
CoffeeScript: JavaScript:
for item, index in arrayObject
iterator(item)
@azat_co
var index, item, _i, _len;
!
for (index = _i = 0,
_len = arrayObject.length;
_i < _len;
index = ++_i) {
item = arrayObject[index];
iterator(item);
}
27](https://image.slidesharecdn.com/untitled-140831122458-phpapp01/75/CoffeeScript-The-Good-Parts-29-2048.jpg)
![webapplog.com
Iterating over an Object
CoffeeScript: JavaScript:
for key, value of object
iterator(value)
@azat_co
var key, value;
!
for (key in object) {
value = object[key];
iterator(value);
}
28](https://image.slidesharecdn.com/untitled-140831122458-phpapp01/75/CoffeeScript-The-Good-Parts-30-2048.jpg)
![webapplog.com
Other CoffeeScript Goodies
• Splats (e.g., “options…”)
• Conditions (if, isnt, not, and, or, unless)
• Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4])
@azat_co
33](https://image.slidesharecdn.com/untitled-140831122458-phpapp01/75/CoffeeScript-The-Good-Parts-35-2048.jpg)
Uploaded byC4Media
CoffeeScript: The Good Parts
The document discusses the advantages and disadvantages of CoffeeScript compared to JavaScript, highlighting its syntactic simplicity, scoping improvements, and class declarations. It includes personal reflections from the presenter, Azat Mardan, along with examples showing how CoffeeScript can enhance productivity for developers. Furthermore, the document mentions notable companies that utilize CoffeeScript and suggests resources for further learning.
More Related Content
Similar to CoffeeScript: The Good Parts
CoffeeScript: The Good Parts
- 1. webapplog.com CoffeeScript: TheGood Parts The good and not so good parts of CoffeeScript in comparison to JavaScript @azat_co 1
- 2. Watch the videowith slide synchronization on InfoQ.com! http://www.infoq.com/presentations /coffeescript-lessons InfoQ.com: News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month
- 3. Presented at QConNew York www.qconnewyork.com Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide
- 4. webapplog.com About ThePresenter @azat_co Azat Mardan • Worked in the US government, startups and corporations • Wrote six books on JavaScript and Node.js (the latest is Practical Node.js by Apress) • Certified yoga teacher and paleo lifestyle enthusiast 2
- 5. webapplog.com Fun story:“CoffeeScript is a solution without a problem” I used to make fun of CoffeeScript, before falling in love with it. @azat_co 3
- 6. webapplog.com @azat_co Wholikes /uses CoffeeScript already? 4
- 7. webapplog.com @azat_co Pleasebe open-minded 5
- 8. webapplog.com Blub Paradox @azat_co 6 ! Blub paradox: devs are satisfied with whatever language they happen to use, because it dictates the way they think about programs. http://en.wikipedia.org/wiki/ Paul_Graham_(computer_programmer)#Blub
- 9. webapplog.com CoffeeScript’s BadRep Most of the people who say bad things about CoffeeScript have never built with it anything relatively large-scale and production-ready. @azat_co 7
- 10. webapplog.com CoffeeScript atDocuSign DocuSign stack: CoffeeScript+Node.js+Backbone.js+Grunt Observation: front-end developers, after only a few weeks of CoffeeScript, didn’t want to go back to regular JavaScript! @azat_co 8
- 11. webapplog.com “CoffeeScript isa little language that compiles into JavaScript.” — coffeescript.org @azat_co 9
- 12. webapplog.com TOC forv1.7.1 Maybe CoffeeScript is not so small anymore? @azat_co 10
- 13.
- 14. webapplog.com Native JavaScriptIssues • == vs === • Functional inheritance vs pseudo-classical • Global variable leakage (missing var) • Many others @azat_co 12
- 15. webapplog.com CoffeeScript: TheGood Parts (some of them) • Syntax: curly braces, parentheses and semicolons • Function declaration: -> and => • Scoping: automatic var • Iterators / comprehensions: replacement of for loops • Class declaration: class operand @azat_co 13
- 16. webapplog.com Syntax •No semicolons, i.e., they are banned • Logical blocks can omit curly braces • Function calls can omit parentheses @azat_co 14
- 17. webapplog.com Why Semicolonsare Bad? (*IMHO) • Extra time&work to put them • If missed, inconsistent but working code • Redundant/not-needed (expect in two cases) • Semicolon Insertion (ASI) @azat_co 15
- 18. webapplog.com Logical Blocks(optional curly braces) @azat_co kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 16
- 19. webapplog.com Function calls console.log object.class ! $('.account').attr class: ‘active’ ! $(‘button’).css color: red “font-size”: “16px” @azat_co 17
- 20. webapplog.com Function Declaration • Skinny arrow (->) saves time typing “function” over and over again • Fat arrow (=>), i.e., no need to use “var that = this” or “var self = this” @azat_co 18
- 21. webapplog.com Function DeclarationElegance CoffeeScript: JavaScript: a = (x,y) -> console.log x+y @azat_co var a; ! a = function(x, y) { return console.log(x + y); }; ! a(10, -5); 19
- 22. webapplog.com Function Declaration:Skinny Arrow CoffeeScript: JavaScript: console.log @ $('div').click ()-> console.log @ console.log(this); @azat_co $('div').click(function() { return console.log(this); }); Prints “window” and DOM elements i.e., “this” changes and @ changes too 20
- 23. webapplog.com Function Declaration:Fat Arrow CoffeeScript: JavaScript: console.log @ $('div').click ()=> console.log @ @azat_co var _this = this; ! console.log(this); ! $('div').click(function() { return console.log(_this); }); Prints “window” both times (i.e., the outer scope) 21
- 24. webapplog.com Scoping •Manual “var” is banned • Variables declared in the scope in which they are encountered first (i.e., the order in which variables used determines their scope). @azat_co 22
- 25. webapplog.com Why autovars are good? Missed “var” Example. CoffeeScript: JavaScript: var a = function (c) { b = 10; return b + c; } console.log(a(0)); ! b is window.b — bad! @azat_co var a = function(c) { var b = 10; return b + c; }; console.log(a(0)); ! b is a private attribute — what we wanted! 23
- 26. webapplog.com Scoping: ExampleI CoffeeScript: JavaScript: b = 1 a = -> b = -1 ! a() console.log b @azat_co var a, b; b = 1; a = function() { return b = -1; }; a(); console.log(b); 24
- 27. webapplog.com Scoping: ExampleII CoffeeScript: JavaScript: a = -> b = -1 b = 1 a() console.log b @azat_co var a, b; a = function() { var b; return b = -1; }; b = 1; a(); console.log(b); 25
- 28. webapplog.com Iterators /Comprehensions (for loops) Awesome time savers! Good for arrays and objects: ! for item, index in arrayObject iterator(item) ! for key, value of object iterator(item) ! ! ! ! ! @azat_co 26
- 29. webapplog.com Iterating overan Array CoffeeScript: JavaScript: for item, index in arrayObject iterator(item) @azat_co var index, item, _i, _len; ! for (index = _i = 0, _len = arrayObject.length; _i < _len; index = ++_i) { item = arrayObject[index]; iterator(item); } 27
- 30. webapplog.com Iterating overan Object CoffeeScript: JavaScript: for key, value of object iterator(value) @azat_co var key, value; ! for (key in object) { value = object[key]; iterator(value); } 28
- 31. webapplog.com Iterators /Comprehensions (for loops) II Many options: ! iterator (item) for item in arrayObject ! iterator item for item in arrayObject ! iterator item for item in arrayObject when item > 0 ! ! ! ! ! ! @azat_co 29
- 32. webapplog.com Class Declaration • In JavaScript classes are absent at all! • CoffeeScript eloquently implements Pseudo-classical inheritance pattern: “new” and capitalized name (“new Animal”, “new Vehicle”, etc.) • Pseudo-classical is hard and cumbersome without CS • CoffeeScript “constructor” method and “super” call @azat_co 30
- 33. webapplog.com Class Example CoffeeScript: class Vehicle constructor: (@name) -> move: (meters) -> console.log @name + " moved #{meters} miles.” ! camry = new Vehicle "Camry" camry.move(50) Output: Camry moved 50 miles. @azat_co 31
- 34. webapplog.com Class Example JavaScript: var Vehicle, camry; ! Vehicle = (function() { function Vehicle(name) { this.name = name; } ! Vehicle.prototype.move = function(meters) { return console.log(this.name + (" moved " + meters + " miles.")); }; ! return Vehicle; ! })(); ! camry = new Vehicle("Camry"); ! camry.move(50); 2x: 6 vs 12 lines of code! @azat_co 32
- 35. webapplog.com Other CoffeeScriptGoodies • Splats (e.g., “options…”) • Conditions (if, isnt, not, and, or, unless) • Arrays and their slicing (arr = [1..10], slicedArr = arr[2..4]) @azat_co 33
- 36. webapplog.com CoffeeScript: TheGood Parts Summary • Syntax: curly braces, parentheses and semicolons • Function Declaration: -> and => • Scoping: automatic var • Iterators / Comprehensions: replacement of for loops • Class Declaration: class operand @azat_co 34
- 37. webapplog.com CoffeeScript: NotSo Good Parts • Learning: 1-2 day, free online ebooks • Compilation: extra build step (use Grunt or similar) • Parentheses: optional and cause misinterpretation • Debugging: use source-maps @azat_co 35
- 38. webapplog.com CoffeeScript ofMy Dreams https://github.com/michaelficarra/coffee-of-my-dreams @azat_co
- 39. webapplog.com How toGet Started $ npm install -g coffee-script $ coffee >… @azat_co 37
- 40. webapplog.com Companies thatuse CoffeeScript @azat_co 38 • GitHub • Dropbox • DocuSign • Airbnb (mobile) • HotelTonight • Basecamp (mobile)
- 41. webapplog.com Further Reading CoffeeScript FUNdamentals: The Better JavaScript http://bit.ly/1nD4dE3 @azat_co 39
- 42. webapplog.com CoffeeScript Ebooks • The Little Book on CoffeeScript (free onine) • CoffeeScript Cookbook (free online) • Smooth CoffeeScript (free online) • CoffeeScript Ristretto (free online) @azat_co 40
- 43. webapplog.com Future /Alternatives @azat_co 41 • Dart (early stage) • TypeScript: MicroSoft project • ECMAScript 6: be careful with old browsers, use shims, fully available after June 2015 • Sweet.js: macros!
- 44. webapplog.com Conclusions @azat_co 42 • Good for enterprise and large team, because it’s easer to have common style, e.g., https://github.com/styleguide/ javascript • Good for developers new to JavaScript and those coming from OOP languages (Java, Ruby) • Cross-browser / old browser support • More productive and happier developers (after learning) • Tested, robust, and available now • Awesome with Backbone.js and Underscore.js
- 45. webapplog.com Session Summary • Native JavaScript Issues • CoffeeScript: The Good Parts • How to Get Started • Future / Alternatives • Conclusions @azat_co 43
- 46. webapplog.com Discussion andQ&A Time @azat_co Questions, thoughts and experiences? 44
- 47. Watch the videowith slide synchronization on InfoQ.com! http://www.infoq.com/presentations/coffeescript -lessons