Paul Campbell — A Modern Approach to Third-Party Embedded Widgets (Turing Fest 2018)

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.

Transcript

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.