docs: how to add new (frontend) components #847
+256
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
iisakkirotko
requested changes
Dec 2, 2024
|
|
||
| ## Build a Frontend component | ||
|
|
||
| Sometimes it is beneficial to build a component directly in the frontend. This are several reasons for this: |
There was a problem hiding this comment.
Suggested change
| Sometimes it is beneficial to build a component directly in the frontend. This are several reasons for this: | |
| Sometimes it is beneficial to build a component directly in the frontend. There are several reasons for this: |
|
|
||
| Sometimes it is beneficial to build a component directly in the frontend. This are several reasons for this: | ||
|
|
||
| * Lower latency/performance: If a component is very performance-critical, it might be beneficial to build it in the frontend as it does not require a roundtrip to the server. |
There was a problem hiding this comment.
Suggested change
| * Lower latency/performance: If a component is very performance-critical, it might be beneficial to build it in the frontend as it does not require a roundtrip to the server. | |
| * Lower latency/performance: If the responsiveness of a component is critical, it might be beneficial to build it in the frontend as interactions would not require a roundtrip to the server. |
|
|
||
| * Lower latency/performance: If a component is very performance-critical, it might be beneficial to build it in the frontend as it does not require a roundtrip to the server. | ||
| * Direct access to the DOM: If you need to interact with the DOM directly, it might be beneficial to build a component in the frontend. | ||
| * Simpler: Sometimes it is just simpler to build a component in the frontend and Solara. |
There was a problem hiding this comment.
Suggested change
| * Simpler: Sometimes it is just simpler to build a component in the frontend and Solara. | |
| * Simpler: Sometimes it is just simpler to build a component in the frontend than in Python. |
|
|
||
| In solara itself, we use Vue to write new frontend components. The main reason is that we build Solara on top of [Vuetify](https://v2.vuetifyjs.com/), which is a Vue component library. | ||
|
|
||
| Vue is easy to use for non-front-end developers, and it is easy to learn and is the default option for the Solara dev itself. No frontend tools are needed (like webpack, etc.), and you can write your components directly in file or inline string in python. |
There was a problem hiding this comment.
Suggested change
| Vue is easy to use for non-front-end developers, and it is easy to learn and is the default option for the Solara dev itself. No frontend tools are needed (like webpack, etc.), and you can write your components directly in file or inline string in python. | |
| Vue is easy to use for non-front-end developers, and easy to learn. It is also the default option for the Solara.dev website itself. No frontend tools are needed (like webpack, etc.), and you can write your components directly in a template `.vue` file or as an inline string in python. |
Comment on lines
+33
to
+34
| The downside of using Vue, is that we are currently limited to Vue 2, and our ipyvue library has no support for ESM modules, introducing a bit of boilerplate code | ||
| to load external libraries. |
There was a problem hiding this comment.
Suggested change
| The downside of using Vue, is that we are currently limited to Vue 2, and our ipyvue library has no support for ESM modules, introducing a bit of boilerplate code | |
| to load external libraries. | |
| There are two main limitations to using Vue components: | |
| * we are currently limited to Vue 2 | |
| * ipyvue has no support for ES modules, meaning some boilerplate code is required to load external libraries. |
|
|
||
| [https://solara.dev/documentation/api/utilities/component_vue] | ||
|
|
||
| We will first start with a component which is meant to be use inside of a single application, which will fetch the 3rd party library from a CDN. The goal |
There was a problem hiding this comment.
Suggested change
| We will first start with a component which is meant to be use inside of a single application, which will fetch the 3rd party library from a CDN. The goal | |
| We will start by making a component that shows a button, which shows confetti when clicked. The component is meant to be use inside of a single application, and will fetch a 3rd party library from a CDN. The goal |
| We will first start with a component which is meant to be use inside of a single application, which will fetch the 3rd party library from a CDN. The goal | ||
| is to get something work with the minimal amount of effort. | ||
|
|
||
| Our goal is to create a button, that when clicked, will show confetti. |
There was a problem hiding this comment.
Suggested change
| Our goal is to create a button, that when clicked, will show confetti. |
|
|
||
| ## Loading the confetti library. | ||
|
|
||
| Now that we have our skeleton setup, we can add the confetti library. We will use the [`canvas-confetti`](https://www.npmjs.com/package/canvas-confetti) library, which is available on a CDN. We will add this to our `button-confetti.vue` file with unfortunately a bit of boilerplate code to load the library.: |
There was a problem hiding this comment.
Suggested change
| Now that we have our skeleton setup, we can add the confetti library. We will use the [`canvas-confetti`](https://www.npmjs.com/package/canvas-confetti) library, which is available on a CDN. We will add this to our `button-confetti.vue` file with unfortunately a bit of boilerplate code to load the library.: | |
| Now that we have our skeleton setup, we can add the confetti library. We will use the [`canvas-confetti`](https://www.npmjs.com/package/canvas-confetti) library, which is available on a CDN. We will add this to our `button-confetti.vue` file using a bit of boilerplate code: |
| this.showConfetti(); | ||
| }, | ||
| async showConfetti() { | ||
| // make sure it is loaded by waiting on the Promise |
There was a problem hiding this comment.
Suggested change
| // make sure it is loaded by waiting on the Promise | |
| // make sure the package is loaded by waiting on the Promise |
| async showConfetti() { | ||
| // make sure it is loaded by waiting on the Promise | ||
| await this.loadedConfetti; | ||
| await new Promise((resolve) => setTimeout(resolve, 1000)) |
There was a problem hiding this comment.
I'm guessing this should either be removed or somehow commented on?
Suggested change
| await new Promise((resolve) => setTimeout(resolve, 1000)) |
maartenbreddels
force-pushed
the
master
branch
2 times, most recently
from
cded5b2 to
32af76f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.