My project is a journey of three react applications, I want to use some data from application 1 to application 2 and application 2 to application 3.
If data to be passed is small, i passed it in query parameter in url of 2nd application.
And if data is large or private, i am planning to send it as a post which will be received by application 2.
Is there any better way of communicating between react applications?
Can i make each reach application as a Library which can expose its data to application 2?
You could use the postMessage (MDN link), which is now supported in every browser.
It's a cross-domain, event-based messaging system running directly in the browser, with a familiar API.
Be sure to check the message's source before acting on them in your destination page!
If you're loading a new page in between then sending to the server via a post is a good idea.
If you're not then you can set it to some global location like window.application1Data = { data: data };
Related
i am update my data from database like delete or change to updated data. now page is need to reload to see my data in current component. how i can see my updated data without reload my website .
You are likely looking for a "push" mechanism. They can take the form of publish/subscribe technologies like WebSockets, or ones that emulate them like Long polling, interval polling (repeated web requests to the HTTP server).
Depending on your framework, you'll likely be using WebSockets API ("WS") to send a signal from the server. They're often used for 'push events' by web developers, an example of how it works:
The backend server will run a WS server
The client's browser will connect to WS when they load their page, "subscribing"
The backend server "publishes" / "emits" / "pushes" messages
e.g. "STORE_UPDATED" with an object of updated properties, e.g. {"apples": 2} of updated properties
What this looks like depends on if you're using WebSockets API directly or a higher level wrapper.
For an idea see Writing WebSocket client applications on MDN.
In your case with React, react-use-websocket and its sandbox demo may be of service.
The client handles them. In your case, your react component would update its local state or a higher level component will place them into child props for them to be updated.
Where you proceed next depends on your backend technology:
Cloud-based: Google's Firebase
Python: Channels for django, Flask-SocketIO for Flask.
Node.JS: Socket.IO
For more WS libraries / frameworks across languages: awesome-websockets
I was not sure how to name the question but here is what I need to do and I'm looking for some advice how to handle it architecture-wise. I'm Java / Kotlin developer very familiar with Spring Boot and very basic knowledge of front end as a whole - just so you know my origin.
Here is the flow of my new application:
user retrieves a generated link with lots of params that he can click in his browser
when he clicks on that link I want to retrieve those params in backend, run some longish external API calls & calculations (up to 10 seconds) and then return results one by one (some websocket or server sent events) and present them in SPA application (preferably React) with results nicely presented so he can pick one of the options I calculated, fill out some form and pay for it.
Maybe I'm confused - I've worked with many front end developers but I never thought how to actually "start" a SPA when someone clicks on some URL with params and then handle all those passed params via backend.
Is what I just wrote doable with React rendered on client side and Spring Boot as the backend? Or do I have to use React server side rendered because I have this static URL with params?
Could someone clarify how I should approach this?
Generally when a SPA is hosted on a domain, the webserver will be configured to redirect all requests on all paths to the root url. So it doesn't matter what path on your domain the user is trying to access, the SPA will still get loaded.
Then in your React SPA you inspect window.location to find the path and params in the url. You then call the backend (most likely on another domain) sending it the params via a web request. It then sends back a response with a random key, and continues to start the time consuming process in the background. When results come in, they are persisted globally in a dictionary against the random key (could be to a database, could be held in memory if you only are going to need one back-end server). Then on another API endpoint, the React front end can poll with the random key and get the current status of the processing, displaying it to the user.
I'm trying to figure out how to create an offline / online approch to use within a huge application.
Right now, each part of the application has its own model and datalayer, who directly read / write data from / to SQL. My boss is asking me to create a kind of buffer that, in case of connectivity failure, might be used to store data until the connection to SQL return active.
What I'm trying to create is something like this: move all datalayers into a servicestack service. Each "GET" method should query the database and store the result into a cache to be reused once the connection to SQL is not available. Each "POST" and "PUT" method must execute their actions or store the request into a cache if the connection fail. this cache must be cleared once the connection to SQL is restored.
How can I achieve this? Mine is a WPF application running on Windows 10.
Best regards
Enrico
Maintaining caches on the server is not going to help create an offline Application given the client wouldn't have access to the server in order to retrieve those caches. What you'd need instead is to maintain state on the client so in the event that network access is lost the client is loading from its own local caches.
Architecturally this is easiest achieved with a Web App using a Single Page App framework like Vue (+ Vuex) or React (+ Redux or MobX). The ServiceStack TechStacks and Gistlyn Apps are good (well documented) examples of this where they store client state in a Vuex store (for TechStacks created in Vue) or Redux Store (for Gistlyn created in React), or the Old TechStacks (created with AngularJS).
For good examples of this checkout Gistlyn's snapshots feature where the entire client state can be restored from a single serialized JSON object or approach used the Real Time Network Traveler example where an initial client state and delta's can be serialized across the network to enable real-time remote control of multiple connected clients.
They weren't developed with offline in mind, but their architecture naturally leads to being offline capable, courtesy of each page being first loaded from its local store then it fires off a Request to update its local cache which thanks to the reactivity of JS SPA fx's, the page is automatically updated with the latest version of the server.
Messaging APIs
HTTP has synchronous tight coupling which isn't ideal for offline communication, what you want instead is to design your write APIs so they're One Way/Asynchronous so you can implement a message queue on the client which queues up Request DTOs and sends them reliably to the server by resending them (using an exponential backoff) until the succeed without error. Then for cases where the client needs to be notified that their request has been processed they can either be done via Server Events or via the client long-polling the server checking to see if their request has been processed.
I am starting to work with angular and am fascinated by the bi-directional data-binding capabilities and by its $http method, which lets me save changes in to my mysql database, without refreshing the page.
Another thing I am currently fascinated by is the real time capability across multiple clients using firebase. Here all clients are updated in REAL TIME, when the database receives any changes. I'd probably like to use firebase, but I would have to drop Laravel and MySql as a persistence layer entirely, which I would like to keep for the moment, since my application is already working in Laravel, just not in real time.
How would I go about having a Real Time application, which updates every client, without refreshing the view, in Laravel using MySQL and Angular?
If I am not mistaken, Pusher and PubNub, are providing this necessary open connection with the server using websockets, so when the server has something to share, angular will now and render it.
Since I would like to use Laravel and MySQL as a persistence layer, I am not sure, what the best way would be. I am not even sure, if I understood everything correctly, which I wrote above, since I am new to angular and real-time applications.
What would be the next necessary steps, to get some Real-Time capability into a PHP/MySQL application?
The solution for your problem is:
1º - open websocket connection with the websocket-server and subscribe a channel, after this send the data to your serve using ajax
tutorial angular pusher
2º - In server side, you get the data, saves to your database and send a 'PUBLISH' to the respective channel into websocket server
lib useful for this
3º - Through the subscribe gets the data in real time
Pusher.subscribe('channel', 'event', function (item) {
// code
});
I had a similar problem recently and I finally ended up using Redis publish/subscribe Redis. You can store data in the channel and then subscribe to any changes. When something changes you can send it to Pusher which will send it then to the clients.
I also recommend considering Node.js and Socket.io since you can achieve very good performance without third party service, and even if you don't have experience with node you can find very good examples on Socket.IO how to write an application.
For Redis there is a good library for PHP called Predis and there is Redis Node client as well, so you can mix it all together.
Have an Angular web app that track status of many objects. Now, I have a directive for each object to poll a nodejs server for status. This works but it is quite chatty and I am a bit worried about scalability. However, the backend does not support subscription so it could not use a pusher. One option is to let the nodejs server do the polling and push status back. Then nodejs need to keep a list of objects to poll and client probably need to check the message to determine whether a status needs update. Really appreciate your suggestion for a better strategy.
You can use firebase and load the data from a third party source into the firebase database then use angular-fire to get that data into the app... alternatively you could use a socket connection to DIY. In either scenario, I assume like you said the NodeJS portion on the server will need to handle polling the third party system for data and populating the firebase instance which would be a read-only layer as far as the system is concerned... changes would be sent directly to the third party and NodeJS would just be responsible for updating the firebase DB.