-
-
Notifications
You must be signed in to change notification settings - Fork 4k
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
React Support for client side #6044
Comments
We are currently using React and Vue.js and are exploring an approach to write custom components once with preact and then use a thin wrapper to use the component both in react (or just use the preact version) and in vue. Maybe we should also think about something similar to make it possible to use another frontend if required (or for a module that provides vue instead of react). |
In my personal experience using 2 frameworks whuch does same job only adds complexity and makes maintenance harder and implementation flaky. I would rather stick 2 just one framework. Evn using angular 1 and 2 together needed a lot of duct tape. So I would recommend to keep Vue out of question for now. From point of Jhipster, what would be more beneficial would be to find a way to add alternative options simpler |
Absolutely! Supporting two frameworks in core generator is hell. When we find a way to write components (e.g. table component) once (in preact) and can use that component in different ui frameworks with little overhead (preact is 3kb) this would at least help to be able to add additional options (either in the main generator or as a module) as we would not need to rewrite everything in the new fraemwork, but agree, lets focus on react first. |
@sendilkumarn I see that you assigned items 2 & 3 to yourself, I have already done this on my company project which is based on JHipster-react so I'll do the base changes and then you can work on top of that. |
Okay 👍 |
Just wondering -- from the current EDIT: Maybe keep an eye on this -- FB are aware that this is scaring a lot of folks: facebook/react#10191 |
@erikkemperman I'm aware of it. Technically we are not an Apache Foundation project and hence this doesn't affect us. I do understand the BDS + Patents license is slightly less permissive than APL2 (I'm not a lawyer) But in any case this shouldn't worry us, in the rarest ever possibility that someone encounters a legal issue becoz of the React licence, Never happened so far, it would be very very easy to switch to something like Preact or Inferno (which are 100% API compatible) which are MIT licenced. SO let's not worry much about this now. Also once React support is added it's too easy to add an option to choose between React or Preact so for me this is not an issue at all. |
@deepu105 Thanks for the quick response Deepu! Yes, I know JH is not an ASF project, I was just curious if their reasoning would apply here as well. Apparently the fear is, roughly, that using React in your projects might allow FaceBook to co-opt all of your patents, related or not, because you give up the right to sue them for infringement. It's probably not actually that bad, but still... ASF doesn't drop this bombshell lightly I imagine. I just wanted to make sure this concern is on the radar, that is all. |
@erikkemperman yes of course, in fact I tweeted about the legal implication about 1 year ago, and since then I'm regularly attacked by React developers in France. For me we have no issue at all here, but this needs a long explanation. First let me detail the issue with React:
Now let me detail the issues we have with the use of React in JHipster:
|
I was just thinking of the users, actually -- myself included :-) Thanks for detailed response, good to hear you guys have thought about this. |
@jdubois we are anyway safe even for your last 3 points, If we encounter issue or if we go ASF we will just switch React with Preact which has MIT license but works the same way as React and works with all other libs, so the only code change would be to change the imports technically (It can be done by find replace) look at this for example ui-router/visualizer@f07f09c |
Instead of switching to preact, why can't we start with preact 😜 @jdubois really detailed and well laid out response 👍 Thanks 😄 |
Hello, little question. Why not use Material-ui ? I was planning to use it for Desktop application, and switch to material-ui-native for mobile (when possible). Could it be possible to have the choice in the command line ? |
@survivant we want to align more towards our current JHipster Angular UI which is based on Bootstrap. |
@sendilkumarn make sense, I'll have to check how to create a module. Could be more complete that way, if I want to generate code for web and native applications. |
@sendilkumarn React is more popular and has more reach so lets start with it first, we will see about issue if we ever encounter one |
@deepu105 I'll like to play around with this branch. How can I generate app with the code in the branch ? I try to follow the documentation on : https://github.com/hipster-labs/generator-jhipster-react but I obtain this error message
I'm not too familiar with npm thanks, I hope to be able to help to test |
@survivant, these instructions are obsolete as react support is no longer a module but a sub generator of main generator. So it should be:
And to use in an app:
|
@gmarziou thanks. I'll start from there. If I found issues, should I start to flag them ? for now, it's not working. here the output`C:\Data\workspace_perso\github-forks\jhipster-react-branch>yo jhipster |
I got same error when I tried this morning with 2 languages too. |
Yes i18n might not work, anyways I'm planning to rewrite to typescript and use bootstrap over the weekend, so next week I hope it can make some basic apps |
I would suggest using redux saga with react redux instead of the Promise Middleware. Seems like a more cleaner approach. I'm no expert on react though. |
I have looked at Saga and its an overkill for crud operations. Its useful if you have really complex side effects to manage. Also redux advices to start simple with promise and thunk and use saga or observable only when you have complex scenarios. Also you can always use multiple libs with redux on same app as all are middlewares. So you could use promise + thunk for simple use cases and when you have complex ones you could use saga or observable |
@deepu105 let me know once you have committed the code 👍 This is gonna be react-ful week 😝 |
I'm brand new to react but have been playing with it this week and discovered create-react-app that, as I'm sure most of you are already familiar with, hides details (webpack, babel, etc) in a react-scripts dependency that is managed and updated. Feels like a spring boot dependency bom. I suppose with typescript we'd already have to "eject" but I do quite like delegating the auto updating of react app dependencies to the maintainers of this >30000 star project. If typescript isn't set in stone, it would be awesome if we could leverage the tool without ejecting. Do you think that would be possible or desirable? Again...I'm new...which is why I don't want to configure with tools that keep shifting....grunt, gulp, webpack... :) The convention sounds really attractive. Refs: Update: |
I know about the app and I have tried it as well. But I dont it will fit
our needs. Its easy to use for just getting a skeleton but after that you
have to fight it to do a lot of stuff based on our requirements. More than
that as we need to template stuff it doesn't make much sense to use that
just for dependency management. Anyway we will be using a lot more
dependencies as well. Also unlike Angular CLI the create react app is quite
basic
…On 21 Jul 2017 3:25 am, "Stephen Doxsee" ***@***.***> wrote:
I'm brand new to react but have been playing with it this week and
discovered create-react-app that, as I'm sure most of you are already
familiar with, hides details (webpack, babel, etc) in a react-scripts
dependency that is managed and updated. Feels like a spring boot dependency
bom. I suppose with typescript we'd already have to "eject" but I do quite
like delegating the auto updating of react app dependencies to the
maintainers of this >30000 star project. If typescript isn't set in stone,
it would be awesome if we could leverage the tool without ejecting. Do you
think that would be possible or desirable? Again...I'm new...which is why I
don't want to configure with tools that keep shifting....grunt, gulp,
webpack... :) The convention sounds really attractive.
Refs:
- ***@***.***/why-i-love-create-react-app-e63b1be689a3
- https://github.com/facebookincubator/create-react-app
- https://github.com/facebookincubator/create-react-app/blob/master/
packages/react-scripts/template/README.md
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#6044 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABDlF61yWf5bXmfL4ZHSVQXqls5KiG3zks5sP_3xgaJpZM4OP0h8>
.
|
Using Jhipster 4.14.1 with --experimental for React. How to implement the social login buttons? The "tip" I found on jHipster doc is for angular. Could not find any information for React. |
We have removed support for Social Login, Please use the Oauth2/OIDC option
along with Keykloak or Okta for that
Thanks & Regards,
Deepu
…On Fri, Mar 30, 2018 at 1:47 PM Hendrig Sellik ***@***.***> wrote:
Using Jhipster 4.14.1 with --experimental for React.
How to implement the social login buttons? The "tip" I found on jHipster
doc is for angular. Could not find any information for React.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#6044 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABDlFyIQXAlxj8yUEXJOmMNKvHvROG6Nks5tjhs1gaJpZM4OP0h8>
.
|
@gmarziou BTW, when will JHipster5-Beta be released ? |
Easy one: when it's ready 😉 In April probably |
@jhipster/developers the React client should be much more stable and feature complete now, please test and report any issue found here |
Here some React builds: https://travis-ci.org/hipster-labs/jhipster-travis-build/builds/359716846 |
#7392 should fix many of the issues |
@agaspardcilia @chrisdns can you guys check the issue/bug items that are not ticked yet? Also can you guys test the combinations mentioned in the original comment and update any issues found? |
Also we need to add some protractor tests. The skeleton files are already there, it needs some cleanup and fixes. Also needs template for entity. We can reuse them from Angular with some slight modifications |
Awesome! BTW we'll all need to meet next week at Devoxx :-) |
Yup, we can check and mark things together :)
Thanks & Regards,
Deepu
…On Tue, Apr 10, 2018 at 9:38 AM Julien Dubois ***@***.***> wrote:
Awesome! BTW we'll all need to meet next week at Devoxx :-)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#6044 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABDlFyMtY4YkYertrgXFzDM_4bh9RkjMks5tnGGMgaJpZM4OP0h8>
.
|
I was looking at admin module codebase to see how react and redux are integrated, and noted that we don't fully leverage cache/store. I am not sure if this already got discussed and reasoning to make n/w calls instead of lookup from redux store (which already have same data). |
@vishal423 nope there was no discussions. we cant always read only from Redux as the data might be outdated due to changes in the backend by other people. I did want to normalize the store data model so that getAll and get fetches data from the same place |
@vishal423 i'm happy to discuss it now if you want :) |
@deepu105 I tried to see what was done or not here is the result: Modules
I honestly have no idea what you meant with these, so I guess it's more an Angular direct conversion.
Issues/Bugs
Test casesApplication
Every configuration described above has been tested without entity (except Elastic search). EntityI believe everything is working concerning entities. |
@deepu105 , stale data is always an issue with cache. Caching would also be tricky with server side pagination that goes over records not in cache. I can see following options:
If we think stale data would be major issue, then, I agree to limit to view(id)/update/delete operation at moment as list page should fetch latest data. |
@vishal423 yes there are many ways to workaround, but they all have issues which are not acceptable for user experience and data integrity. |
@deepu105, I still feel we could at least do this for view, update and delete operations as the requested user data would already be in cache (fetched during list page rendering). To further safeguard against stale data, we could store last synced timestamp in store and if that's greater than configurable limit, fetch from server, otherwise, serve from cache. If end users are interested in no stale data, then, this allowed limit can be changed to zero and that should ensure sync from server. Those who like to leverage cache for better performance can tune this configuration appropriately. |
@vishal423 unfortunately, I don't agree. Its really important to fetch latest data before an update operation. In a real world app with multiple users this will be a huge issue and IMO client side caching is a bad practice for CRUD applications. We already have server side caching and if you really need this its easy to add an Axios middleware to cache the requests. Client side caching will only work for PWA apps which are intended to be offline and for apps which has very less update operations. I would suggest you add this as a Tip so that those who are interested can make use of it. |
Still one failed build left: react with OAuth2 Hope we can fix it before the next release |
Here's the error from above:
I'm looking into it now. |
@mraible @pascalgrimaud I have fixed this issue I am about to PR it soon. |
For me this is all done, at least the development stream is done and if there are some bugs or missing features they should be some specific tickets, as otherwise it's impossible to follow here. |
I'll close this after checking some stuff |
@agaspardcilia @chrisdns could you check the boxes that have been completed here? I'd like to have this closed, as support is now merged - then we could do smaller tickets, one per missing feature |
I'm closing this even though some of the checkboxes are not checked. The reason is as below
|
This is the central ticket for our React support.
This will be an evolving ticket, I'll create a Project once we have identified TODO items clearly
Any TODO must be added/modified to this opening comment.
The below is the Framework choices made so far:
The below are the initial list of TODO:
Modules
Issues/Bugs
Test cases
Application
--skip-user-management
flag--jhi-prefix
flag--skip-server
flagEntity
cc @jhipster/developers
The text was updated successfully, but these errors were encountered: