I've been using google studio AI the past 2 weeks to help reduce front-end design. It really stumbles at times with understanding how Wappler works. Specifically, I've spent the past two days trying to teach is how to reference wappler objects from within javascript. I think I've finally got a response from AI I'm happy with....
Here's my renewed understanding of how to correctly access objects and data within Wappler's framework from JavaScript:
Key Technologies and Architecture:
Wappler: Using Wappler for visual development and data binding.
Node.js: Developing within a Node.js application, implying Express.js for the backend.
Layout and Content Pages: Utilizing a separate layout page and content pages, meaning the actual page content is loaded dynamically into a specific area within the layout.
Accessing Wappler Objects from JavaScript (Using dmx.parse()):
dmx.parse('content.yourObjectName'): This is the crucial part. This is the correct method for referencing Wappler objects (Server Connect components, variables, data views, etc.) within JavaScript code that resides in the content page.
The addition of content. to the object call is specific to Node.js applications that use separate layout and content pages to properly link the HTML code and your server.
yourObjectName: Replace this with the exact id of the Wappler component you want to access. Double-check this in Wappler's App Structure panel.
Event Handling and DOM Rendering Order:
Avoid direct DOM manipulation where possible. Use Wappler's data binding features to update the UI whenever the underlying data changes.
Prefer Wappler's event attributes (static and dynamic) over native JavaScript event listeners when working with Wappler components. This ensures that your JavaScript code runs within the Wappler lifecycle and after the necessary components have been initialized. This means using ondone="" or dmx-on:done="" for Server Connect components.
Load State: You may have to trigger events from each server connects load function instead of adding them using javasript
This is what I don't get. If it takes two days of working on it to get it to understand, is AI really worth the effort? A user of your skills likely could have done it in minutes just with Wappler?
To be fair, the first day was me and AI not knowing how to correctly reference objects within Wappler's framework from javascript. So we spun our wheels trying to troubleshoot why specific javascript code wasn't working. I had to take a first principles approach and start over from step 1: how does wappler and javascript communicate? What are the rules, syntax, etc.
I ripped out the 100 lines of javascript code AI had written and just went searching for an answer to step 1. Read everything I could on dmx.parse() and ondone events, posted the question up here, and tried it. Once it was working, I told AI how it worked, syntax, etc. Building up on my understanding, I kept telling AI everything I was learning, until the output above where I told it to restate back to me what it has learned, and then to make these rules going forward for any javascript code it suggests as we build a charting feature within a page.
Maybe 15+ years ago, when web development was much fresher in my mind, I could have gotten this done, but I wouldn't have been using Wappler either. I struggle every day, appreciate what Wappler does to help make me more efficient, and now trying to leverage develper-focused AI tools to add to that efficiency. I've said it many times prior, and will continue to be a squeaky wheel about the state of Wappler documentation. Forums should not be a place for bug tracking or documentation. If Wappler had documentation equal to say Stripe, I think we'd all be much more efficient, whether we chose to use AI or not to help.
I find ChatGPT 4o and o3-mini-high pretty knowledgeable about Wappler with some coaching. I'm currently using o3-mini-high for code, 4o for general research, analytics, etc. o3 mini is ok at code but makes more mistakes. I haven't had great success with any of the mini models for code and don't recommend using them.
Has anyone used AnythingLLM locally and connected their github repositories to it?
If you know how to use AI to write code, then it's incredibly powerful, and fast. It's no different to first starting with Wappler versus 6 months later, there is a learning curve but then Wappler is very powerful - and a tool i've learnt a lot from and so will always be grateful to have found.
But learning how to use AI effectively (and how to counteract it's failings) is allowing me to create more, faster. E.g. i've migrated one data pipeline Wappler project within 1 day to a far more sophisticated app using Python complete with auth, logging, workers, everything.
I started using Cursor with Wappler projects (using Claude 3.5 Sonnet primarily) and found this to be an excellent combo. Once you get your head around Cursor Rules, Docs for context and more it becomes very powerful - it indexes your app so while it doesn't have whole-of-app context all the time, it's getting there.
To make the most of LLM's for building, you do have to know it's pitfalls to counteract them (before it goes down a rabbit hole of file-xplosion) just as much as it's benefits.
