20 Nov 2020
This contribution is a new feature.
The main idea of the issue is to find a new workflow for the user, to rethink the UX.
From the first page to the last one.
Currently the user workflow looks like this:
The main issue is that xLayers generates code for all supported framework at once.
This could be problematic in the future if it supports more frameworks.
- On the landing page, we will allow users to choose their framework they wanna generate code for.
- The code generation UI should only show the selected framework.
Users can switch the selected framework.
The code blocks are intentionally incomplete for the sake of readability.
If you want to read the full code you'll find it in the PR link at the top.
My first suggestion for this page was to implement a carousel with all the supported frameworks.
By discussing with the other members of the team we decided to display only a simple list.
As we need to use the different
CodeGenKind (frameworks) in two different pages, I extracted a list to a shared file where we put all our
Each element contains:
- a label for the text preview
- a svgIcon for the icon name
- a codegenType to reference the element
As this page already includes a way to switch between frameworks, my first suggestion was to remove the frameworks tab bar and replace it with a simple dropdown component which will be much more unobtrusive and it will not disturb the user. And we also save space for the code editor !
Nothing magic here, we have a
mat-select containing our list of frameworks.
mat-select-trigger allows us to add the framework
mat-icon inside the select.
This Action updates the
kind value of the
codegen state which will tell us which framework the user has chosen.
If for some reason the user didn't choose a framework, we set
kind to 1 (corresponding to
Angular) by default.
Inside the landing page we will dispatch the
Inside the codegen generation page, we can subscribe to the
codegen from our store and generate the code for the selected
This is the final user workflow.
Here is a small presentation of the final user workflow in xLayers.
The simplest part of this contribution was the implementation of the solution.
The design of the user experience was a little more interesting and needed us to think way more than we thought.
As I said above, the richest part was the reflection around the user experience.
In addition, I was able to discover a codebase that I did not know and apply some concepts of NgRx.