SlideShare a Scribd company logo
1 of 15
Download to read offline
CoffeeScript in 5mins
              @mackato - 2011.09.14 #izakaya.js




11   9   15
“CoffeeScript is a little language
               that compiles into JavaScript.”

11   9   15
Pros


               less code
              compile-time code check

              compiles into pure JavaScript



11   9   15
Cons

              require compile process

              little strange syntax

              debugging is too hard,
              yet.

11   9   15
Use Case
              Rails 3.1




11   9   15
Use Case
              Any other JavaScript Frameworks




11   9   15
JS to CoffeeScript
              $(document).ready(function() {
                init();
                some();
                $("a.link").click(function() {
                  $(this).fadeOut("slow", function () {
                    $(this).remove();
                  });
                });
              });




11   9   15
JS to CoffeeScript
              $(document).ready(function() {
                 init()
                 some()
                 $("a.link").click(function() {
                   $(this).fadeOut("slow", function () {
                      $(this).remove()
                    })
                 })
              })




11   9   15
JS to CoffeeScript
              $(document).ready function()
                init()
                some()
                $("a.link").click function()
                  $(this).fadeOut "slow", function ()
                    $(this).remove()




11   9   15
JS to CoffeeScript
              $(document).ready ->
                init()
                some()
                $("a.link").click ->
                  $(this).fadeOut "slow", ->
                    $(this).remove()




11   9   15
JavaScript build is necessary
                       without CoffeeScript

                  concatenate
              <script src="/javascripts/jquery.js"></script>
              <script src="/javascripts/jquery.min.js"></script>
              <script src="/javascripts/application.js"></script>




              <script src="/javascripts/all.js"></script>




11   9   15
JavaScript build is necessary
                          without CoffeeScript

                    minify
                      (function( window, undefined ) {
                        var document = window.document,
                            navigator = window.navigator,
                            location = window.location;




              (function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?
              a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f("
              +">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"||
              d===""){ck||
              (ck=c.createElement("iframe"),ck.frameBorder=ck.width=ck.height=0),c
11   9   15   .appen
JavaScript build is necessary
                       without CoffeeScript

                    concatenate        minify
              js



              js                  js            js



              js



11   9   15
JavaScript build is necessary
                           without CoffeeScript

                        compile concatenate minify
              coffee         js



              coffee         js          js        js



              coffee         js



11   9   15
Cons

              require compile process # not cons

              little strange syntax

              debugging is too hard,
              yet.

11   9   15

More Related Content

What's hot

Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...andreaslubbe
 
Testing MeteorJS using CasperJS
Testing MeteorJS using CasperJSTesting MeteorJS using CasperJS
Testing MeteorJS using CasperJSStephan Hochhaus
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Hervé Vũ Roussel
 
Haibu: dev deployment is fast and easy again
Haibu: dev deployment is fast and easy againHaibu: dev deployment is fast and easy again
Haibu: dev deployment is fast and easy againFrank Rousseau
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End WorkflowDimitris Tsironis
 
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontendAndrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontendOdessaJS Conf
 
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingCasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingX-Team
 
The Peanut Butter Cup of Web-dev: Plack and single page web apps
The Peanut Butter Cup of Web-dev: Plack and single page web appsThe Peanut Butter Cup of Web-dev: Plack and single page web apps
The Peanut Butter Cup of Web-dev: Plack and single page web appsJohn Anderson
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development toolsSimon Kim
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsRyan Weaver
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJSJoseph Scott
 
ECMAScript 6 and the Node Driver
ECMAScript 6 and the Node DriverECMAScript 6 and the Node Driver
ECMAScript 6 and the Node DriverMongoDB
 
Frontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the likeFrontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the likeDamien Seguin
 
Virtual Infrastructure
Virtual InfrastructureVirtual Infrastructure
Virtual InfrastructureBryan McLellan
 
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQueryRemedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQueryTatsuhiko Miyagawa
 

What's hot (20)

Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
 
Testing MeteorJS using CasperJS
Testing MeteorJS using CasperJSTesting MeteorJS using CasperJS
Testing MeteorJS using CasperJS
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS
 
Haibu: dev deployment is fast and easy again
Haibu: dev deployment is fast and easy againHaibu: dev deployment is fast and easy again
Haibu: dev deployment is fast and easy again
 
Automating Front-End Workflow
Automating Front-End WorkflowAutomating Front-End Workflow
Automating Front-End Workflow
 
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontendAndrew Mykhaliuk - Sorry, I need to make a build for frontend
Andrew Mykhaliuk - Sorry, I need to make a build for frontend
 
CasperJS
CasperJSCasperJS
CasperJS
 
CasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated TestingCasperJS and PhantomJS for Automated Testing
CasperJS and PhantomJS for Automated Testing
 
The Peanut Butter Cup of Web-dev: Plack and single page web apps
The Peanut Butter Cup of Web-dev: Plack and single page web appsThe Peanut Butter Cup of Web-dev: Plack and single page web apps
The Peanut Butter Cup of Web-dev: Plack and single page web apps
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
 
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other ToolsCool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
Cool like a Frontend Developer: Grunt, RequireJS, Bower and other Tools
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJS
 
From MVP to a Product
From MVP to a ProductFrom MVP to a Product
From MVP to a Product
 
ECMAScript 6 and the Node Driver
ECMAScript 6 and the Node DriverECMAScript 6 and the Node Driver
ECMAScript 6 and the Node Driver
 
Let's migrate to Swift 3.0
Let's migrate to Swift 3.0Let's migrate to Swift 3.0
Let's migrate to Swift 3.0
 
Frontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the likeFrontend JS workflow - Gulp 4 and the like
Frontend JS workflow - Gulp 4 and the like
 
Ansible 202 - sysarmy
Ansible 202 - sysarmyAnsible 202 - sysarmy
Ansible 202 - sysarmy
 
Virtual Infrastructure
Virtual InfrastructureVirtual Infrastructure
Virtual Infrastructure
 
A Gentle Introduction to Event Loops
A Gentle Introduction to Event LoopsA Gentle Introduction to Event Loops
A Gentle Introduction to Event Loops
 
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQueryRemedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
 

Viewers also liked

CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScriptNone
 
Coffee script grunt
Coffee script gruntCoffee script grunt
Coffee script gruntKien Pham
 
Ruby Made Simple: Blocks Plus Iterators
Ruby Made Simple: Blocks Plus IteratorsRuby Made Simple: Blocks Plus Iterators
Ruby Made Simple: Blocks Plus IteratorsJohn Schmidt
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScriptStalin Thangaraj
 

Viewers also liked (6)

CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
Coffee script grunt
Coffee script gruntCoffee script grunt
Coffee script grunt
 
Ruby Made Simple: Blocks Plus Iterators
Ruby Made Simple: Blocks Plus IteratorsRuby Made Simple: Blocks Plus Iterators
Ruby Made Simple: Blocks Plus Iterators
 
Introduction to CoffeeScript
Introduction to CoffeeScriptIntroduction to CoffeeScript
Introduction to CoffeeScript
 
CoffeeScript
CoffeeScriptCoffeeScript
CoffeeScript
 
Coffee Script
Coffee ScriptCoffee Script
Coffee Script
 

Similar to CoffeeScript in 5mins

Reusing your frontend JS on the server with V8/Rhino
Reusing your frontend JS on the server with V8/RhinoReusing your frontend JS on the server with V8/Rhino
Reusing your frontend JS on the server with V8/RhinoKenneth Kalmer
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasminePaulo Ragonha
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of usStefan Adolf
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebJames Rakich
 
Fullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterFullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterMek Srunyu Stittri
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationAndrew Rota
 
Coffee script final
Coffee script finalCoffee script final
Coffee script finalpriyankazope
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerNic Raboy
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Alain Hippolyte
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용NAVER D2
 
Complex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxComplex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxbobmcwhirter
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development정윤 김
 
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinMarvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinJava User Group Latvia
 
Coffeescript - what's good
Coffeescript - what's goodCoffeescript - what's good
Coffeescript - what's goodJeongHun Byeon
 
CSS Regression Tests
CSS Regression TestsCSS Regression Tests
CSS Regression TestsKaloyan Kosev
 

Similar to CoffeeScript in 5mins (20)

Reusing your frontend JS on the server with V8/Rhino
Reusing your frontend JS on the server with V8/RhinoReusing your frontend JS on the server with V8/Rhino
Reusing your frontend JS on the server with V8/Rhino
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 
Workflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.jsWorkflow para desenvolvimento Web & Mobile usando grunt.js
Workflow para desenvolvimento Web & Mobile usando grunt.js
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Fullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterFullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year later
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Coffee script final
Coffee script finalCoffee script final
Coffee script final
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase Server
 
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack...
 
Npm scripts
Npm scriptsNpm scripts
Npm scripts
 
React Session 1.pptx
React Session 1.pptxReact Session 1.pptx
React Session 1.pptx
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
 
Complex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBoxComplex Made Simple: Sleep Better with TorqueBox
Complex Made Simple: Sleep Better with TorqueBox
 
Hitchhiker's guide to the front end development
Hitchhiker's guide to the front end developmentHitchhiker's guide to the front end development
Hitchhiker's guide to the front end development
 
Gain more freedom when migrating from Camunda 7 to 8.pdf
Gain more freedom when migrating from Camunda 7 to 8.pdfGain more freedom when migrating from Camunda 7 to 8.pdf
Gain more freedom when migrating from Camunda 7 to 8.pdf
 
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinMarvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
 
Coffeescript - what's good
Coffeescript - what's goodCoffeescript - what's good
Coffeescript - what's good
 
Play framework
Play frameworkPlay framework
Play framework
 
CSS Regression Tests
CSS Regression TestsCSS Regression Tests
CSS Regression Tests
 

More from Masakuni Kato

Hamackathon ideathon 2014.02.22
Hamackathon ideathon 2014.02.22Hamackathon ideathon 2014.02.22
Hamackathon ideathon 2014.02.22Masakuni Kato
 
RubyMotionでiOS開発
RubyMotionでiOS開発RubyMotionでiOS開発
RubyMotionでiOS開発Masakuni Kato
 
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介Masakuni Kato
 
スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発Masakuni Kato
 
Hamamatsu.rb.20111210
Hamamatsu.rb.20111210Hamamatsu.rb.20111210
Hamamatsu.rb.20111210Masakuni Kato
 
Twitter bootstrap on rails
Twitter bootstrap on railsTwitter bootstrap on rails
Twitter bootstrap on railsMasakuni Kato
 
リーン・スタートアップ のためのテスト
リーン・スタートアップ のためのテストリーン・スタートアップ のためのテスト
リーン・スタートアップ のためのテストMasakuni Kato
 
Start developing Facebook apps in 13 steps
Start developing Facebook apps in 13 stepsStart developing Facebook apps in 13 steps
Start developing Facebook apps in 13 stepsMasakuni Kato
 
浜松Rails3道場 其の四 View編
浜松Rails3道場 其の四 View編浜松Rails3道場 其の四 View編
浜松Rails3道場 其の四 View編Masakuni Kato
 
浜松Rails3道場 其の参 Controller編
浜松Rails3道場 其の参 Controller編浜松Rails3道場 其の参 Controller編
浜松Rails3道場 其の参 Controller編Masakuni Kato
 
浜松Rails3道場 其の弐 Model編
浜松Rails3道場 其の弐 Model編 浜松Rails3道場 其の弐 Model編
浜松Rails3道場 其の弐 Model編 Masakuni Kato
 
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編Masakuni Kato
 

More from Masakuni Kato (13)

Hamackathon ideathon 2014.02.22
Hamackathon ideathon 2014.02.22Hamackathon ideathon 2014.02.22
Hamackathon ideathon 2014.02.22
 
RubyMotionでiOS開発
RubyMotionでiOS開発RubyMotionでiOS開発
RubyMotionでiOS開発
 
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介
スマートフォンを利用した会員カードシステムサービス「Smaca」のご紹介
 
スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発スターターライセンスではじめるAtlassian開発
スターターライセンスではじめるAtlassian開発
 
Blogging on jekyll
Blogging on jekyllBlogging on jekyll
Blogging on jekyll
 
Hamamatsu.rb.20111210
Hamamatsu.rb.20111210Hamamatsu.rb.20111210
Hamamatsu.rb.20111210
 
Twitter bootstrap on rails
Twitter bootstrap on railsTwitter bootstrap on rails
Twitter bootstrap on rails
 
リーン・スタートアップ のためのテスト
リーン・スタートアップ のためのテストリーン・スタートアップ のためのテスト
リーン・スタートアップ のためのテスト
 
Start developing Facebook apps in 13 steps
Start developing Facebook apps in 13 stepsStart developing Facebook apps in 13 steps
Start developing Facebook apps in 13 steps
 
浜松Rails3道場 其の四 View編
浜松Rails3道場 其の四 View編浜松Rails3道場 其の四 View編
浜松Rails3道場 其の四 View編
 
浜松Rails3道場 其の参 Controller編
浜松Rails3道場 其の参 Controller編浜松Rails3道場 其の参 Controller編
浜松Rails3道場 其の参 Controller編
 
浜松Rails3道場 其の弐 Model編
浜松Rails3道場 其の弐 Model編 浜松Rails3道場 其の弐 Model編
浜松Rails3道場 其の弐 Model編
 
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編
浜松Rails3道場 其の壱 プロジェクト作成〜Rouging編
 

Recently uploaded

Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 

Recently uploaded (20)

Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 

CoffeeScript in 5mins

  • 1. CoffeeScript in 5mins @mackato - 2011.09.14 #izakaya.js 11 9 15
  • 2. “CoffeeScript is a little language that compiles into JavaScript.” 11 9 15
  • 3. Pros less code compile-time code check compiles into pure JavaScript 11 9 15
  • 4. Cons require compile process little strange syntax debugging is too hard, yet. 11 9 15
  • 5. Use Case Rails 3.1 11 9 15
  • 6. Use Case Any other JavaScript Frameworks 11 9 15
  • 7. JS to CoffeeScript $(document).ready(function() { init(); some(); $("a.link").click(function() { $(this).fadeOut("slow", function () { $(this).remove(); }); }); }); 11 9 15
  • 8. JS to CoffeeScript $(document).ready(function() { init() some() $("a.link").click(function() { $(this).fadeOut("slow", function () { $(this).remove() }) }) }) 11 9 15
  • 9. JS to CoffeeScript $(document).ready function() init() some() $("a.link").click function() $(this).fadeOut "slow", function () $(this).remove() 11 9 15
  • 10. JS to CoffeeScript $(document).ready -> init() some() $("a.link").click -> $(this).fadeOut "slow", -> $(this).remove() 11 9 15
  • 11. JavaScript build is necessary without CoffeeScript concatenate <script src="/javascripts/jquery.js"></script> <script src="/javascripts/jquery.min.js"></script> <script src="/javascripts/application.js"></script> <script src="/javascripts/all.js"></script> 11 9 15
  • 12. JavaScript build is necessary without CoffeeScript minify (function( window, undefined ) { var document = window.document, navigator = window.navigator, location = window.location; (function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9? a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f(" +">").appendTo("body"),d=b.css("display");b.remove();if(d==="none"|| d===""){ck|| (ck=c.createElement("iframe"),ck.frameBorder=ck.width=ck.height=0),c 11 9 15 .appen
  • 13. JavaScript build is necessary without CoffeeScript concatenate minify js js js js js 11 9 15
  • 14. JavaScript build is necessary without CoffeeScript compile concatenate minify coffee js coffee js js js coffee js 11 9 15
  • 15. Cons require compile process # not cons little strange syntax debugging is too hard, yet. 11 9 15