Visual Builder offers a visual and declarative development approach not just for your page's layout but also for the business logic of your application. The declarative approach offers a quick way to model your business logic, eliminates syntax errors, and simplify maintenance. Up until now, the declarative interface would generate a JSON file with meta-data about the logic flow and the actions invoked. With the new version of Visual Builder we are now creating JavaScript code from the visual action chain editor. The new JavaScript action chains offer several benefits compared to the JSON approach:
Improved Development Experience
We took this opportunity to re-imagine and re-implement the experience of creating your business logic, instead of the flow-diagram we are now using code-blocks approach to represent your business logic structure. The same set of declarative actions is available to drag-and-drop into the visual editor, and an improved property inspector makes it easier to set the properties of the actions. On the side you'll also notice the structure overview giving you a high-level view of your logic structure and the ability to easily navigate to a specific action. This new layout helps especially for cases where you have complex logic flows, where using the diagram required constant zoom-in and zoom-out.
When you switch the editor to the code view, you see simple JavaScript code. You can continue to drag-and-drop action into the code view and set their properties in the property palette. And you can also directly code JavaScript enjoying all the benefits of the powerful code editor (code insight, syntax highlighting, code structures, and more).
Another new capability is creating local functions, simply drag an action into the bottom right corner of the editor to create a new local function. Once created, the local function can be called from other places in the action chain.
Simpler Debugging
With JavaScript action chains, developers can leverage the browser's JavaScript debugger to debug their action chains. You can open the source tab in the browser developer tool and set breakpoints on lines of code, watches on variables, and use all the rich functionality of a true debugging experience. This greatly simplifies tracking issues in your logic and resolving them. Furthermore, you can modify the code in the debugger and save it to test change impacts while running your pages.
A quick tip – during the development stage the file for an action chain will load to the browser once invoked, so you might need to invoke your action chain once, before being able to locate the action chain in your app source tree and set breakpoints in it.
In the demo video below you can see the full development and debugging process using JavaScript action chains.
Simpler Git Integration
A key advantage of JavaScript action chains is that they are simpler to manage using git code version management. Code merges become clearer as well as code conflicts resolutions simply looking and JS code. This also applies when you conduct code reviews for code changes. For developers with a large team collaborating on the same set of pages while developing the app, this is a key benefit.
What about JSON actions?
JavaScript action chains is our approach for business logic creation going forward. You'll notice that quick starts and wizards in Visual Builder now generate JavaScript action chains now. If you already have an application developed using JSON based action chain you don't need to worry. Your JSON based action chains will continue to function as is, and you don't need to modify them. In fact new JavaScript action chains can call out to older JSON action chains using the call actionChain action. (Note that the reverse, JSON calling JS, is not supported currently). Also note that you could choose to create JS or JSON action when clicking to create a new action, but we highly recommend that all new action chains will be created using JavaScript – they simply offers many benefits for you as a developer.
To learn more about JavaScript action chains, check out the new "Working with JavaScript Action Chains" chapter in our developer guide.