Category: JavaScript

Current implementation with Backbone Router

Static routing

In my playground I’m using a salsa of Backbone and React for two reasons: real life projects are like this, a combination of old and new and I was just too lazy to rewrite everything in React.

I kept the old static Backbone routing implemented by LibraryRouter.js

and I loaded root React component from a Backbone view implemented in ReadingSessionsView.js

Navigation

I had to initialize Backbone history first in Library.js, application’s entry point

and then I was able to use it in HeaderView.js

and in BookView.js

Use React Router instead of Backbone Router

In order to use React Router instead of Backbone Router I had to change the loading order because:

I followed React Router guides and the steps applied to my react branch are below.

Dependencies

I added react-router-dom and react-router-history. If my project had only React components, only the first dependency was needed. Since I still keep some Backbone code, I had to use the second one too but this makes things more interesting.

Dynamic Routing

The most dramatic changes were done in LibraryRouter.js that switched from static routing to dynamic routing

I’m using Router and not BrowserRouter as it is recommened in Basic Components because I need to use React Router History from Backbone code as well. I will get back to this a little bit later when I’ll discuss about navigation.

The root component of the application is now the Router and since now routing and rendering are done together, I had to change the html template, index.html, of the application from

to

and the application’s entry point, Library.js to

HeaderComponent should be displayed in all situations so it doesn’t need a Route component. Switch is not really needed in my case but without it the Redirect displayed the following warning in the console

even if I used the exact attribute.

Loading order

When Backbone router was used, I loaded a React component from a Backbone view

This is not needed anymore and actually I have to do the opposite now

Navigation

I still have a Backbone view so I cannot use the Link component there. The rescue comes from React router history which is initialized in History.js

and used in BookView.js

and in LibraryRouter.js where is passed as a custom history property to the Router component

Originally the header was implemented as a Backbone view but I wanted to try the Link component so I migrated it to a React component

Redux integration

I had only two places that needed changes for Redux integration. The first one is related with Store initialisation in LibraryRouter.js and is specific for each type of async flow used.

Redux thunk integration

Redux saga integration

The second one is how CurrentReadingSessionComponent is listening for Store changes

Conclusion

My application is too small to see a real benefit from combining dynamic routing with rendering but even so I liked how I see in only one place what is rendered and when.