Can I modify some UIs/implementations not specified in guidelines different to demo app?

[sukam09]

Hi. I'm doing this project with TypeScript + React + Axios + Recoil and almost completed. Repository Link

However, I have a question about UIs/implementations. Should I follow demo app operation exactly same? For example, some of operations can be changed depending on developers or used libraries.

Here are some examples.

1. Demo app uses pessimistic UIs but my app uses optimistic UI(see the codes below).

  const favorite = async () => {
    setFavorited(true);
    setFavoritesCount(favoritesCount + 1);
    await postFavorites(`/articles/${article.slug}/favorite`);
  };

  const unfavorite = async () => {
    setFavorited(false);
    setFavoritesCount(favoritesCount - 1);
    await deleteFavorites(`/articles/${article.slug}/favorite`);
  };

2. Demo app does not have loading state on the article page but my app has loading state and also this is a limitation of React(SSR not supported). Moreover, I want to change this loading state to loading spinners or skeleton Uis for visibility.

3. Demo app redirects to register page when follow/favorite articles with not logged in state but my app redirects to login page.

4. In demo app, if user clicks different tags fast, all the tags clicked shown alternately when searching but I want to show only last clicked one.

5. If user clicks paginated lists, scroll remains bottom at the page in the demo app, but I want to pull up scroll to top.

... and more.

Therefore, I want to know my power for modifying some UIs/implementations on this app. If they are not allowed, I will discard them and follow demo app implementations same. Thanks.

P.S. There is an example app modifying some of UIs/implementations, which I want to do.

[geromegrignon]

Hi @sukam09,

I made a complete refactor to this repository earlier this week to integrate the demo/api codebase.
It's the first step to working on a brand new version of the current specs I'm unsatisfied with.

As you faced, you have to use the demo app directly to find out how to implement your solution correctly.
Besides fixing some bug/adding some features, the goal is to provide a better UX: the app provides 'realworld' features and not a modern 'realworld' UX.

At this point, about implementation additions, we'll stick with current specs.
But if you want to help me about improving the current specs with your ideas, you are more than welcome!

[sukam09]

Hi, @geromegrignon.
Thanks for answer but I didn't totally understand it. I just realized that there are so many demo apps in the repository of gothinkster, not only this demo app which made by Angular.

Because I'm doing this project on React so I took a closer look here but all the implementations were slightly different.
React basically supports CSR, not SSR such as Angular, but you said that I should follow the demo app directly, then it can be impossible that there is no loading state in the article page of Angular demo app.

Therefore, I hope you to suggest me a standard demo app when using React to complete this project. Here are my main concerns about implementations.

• About loading state. There are various types of loading states such as loading text(Moreover, there is NO LOADING TEXT on the article page. Only white space is rendered before loaded.) and loading spinners.
• When clicks the paginated list button, loading text appears on the bottom of last article-preview, but I think this is a bug. There are two examples. One has loading text on the bottom, the other does not have loading text.
• Finally, about follow/favorite buttons. Only this demo app used optimistic UIs whreas the others used pessimistic Uis.

Thank you.

[geromegrignon]

For some context about the project itself:

For the original first implementations of the RealWorld specs, their codebase was created and maintained by original maintainers. Then the community created their implementations on their own accounts.

What we call the demo apps is the app deployed on demo.realworld.io.
That's a CSR (not SSR) AngularJS app.
The article page user experience with no visible loading is due to internal behavior: the data is 'resolved' before the navigation happens.

Mind the difference between your current experience and what you are expecting is mostly due to the current state of this demo app: it was created back in 2016 and not maintained meanwhile. Some considerations like proper loading state and global state were not part of the priorities (which i would not agree but it doesn't change the current state of this demo).

About optimistic/pessimistic approaches, the current specs are quite small and don't provide real expectations about the UX itself.

About different behavior you are facing with the different implementations it's due to different level of reviews by maintainers over the years. I plan to release an automated way to review the implementations to help with consistency :)

In the end, mind that's all about improving the specs :)
I'll work on the loading state this month for a v1.5 variant of the current specs to address it and will keep you in touch.

[sukam09]

@geromegrignon

I understand.

Then, should I follow only Angular JS demo app for submiting though my app was made with React? (another demo app is not allowed?)

And can you tell me how can I contribute to improve specs later? I hope to participate in React project but if impossible, I consider to work on original realworld project instead if I can.