js and React experts,
Situation:
In our portal we have 2 completely different applications: CMS (PHP based with its own framework, templating engine and so on) and an Online Shop (Next.js based, React technology stack).
Now, there's one module which is already completely built in the Next.js world, but it doesn't exist in the CMS world.
Challenge:
implement the same functionality also in the CMS part of the website with minimal possible effort
Obviously, the naive way would be just to implement it once again in the CMS technology, which is possible, but not very elegant, as the implementation in Next.js will be supported by a separate team, which is going to change things over time and add features, that all would need to be implemented twice.
I'm new to React, but according to an example from the official docs there is a way to run a React app encapsulated in one div element (see https://nextjs.org/learn/foundations/from-react-to-nextjs). I tried it and this minimal example worked embedded in the CMS templating context just fine.
Now, the question is: Would that also work with a Next.js component? Can I render the complete subpage with a separate CMS engine and only one single encapsulated HTML element with Next.js? From what I understood Next.js is built to take over the rendering of the whole page completely, but maybe there's some advanced way to make it work React-like?
Thank you very much for your input.
I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.
I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.
I have application with logic similar to google's app switcher, let me call it Wrapper. This application take place across all google services and has consistent UI everywhere.
I am looking for solution to inject into my Wrapper application several finished different apps with their own styles, views and JS. They are written with different technologies like React and Angular.
How can I implement such architecture? Are Web-components a solution for this, if yes - please provide me some examples. (The aim is to deploy wrapper separately and all content applications too, so they will have consistent UI and logic from wrapper).
Please do not mention the iframe!
We have done similar model called UI shell, where any developer can develop a microapp in any tech stack like angular, react, vue etc but the main app will consume them as part of its application and display them as part of the main app. Are you looking for similar approach.
I'm building a webapp and ios/android (same app). At first I thought cordova may be a good choice then after reading I thought React-native may be a better choice.
My question is: Will I have to write the same app twice (one in react for web and one in reactnative for mobile) ?
I've seen some library that can share react-native component for web but I feel I'm gonna be limited.
What do you think ?
Edit: One more question
With react I would use flux (and probably now redux) what should I do to keep my react-native app clean and readable, I mean how should I manage data there ? thanks for your answers already
Doing the same thing right now - I am not sharing the code base because the content of web/mobile app is different - I am using web for administration and mobile app for viewing the content.
React native uses the native views UIView, Text etc for display. You can't have the same code base for them.
React native uses flex box( it has its own implementation) so that also wont work for web react projects.
The only way is to keep them seperate.Also Web and App would be having different design .
Right now you can't share code base b/w React Native / React codes since one relies on native UI code and the other html DOM. There is an interesting project to combine the two (https://github.com/necolas/react-native-web) but it's by no means production ready.
I know this may be a late answer but it will be helpful in future. Check https://github.com/este/este, it has different stacks for mobile, web and server. You could use common components in common folder. It uses firebase as a backend service, but you can change to any service.
While it's true you can't use the exact same code for react native and react JS, you can architect your code base to reuse as much code as possible. Check out this project:
https://github.com/benoitvallon/react-native-nw-react-calculator
You actually can use the same code with the use of WebView component in React-Native.
Here is a link:
https://facebook.github.io/react-native/docs/webview.html
React Native relies on Native UI code and not html, meaning that all view components will have to be rewritten. However, if you keep all you logic out of your 'dumb' functional components in your web app, you should be able to reuse a substantial portion of your web code.
For instance, you might have an outer container that handles anything you want to happen on mount with componentDidMount, handles and defines onClicks, and determines which view components to render. This code can be exactly the same in web and mobile, and then your 'dumb' function view components would differ in that one uses native view elements and the other uses HTML.
The code for the web-app and the native apps can't be the same (or you might be fine with a WebView wrapper as apps). I suppose you're asking that because the functionality would be the same for both interfaces. The look and feel can be (almost) the same.
If you see your apps only as views, the backend (controllers & models) could be shared with multiple platforms. You could also try a Backend as a Service like Firebrand or Parse. Not really an answer on the redux part but it is an easy way to get kickstarted.
I definitely think you can reuse some of your code. If you're using redux which you probably will if you have some complexity - stuff like actions and reducers are easily reusable. While the UI components itself is not reusable always you can reuse some of the stuff supporting it.
Like timvp mentioned you can also use WebViews to reuse the code but I would not recommend since it does not have the same kind of performance as native modules always.
I suggest you to look at Redux architecture.
You will likely get the following folder architecture :
.
└── src
├── actions
├── components
├── containers
└── reducers
If you organize well your code, the react-native specific component will only be located inside the component folder.
All the logic and even the organization is reusable.
You will rewrite the components with plain html instead of native component. And also the apps entrypoints as they are different, but I don't find it is a really big deal.
More redux examples https://github.com/reactjs/redux/tree/master/examples
To answer to your second question : Redux is the state(data) manager.
It flows in a unidirectionnal manner.
For example, how do you handle a user click ?
The event is fired from the component
The container (which holds the logic) dispatches the action (say BUTTON_CLICK)
The reducers receive the BUTTON_CLICK with the current state, only the concerned ones will update the application state (ex: increment a counter)
When the state is updated, the render tree runs
Here is the full explaination of redux flow https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0
To better understand why this mess is awesome read this http://redux.js.org/
You can share most of your code between React and React Native (especially if you use react-native-web.
Try this article : http://jkaufman.io/react-web-native-codesharing/
It gives a pretty neat example of how to do it.
I highly recommend that you keep most of your domain logic (API calls, flux, and even Smart component handling the logic) and only rewrite the dumb components handling the view so that you can implement the best UX for either Desktop or Mobile.
You can name your dumb component view files like so:
MyComponent.js (for your web app)
MyComponent.native.js (for your native app) or MyComponent.ios.js & MyComponent.android.js if you rather have different views according to the platform.
The short answer is... YES!...
You need to write 2 code-base, but read on for the longer answer.
React Native is created for coding Application using some features of React, while React is created to do Website and Web applications, so they have similarity in nature, syntaxes and library which both using, So basically you need to rewrite some parts of you application, I can say around 20% to 70% percent and it really depends.
I compare React Native and React with some code samples from both for a small component, you can check the differences, but just let you know, for a real application, the difference could much more than what you see here:
React Native
React Native lets you build mobile apps using only
JavaScript. It uses the same design as React, letting you compose a
rich mobile UI from declarative components.
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class WhyReactNativeIsSoGreat extends Component {
render() {
return (
<View>
<Text>
If you like React on the web, you'll like React Native.
</Text>
<Text>
You just use native components like 'View' and 'Text',
instead of web components like 'div' and 'span'.
</Text>
</View>
);
}
}
more info here
React
React makes it painless to create interactive UIs. Design simple views
for each state in your application, and React will efficiently update
and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
import React, { Component } from 'react';
class HelloMessage extends React.Component {
render() {
return (
<div>
<p>If you like React Native on the devices, you'll like React.</p>
<p>You just use web components like 'div' and 'span',
instead of native components like 'View' and 'Text'.</p>
</div>
);
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
more info here
I wonder why noone is mentioning ReactXP. ReactXP is
a library maintained by Microsoft that lets you create web, ios, andoid and windows apps with React:
XP means X-Platform
Share most of your code between the web, iOS, Android, and Windows.
https://microsoft.github.io/reactxp/
Other options as mentioned are
https://github.com/necolas/react-native-web
https://github.com/este/este
React Native is for apps only, it generates fully native components and React Native has specific syntax for its components.
Using some package to conert React Native code base into web would be noth worth it as you would be limited, and you go against React Native flow, it would be the same as converting Swift or Java written app into web via package. It is not optimal and limited.
This is the beauty that you learn javascript and with React(or any other library/framework of your choice) you write best possible web app with web experience, while at the same time using your knowledge on JS you can deliver fully native experience into your apps.
That's about the point of getting close to doing web and native - you can use the same core language and deliver best experiences on both worlds.
You can share the business logic using the same JavaScript codes (simply by copying the code). On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).
You can refer to react-spa-jwt-authentication-boilerplate (*) as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.
(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.
i'm trying to do the same thing. RN is not all the same with React, you will have to deal with native views like: Text, View, ScrollView, ListView, etc. except this, they are nearly the same.
so, you can organize your code like this:
root
src
lib // code for all other three platform
android // code for android only
ios // code for ios only
web // code for web only
index.js //for web
index.ios.js // for ios
index.android.js // for android
I'm trying to use React to simplify the way I build UI for an app I'm writing. I've got a good proof of concept working in a single HTML page, but I need to split out the JS into individual modules to make it easier to maintain.
I know how I would structure the app if every piece of the puzzle is known at build time. Something like this: https://github.com/jordwalke/reactapp. However, the UI will be built up dynamically in PHP, nesting various components which I want to pass into the app.
My initial thought of dumping the generated code into a script tag and having the Javascript find it has led me into a horrible dependencies hell.
My primary question is:
How do I pass something like <panel><group><field /></group></panel> into the app so I can call React.render() on it?
As #llernestal and #MikeDriver suggested in the comments, I used PHP to build a JSON representation of the UI and had React build the components needed to render the UI.