 Okay so let's start. I hope you know why I was sitting here. We are here to cover basics for office people. I am Shreya. I work in Red Hat as a software engineer. I have been working with JavaScript for a while now. It's a bit cumbersome as a language. How many of you work with JavaScript? It's two of us. How many of you have worked with JavaScript before? I have worked with JavaScript before. So it was about a year ago in RubyCon in Bandlord. There was this guy who was taking a session on JavaScript. So JavaScript was just very new at the time. It was very interesting. So I thought I'll try it out someday. But you never get to try it out until it's actually forced upon you. So Rails 3.1 has JavaScript as default. So when it's default, I thought okay, if I want to visit RubyCon. So it turned out I thought, maybe somebody will take a session on JavaScript. So I thought okay. But then before sessions could finish, I myself learned about JavaScript. So what is JavaScript? It is a little language which compiles to JavaScript. So C compiles to SMD compiles to JavaScript. So why do we need JavaScript? Because you really don't use JavaScript. In your browser, you will actually, even if you write JavaScript in your browser, you again have to add a JavaScript plugin which converts your JavaScript to JavaScript. Or if you want to get server-side, you need to compile every time, whatever you wrote in JavaScript to JavaScript, you have to actually use it. But then JavaScript itself as a language has all those curly faces and stuff. You don't know where you started, where your function is. You have to finish a curly brace, finish another bracket, another curly brace, and then you figure out where you went wrong. There are syntax errors and all. It's a bit un-maintainable when it gets to like the JavaScript file gets huge, you start feeling the pinch. So JavaScript is there to take the plane away. To install, use gem install or mpm install. Or you could just directly go to the GitHub page and they have instructions there. So hello world, like any other language. So how many of you have been working with Ruby? And how many of you have been working with Python? So if you have been working with Ruby and Python, you will see that as we go along, coffee script will come in naturally. It's not like you have learning a new thing. If you have been working with Ruby Python, you will see that it has taken all the good things from it. So like Ruby has this, you can use a function without the brackets. So I agree with you. So this is another word. So my slides will cover things like how do you stuff in coffee script and how it compares to JavaScript. If you can open this web page, the one with coffee script. Go to coffee script.org. If you go to coffee script.org, you will see that there is a little tab there which has the middle tab. I forgot the name. So whenever you write a coffee script there, it just real-time converts it to JavaScript. So it's a great place to try out your coffee script. So my slides will cover coffee script JavaScript. Next slide. How do you do assignments? Count is equal to 1. If you are from Ruby, you will see that this will come in naturally. List 1.5. So this variable declarations will be done by coffee script set. So almost similar to what you did there except for the semicolons and the list. And if you don't follow me, if you have any questions, just please add the last one. So I just covered how it goes slowly in the more complex slide. It's not very complex. So convents is very Python-ish except for this part. This is very complex. So this compiles to JavaScript in this way. Can everybody back people see what's written there? But you have the slides there, right? Where are you able to open the slides? If you have any problems viewing this, just open your own set of slides then. Because you can see the... So function definition equals to name brackets name. So this again equals to... So how do we write functions in JavaScript? Hello equals to function name. Name is the parameter which it takes. So hello equals to... Don't have right function, just name the parameters. So name will see how complex functions are written. And then an arrow. You can write the arrow to come into the next slide as well as a tab in it. I'll show you next how you do it. So every function, if the last line by default in JavaScript, which is a return function. So even if you don't write return, it acts as return. So it doesn't make a difference for most of your code. But then if you want to avoid it, you can just write a return. So this hello hash name has been broken down into the way JavaScript works. So can you see how... So the way JavaScript combines into JavaScript is very... It does not make it more complex. It's actually as fast and if not faster than you're already in JavaScript. So moving on. Objects. Objects are, in other languages, we call it a hash or a dictionary. So hello equals to name, age. So this tab and definition again from Python. So again where variable declaration is run by coffee. And then rest the same. There's the query places are added at the commas. Existential operator is awesome question mark. The question mark is a coffee script. So see how it converts to JavaScript. If type of is awesome not equals to undefined is awesome not equals to... All these things you have to do yourself handwritten JavaScript when you write JavaScript. But then coffee script is just one is awesome question mark. Is awesome is your variable. And then... It does if not awesome. If like not... I hope this was not equal to undefined. Yes. So when you write if not is awesome. It compiles to is awesome equals to equals to undefined. And equals to equals to undefined. How do you come up with... What do you want to come up with? Equals to equals to undefined. So coffee script has this keyword one is or isn't. So isn't again compiles to not equals to and is compiles to equals to equals to. Swapping of variables. Very naturally with Ruby and Python. You use this square methods. So JavaScript will define a underscore ref. Which is this temporary variable and then do this for you. Comprehence is very important for people who have been writing code in Python and Ruby. And then you have writes in JavaScript code and be like what is why is why am I writing so much code. You just see how one line of... Confiscate compiles to like 11 lines of code here. So what my code does is just read it out. You understand what it does. So it does... Namaste hash guest. For guest in guests where guest is in Shreya. So there is a list of guests and whenever the guest is in me they will read me. So this is how it compiles to JavaScript. So it takes up all loop when it does this ln equals to guest or ln i less than ln i plus plus. Very c plus plus c c plus plus type. And guest is equals to guest of underscore i. So all these temporary variables are underscore. Whatever is... You did not define... But for... And then return results. So greetings will again then have what we need. Is it... So again see... Is it this again compiles to not equals to... You can write not equals to but then isn't just easier to read. There is a high level language. This is there. So... So is this coming naturally to people? If you go ahead you'll see how it's very naturally... So you don't have to really learn confidence in test search. You just have to know how you write a little bit of code and then it just comes naturally to you. Default variable and that's okay. So we have been using default variables in almost like even c plus plus. Namaste people don't have that. So greetings equals to greetings. So default variable is namaste. And guests dot dot dot. So that's a splat. So when I call this function with the list with more than two arguments. Everything except the first argument goes into guests. And if I call greetings... I'll say hi for the first argument. And then... a, b, a, a comma, b comma, c. Not like in a list. I'll pass just an argument. So... I don't have an argument. So... So greetings and then when I call greetings. And hi and then hi comma one. So one comma two comma three again goes into guests. This is how this stack works. Right? And then return the greeting guest for guesting guests. Yeah, so you see what is happening here. Can you see the... No, I cannot see. I define greetings. So this is my greetings definition of greetings. Okay. Greetings equals to namaste. And then guests dot dot dot. So when I call greetings with more than two arguments or more than one argument. Everything except the first argument goes into guests. So guests is the array which has string, raki and rao. You can get my... So... So guests now has string, rao and raki. So return, hi, which I passed as the first argument. Everybody's name. So this is the... You get it? Yes. Indian handbook. So... And this is how... This is what Tava script comes in the background. This is what actually goes to your browser. So do you want me to read this out? We have the slides. Okay. So you try and read it and you will see how it fits in with it. So now, greetings equals to namaste. This is the default variable. Okay. Because Tava script, there is no default variable. You cannot write greetings equals to namaste. And if you don't pass anything. Like for example, if you don't... If it was something like... What's an empty list? Can't pass an empty list. No, even if you... Okay, I can. Okay. Tava script will check whether your first variable greeting is null or not. If it is null, assign the default variable. And then the rest is the splat part. It's the same website. It won't actually... It's just one little line part over there. It says, all your JavaScript output is wrapped inside an anonymous function. So whatever gets compiled. So whenever I am showing you JavaScript. Everything gets embedded into this function. And inside that, there is your code. So how does that... How is it helpful or not helpful? It's helpful in a way that whatever is... Whatever the problem with that is... You cannot define a global variable just like that. So you cannot... Nothing is global. Everything inside this function. So you cannot call it from outside. So whenever you have to define something like that, you need to call it from outside. You define window dot. So everything becomes a property of window. So window dot, link line numbers. And then... This is, again, jQuery. So this is how you write jQuery in JavaScript. So the same way, not click. And then when you give an arrow, it's the anonymous function which is being called. So everything after that is the anonymous function. So this is how it comes. Click. Then function. So the anonymous function. And then return window dot location. This. Okay. Makes sense. So... You see, equals to... Arguments. If you are passing arguments like... Equals to then your arguments and then... Function is actually a variable. And JavaScript is everything's variable. Conditionalities. So conditions. If... Like in a movie where there is an end. So it's actually taking good parts of both the languages. And making a new awesome language. So date equals to if Friday, then sue, else jail. Very English-like. We'll be a bit awkward if you are not doing... C++. How can a language be so English-like? Why you know English-like? And... So option or equals to default. How does this compile? Options not equals to... Option equals to default. So this is again JavaScript. And then... This is how you ran. You... This would also work in JavaScript... Coffee script but then... This is more readable. Don't you agree? Date equals to Friday, then sue, then jail. So this again comes to a... Traction operator. Friday. Question mark. Sue or then jail. This actually makes more sense to me than this. But then... This is how it is. Okay. And... Mode is equals to greatly improved in syncing. If syncing, mode... If syncing, mode is equals to this. So this will like... JavaScript but there will be braces here. So... Okay. There are other simple, simple parts. Can you move forward? If you have any questions, just... Stop me. Okay. Splice and splice. So... Okay. We covered that list. Right? So number is equals to 1 dot dot... 0 dot dot 9. So this is how it compiles. 1, 0, 2, 1, 2, 9. In JavaScript, you have to write it down. Okay. And then... Duplicate this as to number dot dot... dot dot dot number dot length. So number dot length is again the length of the added. And then again... So 2 would be again 1, 0, 2, 9. Mode is equals to 2, 3 dot dot 6. This again you cannot do in JavaScript. So in JavaScript it will compile to number dot slice, 0, number dot 9. But then here... Sorry. Duplicate slice 3 comma 7. So I used to be very confused. I used to do 3 comma 6 and then added a wrong output. And I do 3 comma 7. Okay. Okay. It's minus 1. But then this will be very natural to you. So when you see the output of this will be 3, 4, 5, 6. It doesn't make sense. Slice 3 comma 7 and it gives you 3, 4, 5, 6. This makes more sense. 3, 2 dot dot 6. Slice... So number 3 dot 6 equals to minus 3 dot dot minus 6. So this will compile to minus 3, minus 4, minus 5, minus 6. So what I want to do is... Numbers 3, 4, 5, 6 will be replaced with minus 3, minus 4, minus 5, minus 6. This is actually a very unreadable JavaScript which it compiles. Okay. So add a lot of splice. Apply numbers 3 comma 4 dot 1 cap, minus 3, minus 4, minus 5, minus 6. But then this is... When it comes... When we write stuff we think like this. We don't think like this. While we are actually writing JavaScript, we forget what we are writing. We are trying to do it. So this is how it is very helpful. Classes. We use classes in JavaScript. Not many of us do. But it's helpful. So class... So this is how we write in JavaScript. So it has to function. So there is no actual class. The prototype not read. Which has been defined here. So but we can write very simple classes and you can do inheritance and all everything as well. So that I won't be covering. But class, person, constructor, add name. Add name again is the attribute of this person. So this dot name equals to name. This is how the constructor compiles. So function, person, name, this dot name equals to name. And this is how you write the constructor. Just add name, add name. And after that nothing means it's actually accepting a name. So and then greet. Greeting equals to namaste is the default argument. Alert, greeting, name. Add name. Okay. So I'll do shrink, new person and then greet. This is how you use. What is Shreyan called? Shreyan is the new person. So when you see this, see is the person in brackets Shreyan. Because in Ruby you don't write. You can write brackets as well if you want. But then it's clear. So I don't know whether you'll find it clear. But if you can write it anywhere you want. You can write person, bracket, Shreyan as well. So Shreyan is the, but goes to the constructor. So add name is now Shreyan. And then when you greet, you greet. Okay. What if I copy and show it to you? Okay. Just think it's a new person in brackets Shreyan. Does it make more sense then? Okay. So in Python we write new person and we write brackets. But in Ruby we don't write that. So I'm more used to Ruby so I don't like this. But then both will work actually. So when you say new person in brackets Shreyan, the constructor gets called. And add name gets assigned the name which you're passing. And then when you do string that greet, it calls that and then alerts. Right? I have five minutes. For the 30 minutes to end or for what? Eight minutes to go in there. Okay. So I'm done here. Running copy script from the browser. So you could write script and then you could include this thing which compiles whatever JavaScript you write to JavaScript. So your script type will be text-copy script. And this will look for your text-copy script and compile it to JavaScript. So I won't show this one but I'll show you the compiling part of it. So you never do it this way. You never do it from the browser. But we generally do it from the compiling. So copy minus minus compile my JavaScript file. So there are ways. So here, copy minus minus, watch, compile. So whenever you save your file, a new copy script gets made. Or you use the rails as a pipeline. So this is my code, copy code. What you do is you do copy. So you don't provide an output file. It makes your script into js.js. So this has your JavaScript. And you see I told you everything gets embedded into this anonymous function function. So everything is defined here. So when you define where, greetings, guest, greetings, all these things are only available inside there. You cannot access from outside. So if you want to do something, you want to access from outside to window. So this is my compiling. And then the asset pipeline. So what is asset pipeline? So how many of you have been working on rails? There is two of them. So rails 3.1 has this thing called, in your app you see this new folder called assets. So inside assets you can write some more jokes. You can write all your coffee script inside. So whenever you make a new model, you play a coffee file that's generated here. So all your coffee script goes here. And then in your application.js, you have required tree. You can actually remove it. You can change it to require dot slash books. That would work as well. And then every time you, just write coffee script here. And every time you refresh your page in your development mode, your JavaScript. You can see your JavaScript. For more asset pipeline, go to guides.rupper.com. So this is like the awesome way, how we have rest of us do it. We don't compile coffee script. We just write coffee script here. And just like it behaves as if you are writing JavaScript. Because of your books.js.coffee.coffee is written in the end. And the script pre-polls are called. So every time you write any coffee script here, it goes to books.js. Do you know that in Rails, you could write books.js.coffee.erb. So first the erb gets called, then it gets coffee script and then the coffee gets called. So it's awesome. And then you can also compile coffee. Yes, you can. So Rails and that. So any questions? Any questions if you want to repeat any concept? Just open that page. How many of you got that page? This one. Yeah, so the last one, the last links in my top, the top page, the last link, you could go there. Or a coffee script not to watch it also works. And you can have whatever coffee script comes in your mind and then it gets compiled in JavaScript in front of you. So it's a great place to try out if you are trying out something. That's all from my side if you have any questions. This is for single file. How it is optimized for multiple files. I have 10. So for Rails? Not for Rails. Just coffee script. So for multiple files again you have to, so there is a way in coffee script when you can actually define a library of coffee script files and then compile the entire coffee script directly into one JavaScript file. So that actually compresses your JavaScript also. And again, I have the liberty of saying in Rails, whenever you write whatever coffee script you write, so you have books.js, another .js or coffee, something else. So every time you do that, your application.js will take all your coffee script, combine it to one big huge JavaScript, at least I will make it into one line. So it's actually very small in your production code. It's minimal. So coffee script to JavaScript compilation, if you have any questions about the, if you have any doubts about the complexity it creates in the JavaScript, there is no, it's actually faster or as fast as the handwritten JavaScript you write. Okay? It's actually more similar. Say if you have a loop which is like o, n or n squared or n cubed, it will compile to a loop which is o, n squared or n cubed. It won't be n4 or n, so it takes care of the complexity. It's very logically compiled to JavaScript, so there is no problem from that side. On the other hand, it's much more readable, much more awesome, it's much maintainable. So maintaining 1000 lines of JavaScript and maintaining 100 lines of coffee script, you know the difference when your project gets bigger. Right? Okay, so that's all from me. Any more questions?