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

Then I put myself hands on this and started thinking how to do it. First I decided to use a Redux store to share the state of the frontend application. All components would need a common state with shared (or not) information as well as which actions they need to run. Redux is a well known solution and wide used and finally is just a Javascript library so it could be easy to integrate with all the components coded for a web application as finally all code executed in the web browser is Javascript and it can be used in a way or another.

Redux

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.

Learn Redux

Javascript

Javascript Javascript is the language for the web and anything that can be implemented in any framework or library will be transpiled at some point to a Javascript piece of code. So, anything can be done with the bare language.

Learn Javascript

Implementation

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.

Valoration

I'm really used to work with the language as I'm working with React and Node.js in my day to day job. Redux is a simple javacript library and the connection with the state and the actions is quite straightforward.

React

React React is a library with the main target of components development.

Learn React

Implementation

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.

Valoration

I am used to React library and I really like it the filosofy of the Component composition of it. Also React has a library to connect to Redux so the connection was really easy to implement.

Vue

Vue 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.

Learn Vue

Implementation

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..

Valoration

This was my first approach to implement anything with Vue. As I saw there are many ways to create the component and I found one that fitted quite well with the project. You can create a component in just one file where you can place the markup template, styling and internal code.

Elm

Elm 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.

Learn Elm

Implementation

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.

Valoration

I really love 💚 Elm. I would like to switch to this language if not completetly but enough to be my main job as developer. The compiler is so helpful and not just for Syntax errors, but suggests you what you can do to solve it... continuously... until it compiles. That, instead of increase the learning curve, makes the work of develop with this language pleasant. Also, as there are no colateral effects if it compiles, means it works. Testing is implicit in the development.

WebComponents

WebComponents Web components is a proposal to be a standard in the way of how to create web components (forgive the redundancy)

Learn Web Components

Implementation

Creating a component is done by creating a Javascript class extending an HTMLElement. In this HTMLElement you have many lifecycle methods where you can do your stuff. In this case I used attributeChangedCallback to detect when the atribute with the count value is updated from state and connectedCallback where once the component is mounted on the DOM I attach the listeners from the buttons to the methods passed as properties. As Web components are just like new elements ready to be added to the html page, the connection to the store is done like it is done in the Pure Javascript component.

Valoration

Until it's not a completely supported standard there are more easy/effective ways to create web components. It was not hard to implement and bind but eventhough I think is a standard that is getting more acceptance to develop shared and common library componets between projects.

Svelte

Svelte Svelte is a new framework to build web components that compiles to plain Javascript. This compilation step implies that the final bundled code will be light and highly efficient.

Learn Svelte

Implementation

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.

Valoration

It was my first approach to this library and I wasn't disapointed. Easy to implement and great documentation supporting it. Maybe it will have a great future in the web components development scene.

Angular

Angular 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.

Learn Angular

Implementation

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.

Valoration

As Angular is a whole framework and everything is easier if you use Angular CLI from the scratch to create, build and bootstrap of a whole application. As my intention was to introduce it into an existing project it took me quite a bit to make it work. Also even I used a third-party library to connect it to Redux it was not easy as it was in other components.

AngularJs

AngularJs 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.

Learn AngularJs

Implementation

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

Valoration

AngularJs was the first framework I used working intensively in the frontend but I almost forgot everything :D and after retaking the concepts of the framework I can tell there are easier ways to work for the web frontend. It was not so hard to implement it but still, the way to connect it and make it work with the shared state is not of my taste at all.

Links