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.

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

govuk-react vs govuk-react-jsx #49

Closed
nosnickid opened this issue Jan 21, 2022 · 10 comments
Closed

govuk-react vs govuk-react-jsx #49

nosnickid opened this issue Jan 21, 2022 · 10 comments
Assignees

Comments

@nosnickid
Copy link
Contributor

govuk-react/govuk-react is a work in progress module, that uses styled components to recreate the govuk design system.

surevine/govuk-react-jsx is more mature, and seems like a better way to use the design system.

@ljcoulson ljcoulson self-assigned this Jan 21, 2022
@nosnickid
Copy link
Contributor Author

Having some hassle with server side rendering on govuk-react when it tries to import an image.

Looking at why it works with custom components / volto core fine, but not gouk-react.

@nosnickid
Copy link
Contributor Author

surevine/govuk-react-jsx#107 seems related

@nosnickid
Copy link
Contributor Author

The 'packaging' used by govuk-react-jsx (surevine/govuk-react-jsx#112) as a UMD is what breaks server side rendering.

We worked around this by using mrsdeveloper to pull govuk-react-jsx sources into our dev setup. Fine for now.

Eventually it might be worth trying to tweak how govuk-react-jsx is packaged to avoid this.

@ljcoulson
Copy link
Contributor

ljcoulson commented Jan 25, 2022

Below is a summary of the key reasons we decided to move away from the govuk-react package to govuk-react-jsx.

  • Markup generated is identical to GOVUK Nunjucks macros. Allows us to benefit from the learnings from GDS and includes accessibility enhancements such as aria tags.

  • Upstream govuk-frontend CSS/JS changes are pulled into the package automatically.

  • Props are more in keeping with GOVUK Nunjucks components so will be more familiar to developers with prior experience of working with Nunjucks macros.

  • govuk-react is implemented using styled components which can add unnecessary complexity. govuk-react-jsx Makes use of existing GOVUK CSS classes which is a much simpler approach.

@nosnickid nosnickid self-assigned this Jan 28, 2022
@nosnickid
Copy link
Contributor Author

This is now merged to main, all good.

@nosnickid
Copy link
Contributor Author

We ought to be able to drop this if govuk-react-jsx move away from UMD packaging

@ajtucker
Copy link
Contributor

ajtucker commented Feb 3, 2022

We ought to be able to drop this if govuk-react-jsx move away from UMD packaging

@nosnickid can you raise this upstream, if you haven't already?

@andymantell
Copy link

The packaging side of things always makes my head explode 😆

Help me help you - what is it you're looking for? Can you raise an issue on the govuk-react-jsx backlog setting out what problems you're having and how you would like me to fix it?

Thanks!

@nosnickid
Copy link
Contributor Author

Yeah JS packaging is an 'interesting' area.

I'll undo the workaround we used locally and see what I can put together.

@andymantell
Copy link

Thanks. I've opened surevine/govuk-react-jsx#148 to look at this. If you could stick any thoughts or findings you have in there that would be great.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants