Bootstrap.js?

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

9. None

10. We had the best intentions

11. None

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

22. None

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

30. None

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

50. None

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

65. None

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