Making a Real Chatbot App using Framer X
I’ve been making a real chat-bot app for last 2-months using Framer X, so I thought it’s a good time to write down my thoughts on why I choose Framer X and it’s impressions
Here is the Final App Demo (Link)
I’m really happy to work with Pulsen that making awesome HR survey systems
Pulsen want to make a chatbot service to analyze employees life
They want this chatbot looks more friendly
That’s the reason it has a lot of interaction for each answer and when chat appears
The basic functionality of app though was not that hard to make
It fetches all question and sends answers at the end of surveys
But I should think about how to manage all detail interaction efficiently
In this reason, I decided to use Framer X as my main IDE(Integrated development environment) for this project
Thinking about React State Management
First I add redux to this project to manage states of the app
It smoothly integrated with Framer X, and then soon I found Data of Framer have been worked similarly as React states
So I replaced these redux things with Data value with Override
It has some immutable issues for the first time, but I could use it as my main state management tools after some efforts
It was a quite cool choice
Causes this app doesn’t has that many complex states
All I needs to make this app are just store questions, and each user’s choice as a result
As a result, I easily shared states between components without complex file structure like using Redux or Mobx
Drawing Basic UI elements and flow with Real Question Data
I first drew graphics elements on Framer canvas using vivid color. It made me easily identify areas of each component
Then I added Overrides to change text and visible properties as real question data.
I also made which choice type should be visible now with appearing option texts
Using this way repeatedly, I made basic chatbot flow by user choices like below results
Add Animations on Events and Graphics
Now it’s show time for Framer X
For animation, I mainly use useAnimation Hook & Overrides
Some iterating components like the chat bubble, I made it as a code component and add animate properties to animate automatically when it appears
It was a little bit tricky to get an exact position where user’s choices should go, cause width & height of chat lists always changes
To resolve this, I used React packages called react-measure directly in Framer X
Here is all NPM package list that I used
- framer — 1.0.5
- react — ^16.88
- @framer/benjamin.slider (store package)
- @framer/ruucm.index-frame (store package)
- styled-components
- axios
- lodash
- react-measure
- react-autosize-textarea
- react-helmet
- smoothscroll-polyfill
It’s a really awesome point that I could use whole react communities power in Framer X too
Good Impressions 👍
1. React Standards / Developer Friendly
Basically, you don’t need to change your development styles
You can use all React things that used before
And Framer recently release a tool called ‘Bridge’ for developers
It includes Git-compatible format, Framer CLI, GitHub Actions and more!
It enables me to manage all graphics and codes using Git
2. Live Preview (Mobile Test) & Super Fast Hot Reload
You don’t need to use ngrok or deploy your build files to a staging server to test it your phone
In Framer X, clicking a button at the right top corner makes live server and it loaded fastly with every changes!
3. It makes me write more codes for what really matters than graphics
When you make a simple prototype but don’t want it looks ugly, you need to import Bootstrap lib or Material packages
Using Framer X, you can drag and drop brilliant buttons or the other components from the store, or just draw like photoshop then override it with your codes
You can focus on what really matters at first
I put a Slider (from Benjamin den Boer) on this app by drag & drop
4. Maintenance
I had to change some image assets, cause client wanted to change some looks of the app in the middle of the project
But I don’t need to find where and how I mentioned header image in code forests
I just clicked the layer of header and changed the image!
Isn’t it cool?
5. Built-in Utils, Components
Data
I think it’s a quite convenient way sharing stated between components
And I heard about Framer team are now making a better one that has faster performance
Stack
it’s a really cool React component to make layout based flex CSS property
Responsive
All things in Frame could be responsive by default
I used this feature for the responsive layout of this app too
Bad Impressions 👎
1. Too drastic updates
This project was in duration that Framer Team integrate their main animation library with Pose
So I rewrite all animation codes in meantimes
They continuously remove or add some properties & Hooks still now
2. No router support yet
You can use alternatives like PageComponents, but it's not the same
3. basically IE not supported
I’m not a big fan of IE, but some clients still want to see their websites in IE as you know
4. No Custom Webpack Config
You can’t change it’s Webpack configuration yet
Conclusion
Framer X really reduced tons of time to make interesting Front-end projects that have interactions
It’s also useful to maintain even if your app changes a lot after opens
In Framer X, your codes rendered on the canvas at the same time
And graphic things don’t need to be just png or jpg things now
If you’re a Front-end developer who dealing with parts users see directly, is there more perfect choices than this?
👋 I’m available for projects — Contact Me at ruucm.a@gmail.com
