Bootstrap.js?

Exploring the perception of Bootstrap as a glorified CSS library and talk about the future of Bootstrap ( spoiler: web components )

Transcript

1. @fat May 2012 Bootstrap.js?
2. I’m @fat
3. I work at twitter
4. I write libraries
5. Bootstrap Hogan.js Ender
6. This is usually where I start discussing literature
7. But instead of reading last weekend I decided to go on a roadtrip
8. I drove south with O’Reilly author @maccman
10. We had the best intentions
12. So...we were in Disneyland
13. And I was asked to talk about bootstrap
14. One theme really stood out at Disneyland
15. The importance of perception
16. Forced Perspective, Sound Engineering, etc.
17. What is the perception of Bootstrap?
18. And is this what it should be?
19. Bootstrap is a glorified stylesheet and html template
20. A little history
21. 9 months ago our first public release
23. A library for kickstarting CSS
24. People loved it
25. Really only had a single css asset
26. I loved it
27. 29 days later 1.3 is released
28. We add 7 js plugins
29. I was afraid this was a huge mistake
31. Bootstrap still fundamentally a CSS library
32. JS was provided as the “minimum” required to get you started
33. But a pretty classical approach to writing plugins
34. this bothered me
35. 3 months later we began work for our 2.0 release
36. Hooray a chance to change all the things! \o/
37. Complete rewrite of all the plugins plus add some new ones
38. total of 12 plugins alert button carousel collapse dropdown modal popover scrollspy tab tooltip transitions typeahead
39. remove features and options aggressively
40. Promote the data- api as a first class api
41. This is a fundamentally different approach to existing ui-toolkits
42. JS api going forward to be a second class citizen
43. why? better separation of form and function
44. why? harder for beginners to get in trouble
45. why? less memory intensive
46. why? great for server-side rendering
47. Data api looks like this: data-{{verb}}={{plugin}} - defines main interaction data-target || href^=# - defines target (optional) data-{{option}} - defines class instance options
48. <a data-toggle="modal" href="#myModal" >…</a>
49. release 2.0
51. Bootstrap still considered a glorified stylesheet and html template
52. But it’s not that you can’t do really powerful stuff with JS
53. Like with our LESS, Bootstrap’s JS was built to be extended
54. Turn the data api off - $('body').off('.data-api')
55. Set your own defaults - $.fn.modal.defaults
56. Subclass modules - $.fn.popover.Constructor
57. Retrieve raw plugin instances - $('[rel=popover]').data('popover')
58. Listen to custom events - $('#myModal').on('show', fn)
59. Prevent default execution - e.preventDefault()
60. This is all there
61. but your first thought should not be to use it
62. instead get as far as you can without it
63. and that’s really why the perception is so important
64. In 2.0.2 we actually did change the readme
66. Perhaps it’s a mistake to mention HTML, CSS, JavaScript at all
67. End goal popular user interface components and interactions
68. how do we get there?
69. A new spec Web Components
70. 4 things templates, decorators, custom elements, shadow dom
71. Ability to define isolated and encapsulated widgets
72. Similar to IE Behaviors?
73. HTML not .htc
74. How does this work?
75. Custom Elements allow you to define new components
76. <element extends="button" name="x-bs-button">
77. <button is="x-bs-button"></button>
78. Inside the element tag lots of magical magic
79. Script elements inside <element> executed in different context
80. cool things like generatedConstructor lifecycle listen
81. <template> as document fragments and <content>
82. Scoped styles
83. So all this has to be inside an element tag?
84. yes but that’s actually great
85. <link rel="components" href="bootstrap.html">
86. Bootstrap back to a single asset some day?
87. Popular user interface components and interactions
88. Bootstrap back to a single asset some day?
89. follow @fakeangus