This is an example of how different components implemented with different frontend frameworks or libraries can share the same Redux store.
Different frameworks and libraries in same project
The idea of the project is to implement the same component, a simple counter with two buttons, one to increase the value and other to decrease it. I decided to go with Webpack to build and bundle everything. Webpack has a large set of plugins and my thought was that there should be a loader in case I need it to load and build the resources. (I was right as I could check it)
Even this have a so little efficiency this could make sense if you imagine several teams working on specific business areas with different responsabilities working on the frontend. Each one can work with an specific component or widget depending on the business they are in charge and they choose they preferred library or framework to implement it but they share the same store to manage the general state of the application.
Common Redux store and actions
The Redux store is created or referenced in the main index.js file. It is created not belonging to any library component or framework and I just have to find the way to share the current state (the counter value) and the actions which triggers the increment and decrement.
The component writes the convenient HTML in the component container and binds the actions increment and decrement directly to the onclick events of the buttons accordingly. The connect function adds a subcriber to the store changes and passes it to a render method which is in charge of change the content of the counter. Easy and simple to implement.
React is a library with the main target of components development.
Implementing the component is quite straightforward. Also each time a property passed to the component changes it triggers the re-render of the component. The connection is quite easy as there is a react-Redux library to make easier the connection between the Redux store and the component.
Vue is a that has a great community behind. It started as an evolution of AngularJs taking the good things about this “oldie” framework and added and improved everything. This library/framework is still growing and improving.
Just added a Vue loader into the Webpack project to load .vue extension files as Vue components.
The Redux binding is done as easy is done in React components with a wrapped component using the
vue-redux-connect library which is in charge to connect properties and methods from store..
Elm is a programming language that brings the functional paradigm to the frontend development. Using the Elm libraries you can forgot about CSS, JS and HTML to get things done but you have to learn a new language.
Elm lives in its own world inside the web page but it has mechanisms to “comunicate” with the dangerous area so you can pass properties and methods to it.
Web components is a proposal to be a standard in the way of how to create web components (forgive the redundancy)
attributeChangedCallback to detect when the atribute with the count value is updated from state and
Svelte requires to add a loader also in Webpack config. This will load the compoenent and build it accordingly. The Svelte file while contain three sections, one
<script> for the script executed there, basically declaring the variable to be showed in the template, and the methods to run on the on click events, the
<style> section which will include the individual styles for the component and finally the template used for the component. Nothing so much different from a regular html file, just you will have there the specificics of Svelte for the binding there. Then the connection with the store is done by creating a
DocumentFragmentin which will create the new Svelte component passing the actions to increment and decrement and the binding to he count value. Here we also subscribe to the count store value change to set it and change the Svelte component property.
Angular is a complete framework to build frontend web applications, it derives initially from the AngularJs library but it is a complete new different thing. It started as Angular 2 and in the moment to write this post reached the 9th version of the library.
First, Angular uses Typescript so I had to add support to it to the webpack project adding the
ts-loader for .ts files. Then Angular requires a more complex structure so I need to add a file for the component itself (template, styles and buttons behaviour), another file for what is called a module which will be “compiled” into an Angualr application, and separately the injectable actions (increment and decrement actions). An additional module helped into binding the value from the store to the counter.
Angularjs is one of the first frameworks that appeared on the frontend development and it was like the starter of this great moment is living the web development. Is the predecessor of Angular but both of them are not related at all.
I created the template of the component in a separate file loaded in the connect functions with binds it to the store and actions as it needs to be binded when you’re creating the Angularjs application