Welcome to Grommet’s 2020 Roadmap.

We are looking forward to what’s coming in 2020 and wanted to share our general idea of a roadmap.

We will be working on the Active Roadmap bullets, but we are aware that technology changes rapidly, priorities change, and we will probably have more off-list items to keep grommet adaptive with any tech changes or ongoing requirements changes.

The On-Going Roadmap item list needs more feedback and community engagement to make those items evolve to an Active Roadmap item.

Feel free to join our slack and share your thoughts with us.

Active Roadmap

Documentation

In 2019, we completed theme documentation, as well as additional wiki pages that explain more about the v1 migration and the underlying and usages of colors, background colors either using a theme or props.

In 2020, we seek to improve grommet-site usability and embed more examples. We have been learning a lot from the research efforts and continuing to improve in this area.

One of our goals is to remove react-desc and explore different options of documentation on the site.

Testing & Semantic versioning

Until October 2019 we were relying on jest, react-testing-lib and on manual testing on +200 stories on Storybook to create snapshots for change detection, and making releases compatible with semantic versioning. Due to the amount of incoming PRs during Hackoberfest, we were able to make this manual process automated, more accurate, fast and determinist when we adopted Chromatic as a visual testing tool that leverages those couple of hundreds of stories for more snapshots that are compared on every PR submission for extended change detection. We also added typescript testing on Storybook.

We are aspiring for more automated and stable releases and looking to invest more in behavioral testing of interactive elements, click changes, hovers and navigation behaviors.

React Hooks

In 2019, we had massive adaptation for React hooks, 95% of all the storybook examples (+200) are using hooks. we will continue migrating all core components and helpers to use hooks to remove layers of complexity, hocs, and have the code cleaner and maintainable.

Markdown

Grommet currently uses 'markdown-to-jsx' library which supports Github-flavored markdown, but in some cases, we will need flexibility for more custom markdown. Hence, we should explore the option of adding an additional compiler to Markdown component, https://remark.js.org. (plus remark2react) and potentially supporting a way to incorporate additional remark plugins.

Form & FormField

More extended behavior of validations and customization through the Forms.

Research

In 2019, Grommet's research agents discussed with users and the community to collect feedback on the general grommet experience and the onboarding process.

We are aiming to run more usability testing on the grommet-designer and improve continuously. If you would like to participate in our usability testing and research effort, please reach out on Slack or GitHub and let us know.

I18N Localization

Create a project sample to show how localization packages could be used with grommet.

Training

In 2019, We invested mostly in the documentation and improving access to available resources. In 2020, we aspire to have more tutorials, blogs, docs, meet-ups and potentially videos (fingers crossed).

Monorepo

Our goal is to be able to test our own projects as part of grommet releases and have embedded project examples as part of Grommet. we saw limitations with CRA projects that put the effort on hold as most of the users will use CRA for their projects. In 2020, Mwe target to move grommet-site and grommet under the same repo so grommet changes will also be published to v2.grommet.io immediately.

Server App (Ferret) and Design-System

In late 2019, we started an HPE Design-System library built on top of Grommet and more specific to HPE designs and layout. https://design-system.hpe.design/ We will build the Server App from the Design System core components.

Components

Part of extending our component library, we've added more semantic components to our portfolios such as List, Header, Footer, Nav, and Main.

We are aware of the challenge and trade-offs of building complex semantic components that require making decisions on the default rendering and make assumptions that might not work for all users. Our inclination is to add components with fewer assumptions as possible that will be as customized as possible, i.e. not all v1 components are aligned with the v2 mindset hence you may not find them all.

Feel free to share with us ideas for components that would go on the core library and conclusively can fit a variety of use cases and be modular for usage.

On-Going Roadmap

TypeScript

We have grown and come a long way from an automated type generator to a more accurate, complex and sophisticated typing. We've embedded typescript as part of our workflow and build process with corresponding storybook examples to test type changes and verify bugs and fixes immediately.

We are not TypeScript experts but we are comfortable with where grommet and TypeScript are at the moment. Fundamentally, Grommet can be used with typescript, and we have sample projects and storybook examples to support it. Any requests or contributions for typescript enhancements will be welcomed.

React Native

We are still exploring React Native for grommet v2. We need expertise and community support to get this one rolling.

Analytics and SEO

We have added static HTML file rendering as a secondary build step on the grommet-site. The static build is generated by crawling the app for relative links. We are also monitoring the analytics data on the website to see where users mostly spend there time and what are the most useful resources, related PR

styled-components

With the new styled-components 5.0 release, there had been performance concerns that had been addressed as expected. We have not experienced a need to move away from styled-components, related issue.

We are curious to hear more feedback from users that have completed the migration and can share their pros/cons with us.

Tools

More tools are now available for Dev & Designers for building prototypes and themes grommet-designer and theme-designer

We are aspiring to improve the grommet-designer tool and embed it into our work process. If you would like to provide feedback or participate in our usability testing for the tools, please reach out on Slack or GitHub and let us know.

RTL (Right to Left)

By default grommet behavior and handling is left-to-right (LTR). In recent releases, we introduced the functionality that writing and layout displays start from the right of the page and continues to the left. Texts, inputs and Layout components had been adapted to handle RTL. So don't hesitate to send us feedback from your Grommet - RTL experience, we are looking forward to hearing from you and incorporate your feedback. A nice addition will be to have an RTL sample project.

code-sandbox removal from documentation links

Due to too much scattered information across different tools and sites, we are trying to look for better alternatives to share templates and starter examples. We will continue to use code sandbox for our day to day slack conversations when sharing issues or code samples among the community.