What's In the Latest Twilio Flex Quickstart? - Perficient Blogs
Blog
  • Topics
  • Industries
  • Partners

Explore

Topics

Industries

Partners

What’s In the Latest Twilio Flex Quickstart?

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.

Simplifications include moving to a default “create-react-app” style package, removing Typescript as the default development experience and limiting the surfaced Javascript workflow by utilizing react-app-rewired.

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.

TaskRouter

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.

Functions

Default Flex functions look much the same, but there are a couple of new functions.

Flex Get Plugins This is a function that returns the necessary JavaScript plug-ins to include in your Flex deployment. These are basically private assets with a “plugin-” prefix.

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.

  • All code is using plain JavaScript. We’re big fans of systems like TypeScript to enforce certain developer structures and habits, but it does add an extra layer both in terms of workflow and learning curve.
  • 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

As I mentioned earlier, this is more of a “blank slate” approach. I understand going this direction since there are almost as many preferred JavaScript development workflows and framework preferences as there are developers. But this does mean if you liked the original Quickstart approach, you must configure elements like Typescript support and linting to your liking. The agent console app is now using react-app-rewired combined with a standard create-react-app project experience. If I’m understanding correctly, react-app-rewired provides a way to keep most of the benefits of the create-react-app package while still allowing for some customization. An example of customization might be adding additional processes into the workflow (loaders, testing, transpilers, etc.). When using create-react-app, there is still the option of using the eject command to pull all of the defaults and packages out into the “open” again, but you will then be responsible for managing all aspects of the project configuration yourself. For more information, read the docs.

If you are just starting to look at Flex (or waiting for GA to start), a lot of this is a bit academic. But it is interesting to watch the evolution of the Quickstart as Flex progresses since it provides some insight into the current thinking, direction and focus of the development teams. In general, it probably doesn’t hurt to keep various versions of these Quickstarts around. There is some good stuff in there for reference, both for the Flex platform itself and for those looking to learn more about JavaScript front-end programming in general.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up

Categories