My question is, can I use the react framework with #spartacus storefront? this is because our frontend application is developed in React and we want to use #Spartacus storefront to leverage advantages like decoupling front-end and Hybris build ..etc. but as it is developed on angular I am not sure whether it supports other frameworks like React within it.
There is some effort in making possible using web components as cms components, so you could use any technology to author them (including React), but it's still in the experimental phase (but works already).
More info is available in the docs:
https://sap.github.io/cloud-commerce-spartacus-storefront-docs/customizing-cms-components/#using-web-components-as-cms-components-experimental-support
And here you can find some example POCs for React, Vue, and Svelte:
https://github.com/dunqan/react-cms-web-component
https://github.com/dunqan/vue-cms-web-component
https://github.com/dunqan/svelte-cms-web-component
Spartacus needs Angular. So, I would say "NO", unless you want the complexity of integrating Angular with React.
Related
I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i integrate yFiles for html BPMN editor in my app. I have already downloaded its evaluation package from yworks.com & integrated the pack in React following the demos. But now i am stuck because there are not much tutorials available specifically for yFiles with react. When i searched for it, i found lots of tutorials of bpmn.js with react. Please help me with how can i go about it. I am new to yFiles I have looked into yFiles evaluation pack tutorials and i still dont know how to go about it in react. Also i have to use yFiles only due to client's requirement. Thank you for any help.
yFiles for HTML is not a React component - in fact it's a plain JavaScript component, that is not based on any third party framework or even software.
This doesn't mean that you cannot integrate it into React or Angular or Vue.js or any other well-behaved JavaScript client framework. In fact yFiles has been built to support the integration into all of these frameworks and if it doesn't work with a specific framework, this usually indicates a short-coming or more likely a bug in the third party framework, rather than in yFiles! After all yFiles is just this: plain JavaScript that manages a part of your HTML5 DOM (one div element and all it children, to be precise), a few lines of CSS and the rest is just JavaScript. If your UI library can provide these basic requirements (and React does, of course), yFiles can be made to run with that framework.
As you said, there are these various integration samples available that show how to integrate third party frameworks and yFiles (both with yFiles being a "client" as well as yFiles hosting DOM snippets created and maintained by these third party frameworks: https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit
For React, there is actually an additional repo on GitHub (which is not part of the evaluation package): https://github.com/yWorks/yfiles-react-integration-basic
React is very opinionated about the way an application or component should work. yFiles does not follow the React approach (and I honestly believe it would be a bad idea if it did), but the component you build can. The idea is to create a custom React component that internally uses yFiles for HTML for the visualization, the editing, and the handling of the BPMN editor. Just like you would encapsulate a native HTML5 textarea and two buttons into a React component, you encapsulate the "div" that is used by yFiles to manage the BPMN visualization and editor.
The BPMN demo does not use React. In fact it uses plain old HTML and does not use any real framework for the UI. This means you need to (and can) take that code and wrap it into a custom React component.
With the node module version of yFiles for HTML and the es6 style sample code, this should not be too difficult. After all it's just JavaScript without any further dependencies.
There are no additional tutorials for yFiles in the context of React. However that should not be much of a problem as any tutorial that shows how to wrap a generic JavaScript component or how to create a new one from scratch should be applicable.
If you run into a specific issue, post your question here (if it's about React) or contact the support team at yWorks if you are sure this is a problem specific to yFiles and not a generic JavaScript problem. Of course StackOverflow might work, too, in the yFiles case, however there aren't that many yFiles developers that hang around at StackOverflow, I think. Most of the time it's me or someone from the yWorks team, anyway.
I have been using ionic 3 to build mobile applications. With the release of ionic 4 where you can use react or vue or angular, What is the performance difference building an ionic 4 application using react vs angular vs vue.
It depends for you.If you are good command in angular then u should go for it.React and Vue it will take time to stable and not more tutorials and blogs.
I think you should go with angular
Well, this depends on you. There is nothing the three of them can't do. But there are some important factors to consider as well. I will like to compare React and Vue for instance.
React is developed and maintained by facebook developers, for this reason, it has a great and large community of developers working on it. While Vue is developed by an individual, and its community is just growing.
React has more open jobs opportunities than Vue
React will enhance your JavaScript ability more than Vue, though Vue is very easy and fun to learn.
Here are some few links to help you decide: https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd
https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847
I would like to build a complicated web component that:
I Can use in my legacy web site (or any other site)
It can be used weather my web site is built with Angular/Angular2/React/Jquery etc...
I can use any technology to build it Angular/Angular2/React etc...
Avoid dependencies & versioning collisions (i.e my component is built with Angular 1.5.6 and the implementing website has Angular 1.4.7)
Would using NPM module could solve this issue (versioning, depenencies etc..) ?
Edit: (example)
For example i would require my component via npm
which has the dependency (requires) the framework i chose (i.e angular 1.5.6)
in this scenario wouldn't my component code use my dependency from NPM (regardless what the site uses)?
You may use a component built with angular on a legacy site but you must load angular before. You should be aware of name collision you might have with other directories.
If the site is already built with angular 1.x you may just blend your component in, considering that your component is compatible to the angular version the site is using.If it is not, I think react can be possible because it may blend in.
In case the site is built with angular 1.4.7, as you have said, you might need to downgrade your component to be used by 1.4.7. This means that if you're using angular.module(...).component you will need to switch it to directive. Alternatively you may switch the site to work with 1.5 if it is possible. If not, you may go back to react.
If you want to use angular 2.0, you may do so side by side with angular 1.x, however, the legacy application needs to be bootstraped with angular upgrade module, using upgradeAdapter. This means you need to interfere with the application, which you don't want to, if I understand you correctly.
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.
I know what angular.js is and I even had a question about it #Why use AngularJs in frontend if Laravel is already used as backend?.
but recently I started to read about React.js and from its site (its the V in the MVC) which is exactly what am after "handling the view and nothing else".
for me, I think Angular.js as an MVC framework was made to be used with something that is built with JavaScript from start to end like Node.js
and it seems like an overkill when used with something like Larval, where I simply need something to handle the frontend and nothing else + Angular have 2 main drawbacks
with the latest news about a new version that won't have back compatibility with the current version makes me even feared to start learning it just to find that more or less every project out there is using the old version which mostly is true.
angular renders the whole dom if anything got changed which again is an issue for big projects.
so based on the above, plz note that I want to learn/use JS solely to enhance the user experience not to build another Gmail or Facebook and so my question is,
could React.js be used with Laravel to handle the view and do everything Angular was going to give, or I have to use Angular liked or not?
could React.js be used with Laravel to handle the view and do everything Angular was going to give?
No
React is just for views. React components are stateful components with some really clever rendering stuff happening behind the scenes. To build a fully functional front-end app, you'd need to tie in some other code (or write it yourself).
React works well with Facebook's Flux architecture. I would suggest looking into that to learn how to manage the state of your react components.
What's key to understand here is that Flux and React are not parts of a large front-end framework. React is a library and Flux (as provided by Facebook) only provides a Dispatcher. The rest is up to you to implement. There are some pre-existing implementations you can look at if you need some help to get started.
What I like about flux is that it allows me implement things the way that fits my application best. React takes care of the heavy DOM lifting and is very easy to learn. Compared to Angular, I don't have to learn arbitrary conventions and gigantic APIs of a huge framework.