🌟 Beyond First Impressions: Measure your apps performance on user interactions
The purpose of this repository it to create a simple way to run lighthouse user-flows online in a stable environment. It should have a web interface and allow users store and schedule user-flow audits.
The tokens should be aligned with our new UI Kit
We should initiate by stress testing the form and seeing when the WebSocket crashes
As I user I don't always want to wait for the results of the audit
I would like to be able to be notified with an email when the audit is complete
As user i want to be able to see what chunks are required for a feature and are not require for a parent feature.
Allow user to select both included entry points and excluded entry points on filter command.
Full Command
esbuild-meta filter --dist stats.json --entry movie-detail-page --excludeFromEntry mainCommand with Alias
esbuild-meta -d stats.json -e movie-detail-page -x mainIf the user passes an entry point that does not exist it should throw an error. The error should contain the invalid entry input.
As a user,
when i run an audit on the portal,
i want to be updated on what is happening
Update the user using a processing widget
As a user i would like to be able to add all the interactions in an intuitive way throw a form to be tested.
The general idea is to have a component called user-flow-audit-builder
It will contain one optional input of type AppSpeedAudit
The component will be a form
As a default is will start with:
It will also start with the following default steps:
Each Step will have a ... more button on the top right corner
The more button will allow you to:
In general I am Implementing the same behavior as Chrome Recorder
Currently the main readme has a descrioption that does not suite the app. It's should be fixed
A user can load a URL with the audit id and view a previews audit result
As a user, I would like to be able to send a link so that a second user can see and download the results
There is a script currently to run the deployment of the cli. This is located under scripts dir but should be located in an nx plugin.
Logic related to the user-flow step should be moved out of the template and into a separate service.
It should have a method that when called can reset to a default. This actually means clearing it and leaving it with a type control only or it can also add the default values and controls for a newly selected step type.
It should have a method to add new options or props to the step.
It should expose all the necessary information to display the form.
type: formControl;
props: stepProp[]
optionalProps: stepProp[]
The user should be notified when the audit has been initiated
Send a message to the client when the audit running
When the Runner pulls the audit from the FIFO Queue it should notify the client via a WebSocket
Handle new state and display a message in the client app
When the Client gets the notification it should update the toaster text
Example of a Storybook with nice docs for design tokens:
https://d2iq.github.io/ui-kit/?path=/docs/welcome--docs
https://github.com/d2iq/ui-kit/
When running an audit using the UI, the user should be able to see the state of the audit process.
this would show the use the audit did not fail and give them an idea of its status.
The status is visualized over the the above display components:
Legend:
Visible = V
Not Visible = NV
Idle ('idle')
Scheduling (optional)
In queue ('queued')
[+] #11
Loading ('loading')
Done ('done')
[+] #12
The CLI was build with intent and was implements many patterns to reduce the cost of maintaining it and adding features. It is worth taking the time to document the decisions and pattern present in the app.
This is not a one time thing but a habit that should become engrain in this project. This should be documented!
This Repo attempts to Produce Object Oriented Programming.
We are having issues migrating a lib from CJS to ESM. The reason for this issue is to get a better understanding of how to create a CLI lib from scratch correctly and with proper testing-.
This issue describes how we can recreate user-flow from scratch, step by step.
It starts by asking fundamental questions and attempting to answer them with something actionable.
NX is great for managing multiple packages and will help us maintain the separation between the sections of the repo. However, it should not be used as a dependency of the CLI
How should we split up the libs?
Should we use an app, lib structure or packages, etc?
What should be the testing strategy?
What development methodology should be used?
Under Diagnositc item if the lighthouse audit provided a details table it should display it:
The pipeline should not run when a PR is open with only changes to markdown files. It should also not run on merge with the same conditions
The code for the ci/cd is all in one large file with has so many repetitions.
Logic should be extracted to follow dry.
Here is a description of the possible causes and solutions to the flakiness.
When the server runner does not find any more audits in the queue, it initiates a shot down.
Audit scheduling and queuing depend on the instance status if stop it initiates the runner, if not it only schedules.
If the server is in the process of being terminated and it attempts to schedule a new audit it can fail to run the new audit.
When the server pulls from the queue (30s?) and does not find a scheduled audit it initiates a shutdown and kills the runner by returning void.
execSync('shutdown -h -t 5 & exit 0', {shell: '/bin/bash'});
return;
Potentially we could reduce the scheduling issue by not terminating the recursive function and killing the shutdown command if the pulling returns a value.
This would also allow us to increase the shutdown time to catch audits scheduled closer together.
Separating the logic for Server management and stand status checking will reduce the risk of coordination issues between the runner and the API gateway.
Functions
As a user I can create share and edit custom user-flow audits.
As a key feature in the application is the creation of more complex user flow audits. This means a user should be able to audit almost anything it is able to do locally using user-flow.
For this purpose the user-flow server now takes in a customized puppeteer reply JSON that has been extended to include user flow steps.
User-Story
As a user I can share a custom user flow audit be sending a URL.
To store the state and make sharing the audits easer, we will store the audit in the URL as a query parameter and sync it with the form value.
The following is a breakdown of the properties of a user flow audit.
title
Type: string
Validation: todo
Required: True
Description: todo
timeout
Type: number
Default: todo
Max: todo
Min: todo
Required: true
Description: todo
device
Type: 'mobile' | 'tablet' | 'desktop'
Default: 'mobile'
Required: true
steps
Steps are an array of steps and will be handled separately.
Notes:
This Issue was originally based of #45 and #58 but due to requirement changes we have moved it here.
As a user I would like to be able to give ufo a list of actions to audit.
There should be an example user-flow inside of it.
There should also be a link to docs explaining how to use it.
Safety check - user - flows cannot contain the link to ufo !!! Infinite loop !!!
Future additions:
A button ti import the replay/user-flow
replay/user-flow validation, if its not correct it won't submit ...
A video detailing how two create a user-flow
Features are located inside of container components which are named as such for example: export class SimpleAuditContainer
This causes this error:
Error: 25:14 error Component class names should end with one of these suffixes: "Component" (https://angular.io/styleguide#style-02-03) @angular-eslint/component-class-suffix
This is being suppressed using: // eslint-disable-next-line @angular-eslint/component-class-suffix
The suppressed comment should be removed by improving the lining rules for the features lib
Currently there are two apps:
Main currently looks like this:
const argv = await yargs(hideBin(process.argv))
.options({ verbose, help, shutdown, dryRun })
.command([ userFlowCommand ])
.parse();This means that all the commands have a default set of options.
However, the command typing is incorrect:
type UserFlowCommand = CommandModule<NonNullable<unknown>, UserFlowCommandOptions>As it should include the global types in the command generict type.
We are also incorrectly declarring the command modules in yargs as we pass it as a command array and it propably should not be, eg: .command([ userFlowCommand ]).
We are also incorrectly using the Command builder
const userFlowBuilder: CommandBuilder = { queue, store };This should be using the proper (argv) => argv.options(...options) with its correct typing.
We are also incorrectly using the type declarations of the command arguments. We should use the yargs typing that inferres it insead of creating out own interface!
The main readme should include a list of all the technologies used on this project.
As some of the application's depend on a network connection we need to handle it's state.
The logic of the Websocke as well as the UI depends on a stable connection. Id the connection drops we have to handle errors and informing the user about it.
TODOS:
/is-online that returns 1 to get a way to check if a internet connection is givenNetworkConnection service that exposes the online statusWs service that wraps the default RxJS WebSocketSubject
init method to initialize the connecction logicSimpleAuditForm if the connection droppedSimpleAuditForm if the connection establishes again
The application requires using SVGs and we want to handle that in a performant way.
As a final solution we plan to use ngx-fast-svg, however there seems to be an use related to the lib that is causing it not to work properly in the repo. Therefore, for the moment we will implement SVG as templates and optimize them later.
A user should be able to see the report using a viewer.
A feature lib that takes the report generated by lighthouse and displays the results.
It should have a viewer for:
Category overview
Metrics
There should be a max size maybe 1400px for the viewer.
It should have a global section with details about the audit.
Only one audit step should be visible at the time
There should be a sticky menu at the top allowing you to switch steps
The sticky menu should look like a time line.
Icon -> Step Pic -> Step Pic
Summary -> Step -> Step
Category Overview
Metrics
Item and value should be on same line
Desktop should have two items per row
Filmstrip
Filmstrip pictures should have a border.
Consider multi line for mobile
Diagnostic
Prettify Audit Description URL (use the helpers from metrics)
This is what we would be trying to replicate:
We can get the information from this API:
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.