Embeddable widgets have proliferated the web since JavaScript was born in the mid-nineties, and even before. Since the days of CGI counters, we have come a long way, with companies like Intercom and Stripe providing drop-in code to render components that provide rich and interactive experiences within customers’ existing sites. At Tito, we have provided an embeddable widget since early on. When it came to rewriting it, we wanted to keep the things that made it great: a simple drop-in native-like web component that was easy to customise with CSS and integrate with JavaScript hooks. Our secondary goals were higher level. We wanted an easy to use codebase, and a widget that could be the primary code that we used on our own checkout pages. We also wanted to hook in to the modern ecosystem of JavaScript package managers, bundlers and modules. This talk will explore the process of upgrading an older widget to a modern codebase and framework, some of the advantages to be gained, and some of the challenges faced.

1. A Modern Approach to
Third-Party Embedded
Widgets
Paul Campbell, CEO & co-founder, Tito

2. The Bullshit Web
https://pxlnv.com/blog/bullshit-web/

3. The Bullshit Web
https://pxlnv.com/blog/bullshit-web/

4. Don’t do it.
The end.

5. A bit of background

6. Tito

8. Old Stack:
Rails + Backbone +
CoffeeScript + Custom

12. New Stack:
Rails + Vue.js + ES6 + Custom

13. Modern!

14. All of the Widgets

15. The hit counter
(from http://www.reliablecounter.com/)
The Hit Counter

16. The form post
The form POST, i.e. PayPal

17. Google Analytics

18. Google Analytics

19. Google Analytics
Create a queue function

20. Google Analytics
Create a script tag, set src

21. Google Analytics
Insert script tag before the first script tag

22. Social widgets etc.

23. Twitter Timeline

24. https://platform.twitter.com/widgets.js

27. Facebook Like Button
Facebook Like Button

28. Facebook Like Button

29. Facebook Like Button
wut?

30. Facebook Like Button

31. Facebook Like Button
Initialize variables, fail fast

32. Facebook Like Button
Create script element + add before first <script>

33. Facebook Like Button
Use data-attributes for config

35. Google +1 Button

36. Google +1 Button

37. Google +1 Button

38. Stripe Checkout

39. Stripe Checkout

40. Stripe Checkout

41. Stripe Checkout

42. Intercom Messenger

43. Intercom Messenger

44. Settings in a global

45. Fail fast, create queue

46. Add script tag before first etc.

47. Feature detection in a snippet

48. Patterns
• HTML element to fill/replace
• Optionally, set up a queue
• Global or inline tags for config
• Insert additional <script> before the first <script> tag

49. What makes a
modern widget?

50. Simple, easy to use

51. Drop-in,“just works”,
but configurable

52. Async loading

53. Modern JavaScript
syntax & features

54. Scaleable

55. No JS

56. Example app:
Modern Hit Counter

57. SVG (obviously)

58. Lots of benefits

59. Sample Implementation
Server

60. Sample Implementation
Server Host

61. Sample Implementation

62. e.g. Starwavatar

63. e.g. Starwavatar

64. http://starwavatars.global.ssl.fastly.net/avatars/ed005058da8ad6798b9253567b395ea.png

65. https://github.com/teamtito/starwavatars

66. A Sprinkle, i.e. form POST

67. Example app:
Register Interest Form

68. Form POST

69. Sample Implementation
Server

70. Sample Implementation

71. Sample Implementation

72. Sample Implementation

76. Oh, so easy.

77. The Embedded App

78. Deep breath

79. Let’s start simple.

80. Simple Example

85. Implementation

86. Implementation

87. Implementation

88. Implementation

89. Implementation

90. Implementation

91. Implementation

92. Implementation

93. Implementation

94. Implementation

95. Pros & Cons
• Pros
• Simple
• Use modern JavaScript features, with limited fallbacks
• Dead easy to get started
• Control
• 2kb filesize
• Cons
• No bundling
• Can get out of hand quickly

96. Stop!

97. Node.js

98. npm
https://docs.npmjs.com/getting-started

99. Webpack
https://webpackjs.org/concepts
https://webpack.js.org/guides/author-libraries/

100. Babel
https://babeljs.io/docs/en

101. Vue.js
https://vuejs.org/v2/guide/

102. Modular Approach

103. Modular Approach

104. Modular Approach

106. Wait!

107. Tooling

108. Directory Structure

109. Directory Structure

110. package.json

111. package.json

112. package.json

113. package.json

114. package.json

115. package.json

116. package.json

117. package.json

118. package.json

119. package.json

120. package.json

121. Directory Structure

122. Directory Structure

123. Directory Structure

124. Directory Structure

125. Oh, webpack.

126. webpack.config.js

127. webpack.config.js

128. webpack.config.js

129. webpack.config.js

130. webpack.config.js

131. webpack.config.js

139. Whew.

140. Implementation

141. Implementation

142. Pros & Cons
• Pros
• Split code into logical components
• Use modern JavaScript features
• Dependency management
• Cons
• Complexity of setup
• 145kb filesize

143. Framework Approach

147. Implementation

148. Implementation

149. New Usage

150. App.vue

151. App.vue

152. App.vue

155. Pros & Cons
• Pros
• All the benefits of modular approach
• Rapid development
• Rich ecosystem
• “Easy”to add validations, routes, transitions etc. & more
• Cons
• Complexity of setup
• Bloat, bloat and more bloat
• 450kb filesize

156. Listen!

157. Server App
Local Development
Widget App Host App

158. Server App
Local Development
Widget App Host App
http://localhost:7045 http://localhost:53473 http://localhost:4057

159. Try it at home!
• https://github.com/paulca/turing-counter
• https://github.com/paulca/turing-form
• https://github.com/paulca/turing-form-respond
• https://github.com/paulca/turing-widget
• https://github.com/paulca/turing-widget-host

160. Takeaways

161. Embedded JavaScript
apps are hard

162. Do you really need
to do this?

163. The best of times,
the worst of times

164. The future is bright,
and almost here.

165. There are no rules.
Have fun.