Closed deepu105 closed 6 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).
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 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
@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 https://github.com/ui-router/visualizer/commit/f07f09c23a2e564b03dd60c567631dee39aa1929
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. 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.
@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
$ 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
@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
@gmarziou thanks. I'll start from there.
If I found issues, should I start to flag them ?
`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>
I got same error when I tried this morning with 2 languages too. Maybe try without i18n first.
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: 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
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:
- https://medium.com/@tuchk4/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 https://github.com/jhipster/generator-jhipster/issues/6044#issuecomment-316875458, or mute the thread https://github.com/notifications/unsubscribe-auth/ABDlF61yWf5bXmfL4ZHSVQXqls5KiG3zks5sP_3xgaJpZM4OP0h8 .
@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
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"
]
}
}
@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
@deepu105 : soon holidays for me but, I will try to add:
yarn test
tooI 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'
@deepu105 I added few fixes there. Waiting for your i18n ๐
@survivant the errors that you have mentioned should disappear now.
@sendilkumarn great thanks. Feel free to take up the next task :smile:
I have sample unit tests, will commit those when I find time
Base configuration works now
Karma tests works as well
@addisoc is working on the settings and password page
You work like a robot ! :+1:
@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
I started working on this for my current client, @deepu105 @sendilkumarn here is my current feedback:
create-react-app
, and I'd like to avoid the mistake we did with Angular (not using ng-cli
is definitely an issue for me, as we don't benefit from their work). This seems to be easier to do here (as create-react-app
is very simple), could we integrate with it?@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.
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.
Yes please
@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. :)
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 :-(
React is re licensed as MIT https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/
Default configuration is working now, sass and i18n is also working
Great work!!!
@jhipster/developers can any body work on the authentication types, JWT works fine needs tests and fix for Session and Oauth2
@jhipster/developers also please test and add any issues/comments on this ticket in the first comment issues/todo section
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