The DOM is not your Application

CodeMash 2014

Transcript

1. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Here’s something we do all the time…
2. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App Useful Library or API
3. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App Useful Library or API Not a core task Not our code Abstract semantics
4. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Bad. My Amazing App Useful Library or API
5. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Hard to update My Amazing App Useful Library or API
6. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Duplication My Amazing App Useful Library or API
7. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd API Semantics My Amazing App Useful Library or API
8. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App Useful Library or API Wrapper
9. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Better. My Amazing App Useful Library or API Wrapper
10. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Updateable My Amazing App Useful Library or API Wrapper
11. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Abstractable My Amazing App Useful Library or API Wrapper
12. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd App semantics My Amazing App Useful Library or API Wrapper
13. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App Useful Library or API
14. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM
15. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM Wrapper
16. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd The DOM is not your application Noel Rappin / Table XI @noelrap /noelrappin.com CODEMASH_36
17. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM Wrapper
18. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM jQuery?
19. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM jQuery? Wrapper
20. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM Backbone? Ember? Angular?
21. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Category Item Banana Fruit
22. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items = {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option))
23. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items = {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Reading initial values
24. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items = {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Clearing select
25. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items = {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Event handler
26. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd @initListInForm = -> window.items = {} $("#item_list option").each (index, option) -> $option = $(option) unless window.items[$option.data("category")] window.items[$option.data("category")] = [] if $option.data("category") window.items[$option.data("category")].push(option) $("#item_list option").remove() $("#order_category_id").change -> $("#item_list option").remove() category_id = $(this).val() _.each window.items[category_id], (option) -> $("#item_list").append($(option)) Access Query Change
27. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd describe "item List Form", -> describe "with category and item list", -> ! beforeEach -> affix("select#order_category_id") $("#order_category_id").append($("<option>").val("0")) $("#order_category_id").append($("<option>").val("1")) $("#order_category_id").append($("<option>").val("2")) $("#order_category_id").val("0") affix("select#item_list") $("#item_list").append($("<option>").data("category", "1").val(1)) $("#item_list").append($("<option>").data("category", "1").val(2)) $("#item_list").append($("<option>").data("category", "2").val(3)) initListInForm()
28. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd it "extracts items from the initial page load", -> expect(_.pluck(window.items[1], 'value')).toEqual(["1", "2"]) expect(_.pluck(window.items[2], 'value')).toEqual(["3"]) it "removes the original options after extracting", -> expect($("#item_list option").length).toEqual(0) it "adds the proper items on change", -> $("#order_category_id").val("1") $("#order_category_id").change() expect(_.pluck($("#item_list option"), 'value')).toEqual(["1", "2"])
29. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd
30. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Extract to class
31. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelect constructor: -> @items = {} ! initialize: -> this.extractItems() this.setChangeHandler() this.updateItemList() this Extract to class
32. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! extractItems: -> $("#item_list option").each (index, option) => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId ! clearItemList: -> $("#item_list option").remove() ! Access Query Change Extract to class
33. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> $("#order_category_id").change (event) => this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = $("#order_category_id").val() _.each @items[category_id], (option) => $("#item_list").append($(option)) Access Query Change Extract to class
34. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Create Access Methods
35. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd itemList: -> $("#item_list") ! itemListOptions: -> $("#item_list option") ! categoryList: -> $("#order_category_id") Access Query Change Create DOM Methods
36. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> this.itemListOptions().each (index, option) => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId ! clearItemList: -> this.itemListOptions().remove() Access Query Change Create DOM Methods
37. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> this.categoryList().change (event) => this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = this.categoryList().val() _.each @items[category_id], (option) => this.itemList().append($(option)) Access Query Change Create DOM Methods
38. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Extract DOM Class
39. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelectDom itemList: -> $("#item_list") ! itemListOptions: -> $("#item_list option") ! categoryList: -> $("#order_category_id") class @DualSelect constructor: -> @items = {} @dom = new DualSelectDom Access Query Change Extract DOM Class
40. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> @dom.itemListOptions().each (index, option) => this.additemOptionToList(option) ! addItemOptionToList: (option) -> categoryId = $(option).data("category") @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(option) if categoryId Access Query Change Extract DOM Class
41. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd clearItemList: -> @dom.itemListOptions().remove() ! setChangeHandler: -> @dom.categoryList().change (event) => this.updateItemList() ! updateItemList: -> this.clearItemList() category_id = @dom.categoryList().val() _.each @items[category_id], (option) => @dom.itemList().append($(option)) Access Query Change Extract DOM Class
42. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Move Queries
43. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class @DualSelectDom itemList: -> $("#item_list") itemListOptions: -> $("#item_list option") ! itemListData: -> this.itemListOptions().map (index, option) -> {category: $(option).data("category"), value: $(option).val()} ! Access Query Change Move Queries
44. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! categoryList: -> $("#order_category_id") ! categoryValue: -> this.categoryList().val() ! clearItemList: -> this.itemListOptions().remove() ! appendToItemList: (value) -> this.itemList().append($("<option>").val(value)) Access Query Change Move Queries
45. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd extractItems: -> @dom.itemListData().each (index, data) => this.addItemOptionToList(data) ! addItemOptionToList: (data) -> categoryId = data.category @items[categoryId] = [] unless @items[categoryId] @items[categoryId].push(data.value) if categoryId ! Access Query Change Move Queries
46. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd setChangeHandler: -> @dom.categoryList().change (event) => this.updateItemList() ! updateItemList: -> @dom.clearItemList() _.each @items[@dom.categoryValue()], (value) => @dom.appendToItemList(value) Access Query Change Move Queries
47. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Stub for Tests
48. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd describe "item List Form", -> describe "with category and item list", -> beforeEach -> @result = new DualSelect() @result.dom = new TestDom() @result.initialize() ! it "extracts items from the initial page load", -> expect(@result.items[1]).toEqual(["1", "2"]) expect(@result.items[2]).toEqual(["3"]) Stub For Tests
49. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd ! ! it "removes the original options after extracting", -> expect($("#item_list option").length).toEqual(0) ! it "adds the proper items on change", -> @result.dom.categoryList().val("1") @result.dom.categoryList().change() expect(_.pluck(@result.dom.itemList().children(), 'value')).toEqual(["1", "2"]) Stub For Tests
50. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd class TestDom itemListData: -> [{category: 1, data: 1}, {category: 1, data: 2}, {category: 2, data: 3}] ! categoryList: -> change: -> value: 1 ! categoryValue: -> this.categoryList().value ! clearItemList: -> ! appendToItemList: (value) -> Stub For Tests
51. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Widget jQuery and the DOM Wrapper
52. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Amazing App DOM Backbone? Ember? Angular?
53. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Frameworks allow separation
54. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Frameworks don’t enforce it
55. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd My Widget jQuery and the DOM Wrapper
56. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd The DOM is an API
57. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Isolate it from your code
58. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd You can do this in stages
59. http://www.tablexi.com ⦿ http://www.noelrappin.com/mstwjs ⦿ http://www.noelrappin.com/trdd Isolation will make code more readable
60. http://www.noelrappin.com/mstwjs http://www.noelrappin.com/trdd @noelrap CODEMASH_36 http://www.tablexi.com @tablexi