Js Camp Asia 2012 draft

1. NOV 2012 • JS CAMP ASIA Rico Sta. Cruz NO TITLE YET BUT IT’S ABOUT BACKBONE.JS This area is intentionally left mostly blank for the benefit of those sitting at the back. • @ rstacruz ricostacruz.com
2. This area is intentionally left mostly blank for the benefit of those sitting at the back. ricostacruz.com • speakerdeck.com/rstacruz Photo by_chrisuk flickr.com/photos/_chrisuk/6885885149 @ rstacruz
3. S I N G L E • P A G E DEFYING GRAVITY WITH BACKBONE.JS Single-page apps RICO STA. CRUZ APPS
4. DEFYING GRAVITY WITH BACKBONE.JS todomvc.com A to do list app implemented in many frameworks Single-page apps
5. DEFYING GRAVITY WITH BACKBONE.JS todomvc.com A to do list app implemented in many frameworks Single-page apps
6. $ wget https:/ /github.com/addyosmani/todomvc/zipball/1.0.1 $ open http:/ /todomvc.com ! ! DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ AoHT4321! WIFI PASSWORD ( TodoMVC will be used later. DOWNLOAD ADVISORY
7. $ apt-get install nodejs $ brew install nodejs $ open http:/ /nodejs.org ! ! DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ Node.js will be used later. DOWNLOAD ADVISORY Ubuntu OSX + Homebrew Website AoHT4321! WIFI PASSWORD (
8. $ npm install -g grunt $ open http:/ /gruntjs.org ! ! DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ Grunt (NPM package) DOWNLOAD ADVISORY Install via NPM Website AoHT4321! WIFI PASSWORD (
9. S I N G L E • P A G E DEFYING GRAVITY WITH BACKBONE.JS Single-page apps RICO STA. CRUZ APPS
10. DEFYING GRAVITY WITH BACKBONE.JS backbonejs.org What makes the Internet tick Single-page apps
11. • & • DEFYING GRAVITY WITH BACKBONE.JS Single-page apps RICO STA. CRUZ Our problems
12. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ I’m scared to refactor. I might break something.” Testing strategies “
13. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ How do I test JS MVC code? Testing strategies “ Ask who’s familiar about BDD, TDD, etc
14. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Most testing methods boil down to one of 2 categories. T E S T I N G T R I V I A # 2 8 : •
15. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Isolation Integration OR
16. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Integration test example scenario “Should be able to login” do visit “/login” fill_in :username, “sean_mcnamara” fill_in :password, “Kimber00” click_button “Sign in” assert page.has?(“Welcome, Sean!”) end RUBY + CAPYBARA
17. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ
18. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Integration test example RUBY + CAPYBARA scenario “Should be able to login” do visit “/login” fill_in :username, “sean_mcnamara” fill_in :password, “Kimber00” click_button “Sign in” assert page.has?(“Welcome, Sean!”) end
19. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ V M C ••• Integration test example
20. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Unit testing ISOLATION
21. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Intuitively, one can view a unit as the smallest testable part of an application.” en.wikipedia.org/wiki/Unit_test “ “
22. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ describe(“User”, function() { it(“should validate email addresses”, function() { var u = new User({ email: “bad_email@” }); var result = u.save(); // Our validation should prevent saving: expect(result).toBeFalse(); } }); Unit test example JASMINE.JS
23. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ describe(“User”, function() { it(“should validate email addresses”, function() { var u = new User({ email: “bad_email@” }); var result = u.save(); // Our validation should prevent saving: expect(result).toBeFalse(); } }); Unit test example JASMINE.JS
24. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies RICO STA. CRUZ Tools:
25. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies pivotal.github.com/jasmine Pivotal’s BDD framework for JavaScript
26. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies visionmedia.github.com/mocha Test framework for Node and the Browser
27. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies pivotal.github.com/jasmine Pivotal’s BDD framework for JavaScript it("The 'toBe' matcher compares with ===", function() { var a = 12; var b = a; expect(a).toBe(b); expect(a).not.toBe(null); });
28. DEFYING GRAVITY WITH BACKBONE.JS Testing strategies visionmedia.github.com/mocha Test framework for Node and the Browser it("The 'toBe' matcher compares with ===", function() { var a = 12; var b = a; assert.equal(a, b); assert.notEqual(a, null); }); Do a console demo here!
29. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ “I’ve heard of packages that set up JS testing, but most our app is custom-built and I’ve no idea how to integrate them nicely.” “ Client-side testing
30. DEFYING GRAVITY WITH BACKBONE.JS Client-side testing github.com/bradphelan/jasminerice Ruby gem for Jasmine.js integration
31. DEFYING GRAVITY WITH BACKBONE.JS Client-side testing github.com/bradphelan/jasminerice Ruby gem for Jasmine.js integration
32. DEFYING GRAVITY WITH BACKBONE.JS Client-side testing rails g jasminerice:install github.com/bradphelan/jasminerice Ruby gem for Jasmine.js integration
33. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ “Looks convenient. But what does it do exactly?” “ Client-side testing
34. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ How do I set up an in-browser test environment? Client-side testing “
35. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ This is the tricky part. • Client-side testing
36. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ • Client-side testing
37. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ Can testing be automated? “ Setting up Phantom.js
38. DEFYING GRAVITY WITH BACKBONE.JS Setting up Phantom.js RICO STA. CRUZ “Headless browser.” • YOU NEED A
39. DEFYING GRAVITY WITH BACKBONE.JS Setting up Phantom.js phantomjs.org PhantomJS: Headless Website Testing
40. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ How can we sanely manage dependencies? “ AMD — The module standard
41. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ //= require_tree models //= require_tree routers //= require_tree views Your app’s JavaScript manifest. AMD — The module standard
42. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ //= require_tree models //= require_tree routers //= require_tree views Your app’s JavaScript manifest. AMD — The module standard
43. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ You’ll eventually need subclassing. AMD — The module standard PopupView AddServerPopupView ConfirmationPopupView • • • views/popup.js views/add_server_popup.js views/confirmation_popup.js
44. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ //= require_tree models //= require_tree routers //= require views/popup.js //= require views/tooltip.js //= require_tree views You’ll eventually need subclassing. AMD — The module standard
45. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ // Libraries (Hyperchart base classes) // ----------------------------------- //= require lib/hyperchart //= require lib/hyperchart.helpers //= require lib/hyperchart.svg_utilities //= require lib/hyperchart.mixin.has_hover //= require lib/hyperchart.mixin.has_metrics //= require lib/hyperchart.mixin.has_plot_lines //= require lib/hyperchart.mixin.has_tooltip //= require lib/hyperchart.mixin.is_cartesian //= require lib/hyperchart.bar //= require lib/hyperchart.bubbles //= require lib/hyperchart.line //= require lib/hyperchart.pie // App (models) // ------------ //= require application //= require app/realtime //= require app/chart_manager //= require helpers/app_helper //= require helpers/json_helper //= require models/base_model //= require_tree ./models You’ll eventually be screwed. AMD — The module standard // Libraries (other) // ----------------- //= require lib/growl //= require lib/timer //= require lib/uiscreen //= require lib/graph.deadlock //= require lib/i18n //= require lib/msgpack // Views // ----- //= require views/tooltip_view //= require views/popup_view //= require views/info_pane_view //= require views/widgets/widget_item_view //= require views/widgets/hyper_cartesian_widget_view //= require views/widgets/table_widget_view //= require_tree ./views // App // --- //= require_tree ./app //= require_tree ./helpers //= require_tree ./collections //= require_tree ./routers Real example
46. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ AMD — The module standard • Node.js
47. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ COMMONJS STANDARD AMD — The module standard • require()
48. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ AMD — The module standard • var fs = require(‘fs’); if (fs.exists(‘readme.txt’)) {...} COMMONJS STANDARD
49. DEFYING GRAVITY WITH BACKBONE.JS AMD — The module standard wiki.commonjs.org JS Module Loader
50. DEFYING GRAVITY WITH BACKBONE.JS AMD — The module standard wiki.commonjs.org JS Module Loader
51. DEFYING GRAVITY WITH BACKBONE.JS AMD — The module standard wiki.commonjs.org JS Module Loader
52. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ AMD — The module standard • require() CommonJS MODULES STANDARD
53. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ AMD — The module standard • require() define() AMD ASYNCHRONOUS MODULE DEFINITION
54. DEFYING GRAVITY WITH BACKBONE.JS AMD — The module standard github.com/amdjs/amdjs-api/wiki Asynchronous Module Definition API
55. DEFYING GRAVITY WITH BACKBONE.JS AMD — The module standard requirejs.org JS Module Loader
56. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ Minification is a pain. “ Creating build scripts
57. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ How do I pack my JavaScript files for production? “ Creating build scripts
58. DEFYING GRAVITY WITH BACKBONE.JS RICO STA. CRUZ Building things with Grunt.js L E T ’ S B U I L D . • Creating build scripts
59. Photo by _chrisuk flickr.com/photos/_chrisuk/6885885149 pivotal.github.com/jasmine jasmine js test framework visionmedia.github.com/mocha mocha js test framework rubygems.org/gems/jasminerice jasmine integration for rails backbonejs.org official website underscorejs.org grab-bag of javascript goodness todomvc.com to do list apps implemented in mv* gruntjs.com command-line javascript build tool phantomjs.org headless webkit DEFYING GRAVITY WITH BACKBONE.JS References
60. Photo by _chrisuk flickr.com/photos/_chrisuk/6885885149 github.com/amdjs/amdjs-api amdjs api specification wiki requirejs.org require.js amd loader backbonejs.org official website jquery.com the wonderful query ricostacruz.com/backbone-patterns mini-book on common BB patterns js2coffee.org javascript to coffeescript compiler flickr.com has lots of cool photos and stuff DEFYING GRAVITY WITH BACKBONE.JS References
61. Photo by _chrisuk flickr.com/photos/_chrisuk/6885885149 DEFYING GRAVITY WITH BACKBONE.JS References • speakerdeck.com/rstacruz
62. ricostacruz.com this is my site. nadarei.co i work here. we build things for startups. github.com/rstacruz i make things. @rstacruz follow me on twitter! • THANK YOU! Rico Sta. Cruz —