Geek-End: Your New JavaScript Style Guide

The talk I am giving at Geek-End on the programming language CoffeeScript

Transcript

1. Saturday, November 10, 12
2. CoffeeScript: Geek End Your New JS Style Guide 11.10.2012 Saturday, November 10, 12
3. whoami Saturday, November 10, 12
4. Coffee @jedschneider @modeset_ Saturday, November 10, 12
5. introduction understanding the dialect Saturday, November 10, 12
6. introduction _UNDERSTANDING THE DIALECT start with javascript describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); }); Saturday, November 10, 12
7. introduction _UNDERSTANDING THE DIALECT remove ; and {} describe("A suite is just a function", function() var a it("and so is a spec", function() a = true expect(a).toBe(true) ) ) Saturday, November 10, 12
8. introduction _UNDERSTANDING THE DIALECT change functions, vars, parameter declarations describe "A suite is just a function", -> it "and so is a spec", -> a = true expect(a).toBe(true) Saturday, November 10, 12
9. introduction _UNDERSTANDING THE DIALECT arguably better javascript // Generated by CoffeeScript 1.3.3 (function() { describe("A suite is just a function", function() { return it("and so is a spec", function() { var a; a = true; return expect(a).toBe(true); }); }); }).call(this); Saturday, November 10, 12
10. introduction _UNDERSTANDING THE DIALECT arguably better javascript // Generated by CoffeeScript 1.3.3 (function() { describe("A suite is just a function", function() { return it("and so is a spec", function() { var a; a = true; return expect(a).toBe(true); }); }); }).call(this); describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); }); Saturday, November 10, 12
11. mode set introduction _WHO WE ARE Saturday, November 10, 12
12. introduction _WHO WE ARE our team of developers have won numerous industry awards and accolades. we are regarded as technical experts and leaders in the web and mobile app development community. http://coderwall.com/team/mode-set we are the best at what we do Saturday, November 10, 12
13. introduction _WHO WE ARE wrapping external javascript API’s backbone.js, spine.js, resource based web apps pure javascript projects Mercury : http://jejacks0n.github.com/mercury/ Paranorman Mobile Site : http://vimeo.com/52507615 how we use coffeescript Saturday, November 10, 12
14. Language Features HOW TO USE IT Saturday, November 10, 12
15. language features _HOW TO USE IT a = true b = 1 + 1 c = d = [1,2,3] [e, f] = [1,2,3] g = { key : "value" } h = key : "value" i = key : "value" literals Saturday, November 10, 12
16. language features _HOW TO USE IT arr = [1,2,3] three = arr[2] if arr.length >= 3 three = if arr.length >= 3 then arr[2] else "three" if arr.length >= 3 arr[2] else "three" three = "three" unless two?.length > 1 conditionals Saturday, November 10, 12
17. language features _HOW TO USE IT square = (x)-> x * x square = (x)-> x * x $(document).ready -> $("h1").text("hello world") full_name = (first, last)-> [first, last].join(" ") full_name( ['j','e','d'].join() "schneider" ) join_args = (args...)-> args.join(" ") join_args("jed", "schneider") functions Saturday, November 10, 12
18. language features _HOW TO USE IT first_name_last = (first, args...)-> "#{args.join(" ")}, #{first}" first_name_last("billy", "bob", "thorton") person = first : "Jed" last : "Schneider" full_name = (person)-> first = person.first last = person.last [first, last].join(" ") full_name = ({first, last})-> [first, last].join(" ") functions Saturday, November 10, 12
19. Interesting Features Saturday, November 10, 12
20. interesting features geekEnd.Video ?= {} class geekEnd.Video.Session extends Backbone.Model urlRoot : "/api/video/session" sessionId : -> @get('session_id') token : -> @get('token') namespaces and classes Saturday, November 10, 12
21. interesting features regex = /(\d{3})-(\d{3})-(\d{4})/ regex = /// (\d{3}) # area code -(\d{3}) # local -(\d{4}) # last_4 /// [match, area_code, local, last_4] = "555-867-5309".match(regex) "#{local}-#{last_4}" #=> 867-5309 regular expressions Saturday, November 10, 12
22. interesting features materials = ["wheat", "salami", "cheese", "lettuce"] [bread, meat, ingredients...] = materials red = "red" blue = "blue" [blue, red] = [red, blue] pattern matching Saturday, November 10, 12
23. interesting features names = [ first : "jed" last : "schneider" , first : "matt" last : "daemon" ] getFirst = (ob)-> ob.first getFirst(name) for name in names _.map(names, getFirst) _.map(names, (n)-> n.first) list comprehensions Saturday, November 10, 12
24. interesting features class GeekEnd.Maps.StoreList extends Spine.Controller search: (e)-> e.preventDefault() GeekEnd.Store.bind 'refresh', => @addStores.apply(@, arguments) @bind 'addedStores' => @updateHeaderResults(arguments...) @search_results = GeekEnd.Store.near(@input.val()) addStore: (store)-> @storeList.append @view('store')(store) addStores: (stores)-> @clearResults() @addStore store for store in stores or @search_results @trigger 'addedStores' function binding (fat arrow) Saturday, November 10, 12
25. Adopting CoffeeScript Saturday, November 10, 12
26. challenges work ow changes language barriers timing of introduction (now, or in a refactor?) maintenance and support issues Saturday, November 10, 12
27. challenges yep, you have to compile, but it doesn’t have to be hard. `coffee -wc src/*.coffee -o js/` codekit or live reload built into your web framework; e.g. assets pipeline in Ruby on Rails more complicated solutions for more complicated scenarios: require.js, instant coffee work ow changes Saturday, November 10, 12
28. challenges Lexical scope (maybe the only valid argument) TIMTOWTDI (because that never happens in JS) Noobies will make a mess (because that never happens in JS) I don’t know JavaScript, how can I write CoffeeScript (use CS to learn JS) I’m worried about how my CoffeeScript compiles (lots of tools available, probably in your fav editor) language barriers Saturday, November 10, 12
29. challenges lexical scope https://github.com/raganwald/homoiconic/blob/master/2012/09/lexical-scope-in-coffeescript.md x = 'global' do -> x = 'labolg' do (x = 'function') -> console.log x # => 'function' do -> console.log x # => 'function' console.log x # => 'labolg' Saturday, November 10, 12
30. challenges “CoffeeScript is cool, but I’m going to do it when I refactor” “I can’t introduce CoffeeScript when I have all this JavaScript” “No one else in the office knows CoffeeScript” <script src="lib/vendor/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="lib/myawesome.js" type="text/javascript" charset="utf-8"></script> <script src="lib/depends_on_myawesome.js" type="text/javascript" charset="utf-8"></script> timing Saturday, November 10, 12
31. challenges // Generated by CoffeeScript 1.3.3 for (_i = 0, _len = names.length; _i < _len; _i++) { name = names[_i]; getFirst(name); } // Generated by CoffeeScript 1.3.3 _.map(names, getFirst); “I’m married to CoffeeScript for life” support getFirst(name) for name in names _.map(names, getFirst) Saturday, November 10, 12
32. thank you. Saturday, November 10, 12