Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Settle frontend architecture #190

Closed
10 tasks done
marein opened this issue Sep 27, 2023 · 1 comment
Closed
10 tasks done

Settle frontend architecture #190

marein opened this issue Sep 27, 2023 · 1 comment
Assignees
@marein
Labels
priority:high type:debt type:performance

Comments

@marein
Copy link
Owner

marein commented Sep 27, 2023 •
edited
Loading

The frontend has been an after thought. Let's change that.

Although the current implementation, meaning "traditional" server-side rendering with some custom elements, is only cobbled together to provide "some" user interface, it has proven its worth as no maintenance was required thanks to backward-compatible browsers and the stability of web standards. The main goal is to apply progressive enhancement and hypermedia controls with the least amount of dependencies and asset size wherever possible.

However, there is some room for improvement here, which should be considered:

  • Assets (js, css, images) should be versioned so that they can be cached for a long period of time. Latest browser features like script[type="importmap"] could be of good use.
    Version assets #191
  • Since js files aren't (and won't be) bundled, custom elements could only be imported when they are needed, loading only necessary bytes for a specific view. Not bundling assets certainly comes with disadvantages, such as file compression being less efficient or having to be careful not to create waterfalls. The advantage is development speed (opinionated), fewer tools, fewer things to run in development, and the possibility of granular lazy loading.
    Load custom elements lazily #193
  • To enable faster page transitions and have the ability to keep some elements on the page, links and forms should be intercepted and manually navigated/submitted, replacing only the DOM needed on the page. Possible sticky elements could be chat widgets and simultaneous games, for example.
    Add dynamic page loads #195
  • The names of custom elements should follow the same naming convention, e.g. they should be prefixed with their domain name.
    Unify prefix for custom elements #196
  • Custom elements currently use the DOM api directly for changes. While this is more efficient since event listeners know what they need to update, it has an affect on readability and development speed. Changing the structure, e.g. for the game board, is cumbersome due to the imperative nature of the api. Templating libraries based on template literals could smoothen the process, e.g. lit-html or uhtml. However, maybe the first shot can just be rendered server-side, mitigating the issue from a different angle, solving the same problem.
    Use a design system #232 (ships uhtml)
  • Decide on a design system or rewrite the current css.
    Use a design system #232
  • Use early hints for faster page loads. Not yet.
  • Assets could be minified by using an AssetMapper compiler Not yet.
  • Drop service-js-polyfill as all modern browsers should be able to support the shipped polyfills by now (except script[type="importmap"]).
    Version assets #191
  • Maybe, just maybe, keep service-js-polyfill in order to host 3rd party modules (as an internal CDN) without the need to install npm on the main application image. But public CDNs can be considered for this playground project too.
    Going with public CDNs for simplicity and Symfony's AssetMapper can now download dependencies.
@marein marein self-assigned this Sep 27, 2023
@marein marein changed the title Improve overall user experience Improve frontend architecture Oct 17, 2023
@marein marein added type:debt and removed type:ux labels Oct 17, 2023
@marein marein changed the title Improve frontend architecture Settle frontend architecture Oct 18, 2023
marein added a commit that referenced this issue Oct 19, 2023
@marein
Version assets (#191)
8bbab15 
This adds the possibility to cache assets for a long period of
time #190.

Assets are versioned using Symfony's AssetMapper. The
import map is built so that each domain can maintain its own
import map to avoid merge conflicts.

For browsers that don't support import maps yet, a polyfill
is loaded conditionally.

Icons aren't versioned as files like site.webmanifest aren't compiled.

Additional changes:
* Remove service-js-polyfill, and thus support for old browsers
* Fix broken links in documentation
@marein marein pinned this issue Oct 21, 2023
marein added a commit that referenced this issue Oct 22, 2023
@marein
Cleanup global js listeners (#192)
3aa12c3 
Additionally prefix custom events dispatched from custom
elements with the name of the custom element #190.
marein added a commit that referenced this issue Oct 24, 2023
@marein
Load custom elements lazily (#193)
c868057 
Custom elements must be registered in the import map with
their tag name. On page load, all undefined elements are
loaded lazily. Since they can appear out of order, a custom
app:load event is dispatched so that components know when
everything is loaded #190.

Additionally update selenium.
marein added a commit that referenced this issue Oct 28, 2023
@marein
Add dynamic page loads (#195)
e6fe4c9 
All links on the page are intercepted and checked to
see if they're a valid internal link. If so, the page
is loaded dynamically via ajax, then all undefined
custom elements are loaded to avoid flickering, and then
the page is placed in the DOM. The same works for popstate
events and programmatic triggers, such as joining a game #190.
marein added a commit that referenced this issue Nov 1, 2023
@marein
Unify prefix for custom elements (#196)
fcb9f62 
This unification is intended to avoid naming conflicts
between domains #190.

Also reformat js code and use fetch instead of
XMLHttpRequest everywhere.
@marein marein closed this as completed Nov 1, 2023
@marein marein unpinned this issue Nov 3, 2023
@marein
Copy link
Owner Author

marein commented May 9, 2024

Reopened, as some postponed items are now being worked on.

@marein marein reopened this May 9, 2024
marein added a commit that referenced this issue May 15, 2024
@marein
Use a design system (#232)
91fcf74 
Add tabler.io, which contains a variety of components that
are useful for the project (showing player statistics in charts,
the chat widget, forms, grids, tables) #190.

Additional changes:
* Enable dark mode based on the preferred color scheme.
* All self-built components use the prefix gp-.
* Fix some ux related issues in the lobby.
* Use uhtml to render nodes instead of using the DOM api.
* Use default timeouts in acceptance tests as they
sometimes failed.
@marein marein mentioned this issue May 15, 2024
Merged
@marein marein closed this as completed May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marein marein

Labels
priority:high type:debt type:performance
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@marein