Thanks to Scott Clee (@scottclee ) and his Impress technology, we learn how to build no-code apps in Figma.
3 Likes
I missed the first half this morning. I look forward to watching the video. What I did see looked very impressive.
1 Like
@scottclee, fascinating.
Yes, the emphasis was on āno-codeā demo.
However, I have questions as of
From my notetaking:
āIāve IMPLEMENTED a message bus in WAPPLER . . .
Built around an old concept, a message busā¦
drag figma components into a design and thereās a way for them to seamlessly talk to each other . . ."
So, I must ask about that Hard-coding, as you called it in this Meetup, done in Wappler to enable this Message Bus āseamless components talking to each otherā feature.
Since you refer to this as an imported Figma component will you show us in the Code view, etc., how you hard-coded this impressive end result?
Hi @NewMedia, as requested, hereās the code level view of the message bus.
To build the message bus, I used Wapplerās built in support for Objects in the front-end, combined with its data-binding capability.
For example, the bus starts out as an empty object, which I use as a lookup dictionary:
When a message is published to the bus, I add it to the dictionary with an associated key i.e. message_bus.value[āid1ā] = āHelloWorld!ā
Note: you can add any kind of value to the message bus. This includes string (as shown), boolean, number, array, or another object, but they all need to be added with a unique string lookup key e.g. āid1ā
Caveat: the above code example is representative, and not exactly how it works. The reason for this, is that in order to interact with objects (and particularly attributes inside of objects), and to have them trigger the dmx-bind capability, I had to write my own dmx Formatter. The good news is that Impress kindly inserts the dmx Formatter into your app when the message bus is being used.
If an item wants to receive messages from the bus, then it must bind to a specific key on the message bus i.e. dmx-bind:value=āmessage_bus.value[āid1ā]ā
From here, when an item with its key is written to the bus, any items which subscribe to that key will receive the updated value. You can do something with that value, such as mirror it to the screen. Alternatively, you can use the ādmx-on:updatedā capability to perform an action when the value is updated, such as increment a state variable, as is done in the case of the animated green & red circle component shown in the demo.
Though the above is technical, Impress masks it all from the user and allows them to connect and configure message-bus-compatible components in Figma without needing to understand the implementation.
At the moment, this capability is in the experimental stage, and therefore not fully documented. However, Iām happy to open it up to anyone who wants to try it.
Hopefully that covers what you asked. Let me know if you have any further questions.
2 Likes
A Big WOW from me!
Thank you so much for responding to my request in detail, @scottclee
Now another question about this statement.
The capability in the experimental stage is whose capability?
Are you referring to an experimental Impress feature or a Wappler dmx-on:zpdated capability? And what more needs to be experimented with to upgrade it out of the āexperimentalā category?
Hi @NewMedia,
I was referring to the capability being experimental in Impress.
Itās actually fully implemented, as you saw in the demo. Itās just not documented yet.
Iām still playing with the concept to work out useful components, examples, etc. Once this is done Iāll get everything documented and shared.
1 Like