Xojo for Javascript Developers

Targets Web
1

As a former Xojo user and now a Node.js/ Javascript developer I would like to post this question (specially for Ricardo Cruz).
Can Xojo Web use plain Javascript Components?
What would it take to include them in Xojo Web?

Having the ability to include Javascript Web Components into Xojo, in my opinion, will definitely increase the capabilities of Xojo Web.

Please guys pass this message to Ricardo Cruz.

Ricardo, estaria interesado en platicar contigo o hacer un test en como implementarlos. Creo que las oportunidades serian inmensas para Xojo Web. Pero a lo mejor no es el camino que Xojo quiere, tecnologicamente hablando.

2

Maybe what are you looking for is the WebSDK?

Here is a post with a video:

1 Like
3

That is where the idea came from. To be honest it seems a little more complicated than creating it in Javascript, thus the question.
There are thousands of already created and free to use web components, imagine if we are able to include those in Xojo Web easily.
Here is one of the many free components.
Free components

4

I have seen some Xojo Web developers create WebSDK controls from free JS components.
They say it is not hard but they know JS and understand what Xojo needs for the WebSDK.

Edit: and you can ping @Ricardo_Cruz and he may comment if he is available.
If you have a Feature Request, then you can create an Issue in https://xojo.com/issues

5

What advantages would it have over a framework like Bootstrap?

Do not use free components imply risk?

1 Like
6

The advantages are:

  1. you are not tied to a framework
  2. Since it is plain Javascript no need to download any frameworks.

Frameworks nowdays is a hot topic in the Javascript world. Everything in life is like a pendulum., same in the Javascript world. Not long ago Single Page Applications (SPA) used to rule the world, now we are going back to where we started (server side).

7

I hate to break it to you but Goat UI is a framework.

Put a script tag similar to this <script type="module" src="https://unpkg.com/@goatui/components@0.10.8/dist/goatui/goatui.esm.js"></script>

2 Likes
8

I have wrapped many JavaScript libraries and components in GraffitiSuite Web Edition using the WebSDK. It’s doable, and not overly difficult if you know both JavaScript and Xojo.

7 Likes
9

I’ve made a few tests with React and it works just fine, using the Web SDK. I’m pretty sure it should be even easier with vanilla Web Components, the only problem is browser compatibility seems to be a bit low.

If you plan to build your own Web Components, take a look at Stencil JS, it should make things a bit easier.

I’ll more than happy to prepare an example or two using Web Components, as soon as I come back from my parental leave :baby:t3:

11 Likes
10

No idea you had been pregnant! I couldn’t tell haha :slight_smile:
Felicidades!

3 Likes
11

One day you’re aligning layers with CSS… and the next one you find yourself changing diapers :sweat_smile:

Mario has prepared a Web Component based on the TextArea with counter example:

Web Component:

Web SDK example:

I’ll prepare the example as soon as I come back. But if anybody wants to help and adapt Mario’s Web Component to the Web SDK, that would be epic. :blush:

3 Likes
12

Here are my thoughts on Plain Web Components

  1. You are not “tied” to a framework/Library
  2. These creates “Shadow web components” which are much faster then Virtual DOMs components.
  3. All CSS is encapsulated (meaning they only affect the component not the html page or other components)
  4. The class that you use to create the components is probably 80% the same. The only thing that changes are how you want to handle the callbacks.

I am not well versed on the WebSDK, but I can only wonder if Xojo Web can become a product where it can bring developers at the level of Javascript developers.

Here are my thoughts on what it would required:

  1. Implement in Xojo an easy GUI to create Plain Web Components.
  2. Make it easy to bring already created Web components. Most of the time is a file import in the HTML.
  3. Make it easy to catch the events of the components so we can handle them using Xojo code.

Anyways, this is just food for thought.

2 Likes
13

These two are tied together. The problem is that the Xojo IDE has no way to “know” what would run better on the browser vs sending the method call all the way back to the server, not to mention what calls could be done asynchronously.

You really ought to look at the WebSDK though. The whole point was to make it easy for developers to add their own controls to the Xojo ecosystem and a generic control is less than 20 lines of wrapper code. I think you’d find that most of what you’re asking for is already there… including the ability to draw your controls right in the IDE editor.

14

Hi @Mario_Prieto,

I’ve wrapped the Web Component you’ve created into a Web SDK control. I didn’t have to touch your code, but I’ve added a “text changed” event, so you can also control it from Xojo code.

Here it is:

I hope that helps.

1 Like
15

Hi Ricardo, thanks for the example and also Kudos for putting it in Github.
I know it has a been a year since you kindly created the example using a JS plain Web component I created. I finally had some time to look into it. After looking at your example, I see great opportunities to expand the capabilities of Xojo Web. I am almost certain that we can bring the full power of the web (Javascript) to Xojo.
Gracias por todo el esfuerzo que hiciste, de vez en cuando te voy a mandar unas cuantas preguntas :blush:

1 Like
16

Hola @Ricardo_Cruz , here is a little diagram that I created to wrap my head around the WebSDK. This diagram is based on using a web component. Any suggestions are always welcome. I can now “hook” any Javascript component and be able to communicate from Component (JS) to Xojo Web Server and viceversa. Next goal is to see if I can make a free component library work with Xojo Web. The one I am looking at is called Shoelace.

WebSDK 2.0
WebSDK 2.02181Ă—1085 158 KB

3 Likes
17

Here is a screenshot of a Shoelace button. Once you understand how the WebSDK works, it becomes pretty easy to include almost anything available on the web!!
On the screenshot you will see a plain Web component button I created the one it says “Reset Text”
The one that says Shoelace Button is a Shoelace Web Component button. see the Shoelace Button

Shoelace button
Shoelace button1688Ă—905 89.8 KB

2 Likes