The journey of a new interface

One year ago, Typeform released the first conversational article, a chat-like interface that was embedded into an article giving contextual information while collecting data in a seamless way.

In April we launched the project as a product, a React powered interface. How an embeddable app is made, how did we manage a heavy animated interface, how did we make it feel natural, which tools we used and why?

Let’s take a look at the journey of a new interface.

Transcript

2. — Jepser Bernardino
3. — Frontend Engineer
4. Guatemala — Barcelona
7. The Journey of a new interface
8. The Journey of a new interface how we created a embeddable React app
9. Once upon a time — a new app was created. This was the start of CUI.
12. We like it. — Build it.
13. $ — an easy to embed app based on Typeform’s API should feel part of the content an MVP that needs to feel polished
14. $ — should to be able to interact with sibling embeds must handle orchestrated animations must be customizable should be extendable
15. parent app embeddable app embed script app script
16. The snippet
17. — Architecture
18. Embed App Customizer BFF
19. — Design
20. ———————— ———————— ———————— ———————— ———————— ————————
21. ———————— ———————— ———————— ———————— ———————— ———————— ———————— ———————— ———————— ————————
23. • React • Styled Component • Redux
24. Design — Attempt 1.
25. DOM element > iframe app shell DOM element > iframe
26. • Embed script that adds the app script • App script that loads the application • the application mounts an iframe into a DOM element • the iframe contains the app, styles and communication are managed by the app script • React portals
27. Component(s) DOM Element
29. Styled components is a Singleton, crashed if there was another version of it
30. Design — Attempt 2.
31. Change Styled Component for Emotion ' - because it has Instances
33. Design — Attempt 3.
34. • Embed script mounts an iframe in a DOM element • the iframe is the app, which contains 
 the styles and app logic
35. DOM element > iframe app shell embed script DOM element > iframe <styles /> <styles />
36. — It was a shell
37. — Communication between windows
38. • App initialization • Manage customization • Manage dynamic height • Events
40. old bud, postMessage
41. parent window another window subscribe emits
42. where what who
43. Emitter - app
44. Receiver - parent
45. Receiver - actions const actions = { [CUI_RESIZE_FRAME]: ({ frame, height }) => { frame.height = height }, [CUI_INITIALIZED]: ({ frame }) => { frame.parentNode.classList.remove(CUI_IS_LOADING) } /* ... */ }
46. — In app events
47. Emitter - app events
48. app events const actions = { /* ... */, [CUI_EVENT]: ({ frame, name, detail }) => { const event = createEvent(name, detail) frame.parentNode.dispatchEvent(event) } } export const createEvent = (name, detail = {}) => { const event = new CustomEvent(name, { detail }) return event }
49. Receiver - app events
50. — Animation Orchestration
52. — Staggered Animations
54. • No timeouts or css transition delay • Events interface • Should be composable
55. • CSS Transitions • React Motion • React Spring • React Pose ~4.7kb ~11.6kb ~20.4kb
56. — 1. Syntax
57. import posed from 'react-pose' const AnimatedComponent = posed.div({ enter: {}, exit: {} })) export default ({ condition }) => ( <AnimatedComponent pose={condition ? 'enter' : ‘exit'} /> )
58. import posed from 'react-pose' const AnimatedComponent = posed.div({ enter: {}, exit: {} })) const StyledAndAnimatedComponent = styled(AnimatedComponent)` /* some styles */ ` export default ({ condition }) => ( <StyledAndAnimatedComponent pose={condition ? 'enter' : ‘exit'} /> )
59. import { Motion } from ‘react-motion' <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {interpolatingStyle => <div style={interpolatingStyle} />} </Motion>
60. import { Spring } from ‘react-spring’ <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}> {props => <div style={props}>hello</div>} </Spring>
61. — 2. Animations Interface
62. const AnimatedComponent = posed.div({ enter: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 24 } })
63. const AnimatedComponent = posed.div({ enter: { opacity: 1, y: 0, transition: { y: { type: ‘spring', stiffness: 100 } } }, exit: { opacity: 0, y: 24 } })
64. const AnimatedComponent = posed.div({ enter: { opacity: 1, y: 0, transition: { y: { type: ‘spring', stiffness: 100 } }, delay: ({ i }) => { return i * 300; } }, exit: { opacity: 0, y: 24 } })
65. import { StaggeredMotion } from ‘react-motion' <StaggeredMotion defaultStyles={[{o: 0}, {o: 0}]} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => { return i === 0 ? {o: spring(100)} : {o: spring(prevInterpolatedStyles[i - 1].o)} })}> {interpolatingStyles => <div> {interpolatingStyles.map((style, i) => <div key={i} style={{opacity: style.o}} />) } </div> } </StaggeredMotion>
66. import { Trail } from ‘react-spring’ const items = [...] <Trail items={items} keys={item => item.key} from={{ transform: ‘translate3d(0,24px,0)’, opacity: 0 }} to={{ transform: ‘translate3d(0,0px,0)’, opacity: 1 }}> {item => props => <span style={props}>{item.text}</span> } </Trail>
67. — 3. Composable
68. const AnimatedParent = posed.div({ enter: { x: 0 }, exit: { x: -24 } }) const AnimatedChild = posed.div({ enter: { opacity: 1, y: 0, }, exit: { opacity: 0, y: 24 } }) <AnimatedParent posed={condition ? 'enter' : 'exit'} > <AnimatedChild>text 1</AnimatedChild> <AnimatedChild>text 2</AnimatedChild> </AnimatedParent>
69. const AnimatedParent = posed.div({ enter: { x: 0, staggerChildren: 300, delayChildren: 300 }, exit: { x: -24 } }) const AnimatedChild = posed.div({ enter: { opacity: 1, y: 0, }, exit: { opacity: 0, y: 24 } }) <AnimatedParent posed={condition ? 'enter' : 'exit'} > <AnimatedChild>text 1</AnimatedChild> <AnimatedChild>text 2</AnimatedChild> </AnimatedParent>
70. posed PoseGroup
71. import { PoseGroup } from 'react-pose' const items = [...] <PoseGroup onRest={() => { /* */}} > {items.map(item => ( <Child key={item} onPoseComplete={() => { /* */ }} > {item} </Child> ))} </PoseGroup>
73. const MessageWrap = posed.div({ enter: { opacity: 1, y: 0, maxHeight: 200, transition: props => tween({ ...props, duration: 320, ease: props.key === 'opacity' ? easing.linear : easing.backOut }) }, exit: { delay: 800, opacity: 0, y: 24, maxHeight: 0 }, expand: { maxHeight: '1000px' }, })
75. — Last words
76. • Intersection Observer • Fetch • Custom events • postMessage
77. • Bundlefobia • Bundlesize (~17kb embed, ~120kb app bundle) • Webpack visualizer
78. labs.typeform.com/cui/
79. Thanks — @jepser