search

jhipster / generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
https://www.jhipster.tech
Apache License 2.0
21.56k stars 4.02k forks source link

React Support for client side #6044

Closed deepu105 closed 6 years ago

deepu105 commented 7 years ago

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

Entity

cc @jhipster/developers

atomfrede commented 7 years ago

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).

deepu105 commented 7 years ago

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

atomfrede commented 7 years ago

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.

deepu105 commented 7 years ago

@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.

sendilkumarn commented 7 years ago

Okay 👍

erikkemperman commented 7 years ago

Just wondering -- from the current package.json in this branch it seems this would be adopting FaceBook's react implementation, is that right? Have you guys considered the legal implications, given the controversial BSD+PATENTS attached to it? I am not a lawyer, but there's quite a bit of unease around their license. See, e.g., https://news.ycombinator.com/item?id=14779881 https://react-etc.net/entry/apache-foundation-bans-use-of-facebook-bsd-patents-licensed-libraries-like-react-js Maybe it would be better to look at alternative implementations?

EDIT: Maybe keep an eye on this -- FB are aware that this is scaring a lot of folks: https://github.com/facebook/react/issues/10191

deepu105 commented 7 years ago

@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.

erikkemperman commented 7 years ago

@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.

jdubois commented 7 years ago

@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:

erikkemperman commented 7 years ago

I was just thinking of the users, actually -- myself included :-) Thanks for detailed response, good to hear you guys have thought about this.

deepu105 commented 7 years ago

@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 https://github.com/ui-router/visualizer/commit/f07f09c23a2e564b03dd60c567631dee39aa1929

sendilkumarn commented 7 years ago

Instead of switching to preact, why can't we start with preact 😜

@jdubois really detailed and well laid out response 👍 Thanks 😄

survivant commented 7 years ago

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 ?

sendilkumarn commented 7 years ago

@survivant we want to align more towards our current JHipster Angular UI which is based on Bootstrap. Adding a choice to choose between material UI and bootstrap will make the project more cumbersome. So definitely no for now. May be you can add in a module for that.

survivant commented 7 years ago

@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.

deepu105 commented 7 years ago

@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

survivant commented 7 years ago

@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

$ yo jhipster-react
Error jhipster-react

You don't seem to have a generator with the name “jhipster-react” installed.
But help is on the way:

You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/.
Install them with npm install generator-jhipster-react.

To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators.

If yo cannot find the generator, run yo doctor to troubleshoot your system.

I'm not too familiar with npm

thanks, I hope to be able to help to test

gmarziou commented 7 years ago

@survivant, these instructions are obsolete as react support is no longer a module but a sub generator of main generator. Now you can follow https://github.com/jhipster/generator-jhipster/blob/jh-react/CONTRIBUTING.md#setup.

So it should be:

git clone https://github.com/jhipster/generator-jhipster
cd  generator-jhipster
git checkout jh-react
yarn install
yarn link

And to use in an app:

mkdir my_react_app
cd my_react_app
yarn link generator-jhipster
yo jhipster
survivant commented 7 years ago

@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

Welcome to the JHipster Generator v4.6.0
Documentation for creating an application: https://jhipster.github.io/creating-a
n-app/
Application files will be generated in folder: C:\Data\workspace_perso\github-fo
rks\jhipster-react-branch
WARNING! Failed to connect to "git://github.com"
                     1. Check your Internet connection.
                     2. If you are using an HTTP proxy, try this command: git co
nfig --global url."https://".insteadOf git://
 ______________________________________________________________________________

  JHipster update available: 4.6.2 (current: 4.6.0)

  Run yarn global upgrade generator-jhipster to update.

 ______________________________________________________________________________

? (1/16) Which *type* of application would you like to create? Monolithic appli
cation (recommended for simple projects)
? (2/16) What is the base name of your application? jhipster
? (3/16) What is your default Java package name? com.mycompany.myapp
? (4/16) Do you want to use the JHipster Registry to configure, monitor and sca
le your application? No
? (5/16) Which *type* of authentication would you like to use? JWT authenticati
on (stateless, with a token)
? (6/16) Which *type* of database would you like to use? SQL (H2, MySQL, MariaD
B, PostgreSQL, Oracle, MSSQL)
? (7/16) Which *production* database would you like to use? MySQL
? (8/16) Which *development* database would you like to use? H2 with disk-based
 persistence
? (9/16) Do you want to use Hibernate 2nd level cache? No
? (10/16) Would you like to use Maven or Gradle for building the backend? Maven

? (11/16) Which other technologies would you like to use? Social login (Google,
 Facebook, Twitter)
? (12/16) Which *Framework* would you like to use for the client? [BETA] React
? (13/16) Would you like to use the LibSass stylesheet preprocessor for your CS
S? Yes
? (14/16) Would you like to enable internationalization support? Yes
? Please choose the native language of the application English
? Please choose additional languages to install French
? (15/16) Besides JUnit and Karma, which testing frameworks would you like to u
se?
? (16/16) Would you like to install other generators from the JHipster Marketpl
ace? No

Installing languages: en, fr
events.js:160
      throw er; // Unhandled 'error' event
      ^

TypeError: _this[method] is not a function
    at blockTemplate.templates.forEach (C:\Data\workspace_perso\github-forks\gen
erator-jhipster\generators\generator-base.js:1933:42)
    at Array.forEach (native)
    at constructor.writeFilesToDisk (C:\Data\workspace_perso\github-forks\genera
tor-jhipster\generators\generator-base.js:1910:45)
    at constructor.writeFiles (C:\Data\workspace_perso\github-forks\generator-jh
ipster\generators\client\files-react.js:409:10)
    at constructor.writing (C:\Data\workspace_perso\github-forks\generator-jhips
ter\generators\client\index.js:366:36)
    at Object. (C:\Data\workspace_perso\github-forks\generator-jhipst
er\node_modules\yeoman-generator\lib\index.js:417:23)
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\run-
async\index.js:25:25
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\run-
async\index.js:24:19
    at C:\Data\workspace_perso\github-forks\generator-jhipster\node_modules\yeom
an-generator\lib\index.js:418:9
    at runCallback (timers.js:672:20)

C:\Data\workspace_perso\github-forks\jhipster-react-branch>
gmarziou commented 7 years ago

I got same error when I tried this morning with 2 languages too. Maybe try without i18n first.

deepu105 commented 7 years ago

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

andidev commented 7 years ago

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.

deepu105 commented 7 years ago

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

sendilkumarn commented 7 years ago

@deepu105 let me know once you have committed the code 👍 This is gonna be react-ful week 😝

sdoxsee commented 7 years ago

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: As for typescript, there's this fork https://github.com/wmonk/create-react-app-typescript that also seems to have the backing of Microsoft? https://github.com/Microsoft/TypeScript-React-Starter

deepu105 commented 7 years ago

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" notifications@github.com 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:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-316875458, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF61yWf5bXmfL4ZHSVQXqls5KiG3zks5sP_3xgaJpZM4OP0h8 .

deepu105 commented 7 years ago

@sendilkumarn I have committed initial version of TS + BS code. You need to enable sass to test it. I think there are some quirks with i18n and the header menu needs fixing, but feel free to hack on

deepu105 commented 7 years ago

my test config

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.6.2",
    "baseName": "jhReactTest",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "788e69b63dbdc967046927b8e5855fda73e9027c",
    "clientFramework": "react",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en"
    ]
  }
}
deepu105 commented 7 years ago

@sendilkumarn also its mostly not templated yet so other options needs to be templated in and i18n needs to be handled. I'll come up with a solution for i18n

pascalgrimaud commented 7 years ago

@deepu105 : soon holidays for me but, I will try to add:

survivant commented 7 years ago

I tried this morning, but I got this at the end

ERROR in ./src/main/webapp/app/index.tsx
Module not found: Error: Can't resolve './config/translation' in 'C:\Data\worksp
ace_perso\github-forks\test-branch-jhreact\src\main\webapp\app'
 @ ./src/main/webapp/app/index.tsx 13:20-51
 @ multi react-hot-loader/patch ./src/main/webapp/app/index

ERROR in ./src/main/webapp/app/app.tsx
Module not found: Error: Can't resolve './reducers/locale' in 'C:\Data\workspace
_perso\github-forks\test-branch-jhreact\src\main\webapp\app'
sendilkumarn commented 7 years ago

@deepu105 I added few fixes there. Waiting for your i18n 😉

@survivant the errors that you have mentioned should disappear now.

deepu105 commented 7 years ago

@sendilkumarn great thanks. Feel free to take up the next task :smile:

deepu105 commented 7 years ago

I have sample unit tests, will commit those when I find time

deepu105 commented 7 years ago

Base configuration works now image

deepu105 commented 7 years ago

Karma tests works as well

deepu105 commented 7 years ago

@addisoc is working on the settings and password page

gzsombor commented 7 years ago

You work like a robot ! :+1:

jdubois commented 7 years ago

@irshadc @filiipake @erkieh please don't pollute the ticket, this is for people working on the subject (and you spam the whole team here), so I'm deleting your comments

jdubois commented 7 years ago

I started working on this for my current client, @deepu105 @sendilkumarn here is my current feedback:

deepu105 commented 7 years ago

@jdubois create-react app is not like ng-cli it just helps to create a startup skeleton so we have no use for that. I personally think that its a mistake to try to be compatible with these as it only adds overhead to us. At least ng-cli can be used to create components and stuff but create react app doesn't have any such features so I would rather avoid trying to do anything with it.

For Sass yes, I need to add some css files to make it work without Sass. For entity I already have blue prints, I need to find time to template them, I'll put in the blueprint and then we can work on top of it. I dont think we should mandate the use of Registry to use React, the admin pages are cool and are one of our selling points. They are almost complete needs some polishing and fix here and there. Anyway I need them for my company app so I will be completing them anyway. SO for now you just ignore them and focus on the account pages and entity.

If you are gonna start working on it I suggest you start with the account module.

jdubois commented 7 years ago

OK @deepu105 this all makes sense to me (and sorry I'm learning React!) Is it fine with you if I merge the master branch into this branch? This will solve the current build failure (because of Yarn, we also need to find out why) And yes I'm starting to work on this, but there will be other (better) people to implement the React part.

deepu105 commented 7 years ago

Yes please

sendilkumarn commented 7 years ago

@jdubois I agree to deepu's comment on create-react-app.

For no-SASS option we are missing css files.

Reactstrap v5 is coming soon with bs4 beta, so once it is done we can polish things a bit more.

and I am not sure, whether it is only for me, but having a tough time to make it work with yarn. But the application works fine with npm. :)

jdubois commented 7 years ago

Oh @sendilkumarn I thought I was the only one having trouble -> with Yarn I just can't build the front-end. I'm linking this to #6362 but this really makes me think we should re-consider migrating to NPM. At the moment I just can't work :-(

deepu105 commented 7 years ago

React is re licensed as MIT https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

deepu105 commented 7 years ago

Default configuration is working now, sass and i18n is also working

jdubois commented 7 years ago

Great work!!!

deepu105 commented 7 years ago

@jhipster/developers can any body work on the authentication types, JWT works fine needs tests and fix for Session and Oauth2

deepu105 commented 7 years ago

@jhipster/developers also please test and add any issues/comments on this ticket in the first comment issues/todo section