ReactJS Relay Modern: which router to choose? - reactjs

I'm building a large SaaS CRUD application using ReactJs. There is a classic navigation need for the whole application, something like the following pattern for every object:
Item list -> Item detail -> Item edit/delete
|------> Item create
For every type of object, you can list then or create a new one. In the listing, you can see details, edit or delete an item. The application will have a top navigation menu that you move you to the object type chosen listing.
In terms of Relay, every object type will hold its query. The detailsview will work with the query fragments.
Seems that a simple router would be enough, but I don't want to start using old stuff or deprecated code.
As far as I understood, Relay Modern cannot work with React Router V4, although I've seen questions regarding ways to use React Router V4 with Relay Modern. So:
a) Can I use RRV4 for that type of application ? Will I have a problem with that?
b) If not, should I go for RRV3 or Found ? Which one is recommended ?

You may consider found and found-relay. I am evaluating them now and appreciate that found explicitly addresses the problem of request waterfalls with static routes. Found Relay supports Relay Modern.

I don't see why RRV4 wouldn't work with Relay, take whichever router you prefer. RRV4 seems like a good choice.

Related

Passing around data

My task is to create a SPA with an iTunes API.
I got my basic functionality done but it's not SPA yet, i wanted to implement react-router to handle the navigation.
However my components now need an extra parent. And i don't quite get it how can I pass the previously working data.
I don't want to inject huge block of code so i'd rather give you a Github link which is:
My SPA
But if you need the snippets let me know and i'll cover it.

AngularJS - Shop list best practice

I'm new to AngularJS, and i'm want to know what's the best and easiest practices to do this simple shop list application.
So this is my shop:
I got three servers in my select input. Each server got own list of items, displayed in another component.
I'm thinking about creating routes with variables like localhost:4200/shop/{server1} which gonna show my list of items based on url path. Select option will just change path in my application to show shop list for specific server.
Is it a good practice, or there is better and easier solution to implement this simple shop application?
If you're asking if filtering data with routing is a good practice with Angular, I can say that it is not a bad one. Here's a link to the official Angular documentation about routing : Angular - Routing
But if you're asking if it is the only way to filter data or spread parameters, the answer is clearly no. Angular projects are SPA (Single Page Application), so you can do everything without touching the url.
For a quick example, you can attach a (click) event on your elements that display the shop list you want
I think you can use just one component and three different click events to display three different results. One component can work in your case. Using a router and routing logic for your requirement will be a costly affair. Your user will have a better application feel if these are covered in just one component and with three different click events.

Shop search based on reactJS

I have to do similar web search on e-shop based on this site:
http://frisco.pl/
So far I recognize it as reactJS implementation. Am I correct? I don't know anything about reactJS and am I right that every search item is existing in _resource variable (which is visible in page source), and that's why the searching is so fast?
Also what plugin respond for automatic change of browser URL while typing keyword in search box?
Yes this website is made with reactjs.
for automatic change of browser URL, its made with react-router (but you can use other to manage that).
React abstracts away the DOM from you, giving a simpler programming model and better performance.

Single Page App without URL

I'm joining a team that is currently working on a single page app. It is written with AngularJS, but it doesn't matter for the topic.
The App is so complex (many independant views with complex different states within each) that they completly removed the router (well, excerpt the default route).
I'm googling around but I can see no example of webapp that is not trying to work properly with URLs. Is there any risk of not using any URL, beyond the fact that "it is not the elegant way" ?
EDIT : ui-router does not fit, because of this issue : https://github.com/christopherthielen/ui-router-extras/issues/90
It sounds like you want to look into something like UI-Router which works on states.
https://github.com/angular-ui/ui-router
I can't imagine any significant issues with your app if you do it this way, but I can see massively bloated controllers and code to try and get around any issues you find.
as #Varedis said, you can use ui-router, but to answer your actual question, consider the use case for urls.
If you have only one url, there's only one entry point into your app. This can be annoying if the user expects to be able to quickly go to a certain area (state) within your app. Only one url means that the user can't bookmark, directly go to, or find with a search engine, any specific part of your application.
You can use other mechanisms like cookies or LocalStorage to keep track of state, but these are less user-visible.
I work on the project and i founded a month ago, ui-router-extras which provide parralel states but it can't instiante more than one state instance.
Is there another solution to do that ?

Purpose of Backbone's Router?

What is the purpose of Backbone's Router? Can't we do the same thing without it? With a router, a click on a link would change the URL of a page and the last bits of the URL would trigger a function. Why not just assign a click event on this link and trigger a function there?
I don't use backbone specifically, (rather, I use iron-router for my project) but it's purpose is to route URLs to pages. Consider the following: you have 50 links scattered across your website's source all pointing to /awesomePlace (which serves awesomePlace.html). You've decided awesomePlace isn't so awesome anymore and have declared that there is a moreAwesomePlace.html. You could go in and change each of those 50 links to /moreAwesomePlace or you could change the route once. The router could then serve up moreAwesomePlace.html whenever anybody visits /awesomePlace.
That's just one example. I personally haven't spent too much time with routers yet but I'm sure somebody can give some better examples than I have. Hopefully this helps explain things a bit though.
Yes, we can implement same functionalities without router, router is just an helper utility, just like JQuery for DOM manipulations. Reason behind using router all about scalability and flexibility. If you follow "on click do some thing", it does't scale. In a single page application every click might have multiple handlers. One click on item might demand changes to multiple widgets. with routers you can add/remove hooks for the same click. And in future if you want to change the implementation of Router or hooks, you are free to do that, only thing that you need to make sure is contract btw these two remain same.

Resources