Enter your keyword

[Building a chatbot UI] React.js + Framework7 – tips and tricks

[Building a chatbot UI] React.js + Framework7 – tips and tricks

[Building a chatbot UI] React.js + Framework7 – tips and tricks

This combo is the one we chose for the frontend aspect of a conversational UI project we’ve been working on lately. While not considering myself an expert in neither React nor Framework7, I think I’ve fallen into enough traps and pitfalls (and get myself out of them in some miraculous ways) to make myself of some use to the frontend developers looking for a quick and clean technology to make a web app UI that follows the design principles of either the iOS theme or the Android Material Design theme.

Following are a few notes I think every one involving himself/herself with this frontend stack should be aware of.

Not everything is as it seems

If you’ve picked Framework7 as your weapon of choice, you’ve undoubtedly gone through some of the documentation and marveled at the things you can do with it. Things are not as pretty when you open up the React documentation for the framework though. You will notice that there are far fewer React components, meaning not every F7 component translates to its equal React counterpart. For example, the wholesome F7 (Framework7) dialog component is split into several smaller components, such as confirm, alert, and prompt, and these aren’t even covered in the React docs. But not all is lost, as most (if not all) of the ordinary JavaScript components can be created in React using the Framework7 app instance, which brings me to the following point.

The Framework7 app instance

I think this is one of the most important things I’ve learned about the React version of Framework7. For one, the Framework7 app instance is how you create and control many of the components in F7 in a procedural manner. Here is an example of how you go about using this object in a pure JavaScript app:

If you analyze this code, you can see that we are procedurally creating an html element, assigning it event handlers at the same time, and also linking it to an already existing html element that will trigger the popup on click. But unlike the verbose documentation for the pure JavaScript version of F7, the React documentation doesn’t quite do the job of explaining how to go about getting your hands on this crucial object and is instead redirecting you to the pure JS documentation. Luckily, you have me to spend countless hours searching through github issues and voila, here is how you do it:

Now isn’t that a bunch of convoluted nonsense? I won’t go into the details of how it works since it makes use of the React context, which is somewhat of a forbidden land and that is all beyond the scope of this article, but it works, and that is all that matters. So what does that code do exactly, and why is it so necessary? Well, it makes use of the F7 app instance to create a React component, namely a preloading screen, which is what you would normally show to the user when waiting for some asynchronous action to complete, like logging in or fetching a bunch of data. And although you can procedurally create components using crafty React state management, you will undoubtedly find yourself in situations where you need to do that from a JavaScript environment, like the componentDidMount method, or some other custom functions of a component.

But don’t just go and copy-paste this snippet into your app now, cause that will throw “Undefined variable” error. You also have to observe and apply the following code in order for the above code to actually work.

You need to do it like this for each of your components in which you make use of the app instance.

console.log(f7App) FTW

Now if you try to find all the things you can do with the F7 app instance in the official documentation, you might be surprised as there is no explicit description of what precisely is stored in that object. This is why one must use the ways of the console.log() (see the second code snippet for the usage) to print the object in the browser log and see for yourself the methods belonging to the instance and their parameters.


There are a lot more functions in this list, and I think you will find openModal() and closeModal() to be irreplaceable. Make sure you go through this list at least a few times and make note of all of them so you are sure what Framework7 can and cannot do for you. You don’t want to waste time making hand-made components when they already exist, and will probably work better than your own.

Don’t forget to follow us on Medium

Still, have some questions? Fill out our contact form or send us an email at contact@buildermind.com!

No Comments

Post a Comment

© BuilderMind™ is owned and operated by Evolution IT inc. Atlanta GA | Privacy Policy
This work is licensed under a Creative Commons Attribution 4.0 International License.