As Twilio Flex nears a general availability (GA) date, the team continues to iterate and fine-tune the Flex Quickstart. The Flex Quickstart provides configuration and code to quickly provision a new Flex project. We’ve been installing various versions of this since the summer. In the 0.12 and 0.13 versions, we’ve seen some interesting changes from earlier approaches. We would expect to see more changes either during or shortly after the Signal conference next week.
At a high-level, there is a general move towards simplification to provide as clean a slate as possible for developers starting a new project. Initial Quickstart templates included more sample code and components. This encouraged early adopters to get up and running quickly. The focus now seems to be more on a blank palette that can serve as a starting point for any new Flex implementation.
What’s In the Current Package
I’m going to compare the latest packages with code from the original (0.6 or 0.7) Quickstarts. This will provide a sense of what’s available now and what has changed.
This looks much the same as in previous quickstarts. It includes the following basic Workspace setup.
Flex Task Assignment Workspace for Flex. In a Flex project, this should be the only Workspace.
The Everyone Task Queue that will target any worker.
The Assign To Anyone Workflow. This will just send everything to one queue with no other filters, steps or additional logic.
One Worker based on the user who set up the project. Worker attributes by default are simply contact_uri, full_name, email.
Activities (can roughly be thought of as “presence states”): Offline, Idle, Busy and Reserved by default. In Flex these are more than presence because workers don’t have to be live agents. Any entity that can be assigned a task can be a Worker. For instance, you can have a Voicemail worker that knows how to route or webhook to a recording workflow.
Default Flex functions look much the same, but there are a couple of new functions.
Flex Get Asset With CORS This provides a way to retrieve an asset from Runtime Assets with the necessary CORS headers, for example inside the agent console React application.
Here is a screenshot of the default Function list
Flex UI and Chat Samples
There have been a lot of changes since the initial Quickstart to the Flex UI. The Chat sample is still much the same, although the current 0.13 version is showing some changes. I won’t get into details on every file and folder, but here are some general thoughts and comments.
- Dependencies in package.json have shrunk to only the private repo of twilio/flex-ui, react, and react-dom, plus a few dev dependencies. This compares to 11 dependencies and 25 dev dependencies in the 0.6 version. There are still a bunch of dependencies in the twilio/flex-ui project though. These get pulled down when you run npm install, you just don’t need to manage them yourself.
- App entry point assets (app.js and CSS files for instance) have moved into the src folder. There is no longer a resources folder.
- The original quickstarts had a variety of sample React components to show off features like Notifications, Actions Framework, Themes and so on. Commented code was scattered throughout the app to demonstrate how to work with the UI framework, light up certain features and so on. None of this is available in the latest Quickstart. However, support in the form of documentation and tutorials has been much expanded in that time-frame.
Quickstart Direction and Thoughts