Best Front-End for App with a more Advanced UI?
First, thanks Maarten!
Newbie question here:
I'm a python dev (among othere things) but a front-end + javascript neophte. My dream is to use Solara to build a full-stack application with a beautiful front-end as if the app was a pure React/Next/Vue.js/Nuxt/Angular/... app. I know that I can build a nice data dashboard with Solara but what else would you recommend learning in order to build a really advanced, gorgeous front-end UI for a more full-featured application with Solara? React? Next? Is it easier to integrate React components than, say, PyQT? I want full control over the exact layout of the UI and the ability to create custom components?
Finally, can someone say how Solara compares to Jeremy Howard's FastHTML?
Thanks!
8 Replies
Hey @russmcb!
Currently Solara uses Vue and Vuetify for the front-end of it's components, so that's a natural place to start. You can create fully custom front-end components using the
component_vue decorator, which for example our home page uses. Any arguments of the component function are automatically passed to the front-end and updated when they change on the python side. You can integrate React components through ipyreact, but this will simply inject the react code into the app already running using Vue. We do have a vision of also supporting other front-end libraries in the medium to long term, though.
As for FastHTML, I'm far from an expert since I've never used it myself, but my impression from reading through their docs is that the way we build UIs is similar. However, there seems to be quite a big difference in approach to UI interactions. Solara is much more "batteries-included" - we provide not just the components, but also the reactivity system, like most JS UI frameworks. From the docs it looks like FastHTML focuses on more static sites, using the likes of API endpoints and databases (which can both also be used in Solara) instead of client-side state.Hi @iisakkirotko and thanks for the detailed response. This is helpful.
It sounds like if I am going to commit significant time and energy into leaning a front-end (or full stack) web app environment that can integrate as smoothlly as possible with Solara then Vue.js makes the most sense. And if I built an entire web app with Vue and wanted to integrate my Python logic and the data handling I do in Pandas then I could use Solara as a bridge fairly seamlessly. Does this sound correct to you? I'm assuming that my data sources are limited only to what I connect on the Python side or the Vue.js side, is that also correct?
is it possible to use other UI frameworks for the front end, like PrimeVue or Quasar, or do I need to stick to Vuetify?
So far we only have support for Vuetify and AntDesign (via ipyantd. We have had plans to incorporate other ones, but haven't gotten around to it yet. If you mean Vue-based frameworks in particular, I think it should be possible to build the equivalent pf ipyvuetify for them, but with ipyvuetify being (to my understanding) mostly generated code, I don't know how much of a challenge that would be. I think @mariobuikhuizen might be more knowledgeable?
Yeah, you can use Vue.js libraries and frameworks. See this component as an example: https://github.com/widgetti/solara/blob/master/solara/widgets/vue/gridlayout.vue. For frameworks there is more chance on CSS collisions with the always loaded Vuetify styles in Solara.
Hi @mariobuikhuizen ! It’s been a long time. You did the Jupyter+TradingVue integration for me a few years ago.
Thanks for the feedback. I will finally learn Vue.js properly and plan on building some things that integrate with Solara. AntDesign looks cool. I assume that there is little chance of CSS collisions with AntDesign. Is that correct?
Yes, AndDesign's css seems to be well 'scoped', but vuetify's css might still influence it. But we have not seen any issue so far
Oh hi @russmcb! Nice to hear from you again 🙂 I didn't recognise you by your username.
I still need that tutorial on the TradingVue integration at some point after these past three years. Haha!