• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CoffeeScript: A beginner's presentation for beginners copy
 

CoffeeScript: A beginner's presentation for beginners copy

on

  • 772 views

A short presentation on CoffeeScript for people who may not have much, or any, experience with it. It is a great way to learn JavaScript, as well as a fantastic syntactic sugar fro those who already ...

A short presentation on CoffeeScript for people who may not have much, or any, experience with it. It is a great way to learn JavaScript, as well as a fantastic syntactic sugar fro those who already know JavaScript.

Statistics

Views

Total Views
772
Views on SlideShare
766
Embed Views
6

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 6

http://dschool.co 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CoffeeScript: A beginner's presentation for beginners copy CoffeeScript: A beginner's presentation for beginners copy Presentation Transcript

    • Intro to CoffeeScript A beginner’s presentation for beginners
    • Don’t I have to be a JSWiz? Not even close. (But it does help) Developer/Designer/Unicorn Little Experience required Simple syntax Better transition from other language patterns Some cool points - Classes - No semicolons (YAY!) - Commas optional - Arrow function notation
    • What is CoffeeScript? CoffeeScript is an alternate syntax that compiles into Javascript. According to the author, it is an ‘attempt to expose the good parts of JavaScript in a simple way. Popularity CoffeeScript has gained much popularity since it’s inception as a GitHub gist in 2009. It has become the ‘x’-script of choice for some projects you might have heard of, including Dropbox and GitHub, as well as many other projects you’ve never heard of. Usage The widespread usage across many web apps makes this language a ‘should do’ for any designer or developer. Even if you don’t decide to use it, you will most likely come across it in a future project. So, DTRT and learn a thing-or- two.
    • # Assignments num = -5 isPositive = true # Objects Setup = -> num: num add: (i) -> num + i # Conditionals num = 5 if isPositive # Arrays arr = [1,2,3,4,5] var num, isPositive, Setup, arr, plusOne; num = -5; isPositive = true; Setup = function() { num: num, add: function(i) { return num + i } }; if(isPositive) { num = 5; } arr = [1,2,3,4,5]; So, what does it look like?
    • # Assignments num = -5 isPositive = true # Objects Setup = -> num: num add: (i) -> num + i # Conditionals num = 5 if isPositive # Arrays arr = [1,2,3,4,5] - # -- for Comments and - ### words -- for Block Comments ### - Semicolons not required! (W00t!! 11!) - Commas are not required, but can be helpful. - Indentation/syntax depended. (Similar in nature to Ruby or Python) - Concise syntax. - Parentheses and Curlies are not required, but can be helpful. - Fun to type! - Easier to read! Example examined.
    • Installation CoffeeScript requires Node.js and the NPM Package Manager or Ruby, which are installed thusly: Node.js -- https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager -- OR -- Mac OS X : brew install node Ubuntu? : apt-get install node Everything : http://nodejs.org/download/ for Installer ackages NPM -- curl https://npmjs.org/install.sh | sh Ruby -- Mac OS X : comes preinstalled Linux : may come preinstalled Windows : http://rubyinstaller.org/
    • Installation, Continued Now we can actually install CoffeeScript! YAY!! Global : $ sudo npm install -g coffee-script Project : $ npm install coffee-script Alternatively, through GitHub (I’ve never done this one) $ npm install -g http://github.com/jashkenas/coffee-script/tarball/master and then, go to the coffee-script directory and type: $ sudo bin/cake install
    • Now what? Let’s play around with some ideas. JavaScript, as of EC5, doesn’t have defined class structures and is mostly a functional, object-oriented language. “But,” I can hear some protest, “you can use things like Traceur and the EC6 Module Transpiler to write JavaScript with classes and other new constructs available in Ecmascript 6.” Well. If you’re using those things, awesome. Even you can benefit from CS!
    • Classes class Car constructor: (@name) -> engine: (valves) -> console.log(@name + “ is a V-#{valves}.” class Ford extends Car engine: -> super 6 class Honda extends Car engine: -> super 4 slowCar = new Honda “Prius” fastCar = new Ford “Cobra” slowCar.engine()
    • And? In JavaScript? var Car, Ford, Honda, fastCar, slowCar, _ref, _ref1, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; Car = (function() { function Car(name) { this.name = name; ({ engine: function(valves) { return console.log(this.name + ' is a V#{valves}.'); } }); } return Car; })(); (etc...) [ http://coffeescript.org/#try:class%20Car%0A%20%20constructor%3A%20(%40name)%20-%3E%0A%20%20%20%20engine%3 ]
    • So that's cool... What other neat things can be done this easily?
    • JSON: teachers = teacher: name: "Patrick D." company: "Rightleaf, LLC" teacher: name: "Phil P." company: "Rightleaf, LLC" Ranges: days = [1..7] Existential Operator: login() if not user? This and This! Splats: giveShips = (one, two, three, rest...) -> addOnesToShip one, 10 addOnesToShip two, 6 addOnesToShip three, 2 for ship in rest addOnesToShip ship, 1 ships = ['rat', 'dog', 'cat', 'bull', 'horse'] giveShips ships... (need ... to ensure assignment)
    • One last "Pretty Cool Thing" "Pretty Cool Thing" Modules!!!! module.exports = (engine, options = {}) -> options.blacklist ?= [] engine = require(engine) if typeof engine is 'string' compile: (template, data) -> template = engine.compile(template, data) (data) -> for k, v of data.params if typeof data[k] is 'undefined' and k not in options.blacklist data[k] = v template(data) (sample taken and modified from https://github.com/mauricemach/zappa/blob/master/src/zappa.coffee for effect)
    • Arg(h)s!! (The good ones) -o Output Directory -c Compile Directory -w Watch this Directory -m Map JS to CS files for Debugging -b Remove safety wrapper (a good thing IMHO) It'll look something like this: v--Command v---to here v--- In all these CS files coffee -mj -o /javascripts/allYourJase.js -cw /coffeescripts/*.coffee ^^--^--Map, Join and Output ^---Compile and Watch for saves Arguments for 'coffee', or Compiling like a pirate
    • Resources CoffeeScript Home Page: http://coffeescript.org Using CoffeeScript with Node and such: http://ristrettolo.gy (online book) Examples: http://en.wikipedia.org/wiki/CoffeeScript http://amix.dk/blog/post/19612 (neet post about CoffeeScript stuff, in general) Cool Tuts: http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript This guy hates it, just in case you want the other point of view. CoffeeScript: less typing, bad readability… http://ceronman.com/2012/09/17/coffeescript-less-typing-bad-readability/