We think a lot about how to speed up development, and how to get more done with less. We are excited to bring you a number of enhancements to your developer experience, which we think will make a significant difference to how you create React features for IBM CĂșram Universal Access.
In this series of videos, Anthony Cox, Luciano Dantas, and Tom Delahunty introduce new development tools and an improved development approach that will help you to build new features with less code, and more easily test your code.
Tom introduces the videos and a sample feature, and tells you all about the IBM Social Program Management Web Development Accelerator, Luciano provides a step-by-step demo of how we developed our sample feature from scratch, and Anthony shows you how you can do your end-to-end testing, Test Cafe style.
In this video, Tom introduces this video series, and tells us about the new sample feature that showcases the new tools and and advancement in the architecture. You can use this sample feature as a reference implementation for any new features that you want to develop in the application.
Setting up the Web Development Accelerator
The Web Development Accelerator is a React app, available in your Universal Access React development environment on installation.
In this video, Tom describes and configures the Web Development Accelerator, and demonstrates how we used it to generate the code for the sample Redux module in the sample feature. The code is generated from the metadata that you configure in the tool, can this really be code that writes itself?
Creating a static list page
Now, that Tom has got us started, Luciano presents the first of three videos in which he shows you how we created the sample feature.
In this video, Luciano demonstrates how you start to create a feature, and how he created the first page in the sample feature workflow. To speed up page development, he demonstrates how to use a page template from the IBM Social Program Management Design System. For this first video, he defines a page that contains a static list of the benefit application types that users can apply for. He then creates a route to access the page in a browser.
Updating the static list page with a dynamic list from REST APIs
In this video, Luciano shows you how to connect to IBM CĂșram Social Program Management REST APIs to get information about the available benefit applications, and to dynamically update the benefit application type list based on the information returned from the REST APIs. He touches on REST API security, and shows you how to use a custom React Hook to reduce the complexity of authenticating REST API users. Luciano then uses the sample Redux module to request and store information from REST APIs. In addition, Luciano demonstrates how to show a spinner while waiting for REST API responses, and how to optimize page rendering to reduce server calls.
Implementing the sample IEG form
In this video, Luciano develops the remaining three pages of the sample feature, which present a sample IEG form based on the selected application type. In the process, he explores React events, custom React Hooks and error handling based on a React higher-order component (HOC). Luciano introduces the IEG
BaseFormContainer component, which we use to load forms based on IEG scripts. He also shows you how to use the Web Development Accelerator to create a custom Redux store, so you can store and retrieve information from pages in the application, for cases where you don’t need to call out to the API for the information.
End-to-end testing with the test framework
In this video, Anthony takes center stage, to talk about end-to-end testing with the new test framework. He lets you know how you can benefit from building your test framework around the test-framework package, and the benefits of using the page object model, we think you’ll be impressed. Tests are driven by the free open-source Test Cafe framework, which is our chosen tool for automating our end-to-end tests. Using this test framework can result in you writing less test code, and improving long-term test maintainability, win, win!