I have been playing with ReactiveX for a bit and really like the approach. I have also been following Relay and Falcor for a while and understand the advantages of declarative data fetching.
I have seen people integrating react, redux with falcor, but have not seen any attempts to integrate React, Rxjs with either Relay or Falcor.
So I wanted to write a simple todo example, but before that wanted to ask whether it is a sound combination at all. Are there compatible and whether some advantages of one approach will negatively affect advantages of others.
Also if anyone can share some resources on this topic please do :)
There are several libraries that I found:
https://github.com/trxcllnt/reaxtor no React js though
https://github.com/FourSS/refar
UPDATE: there is an attempt by meteor developers to create their own version of relay using reactive graphql see Apollo Project They use observables for watch queries
Also there is a good library called relate which you can integrate with rxjs redux style state machine
Related
The team and I are embarking on a React project. We are primarily a Microsoft team who are all experienced with .Net for decades!
We have been really impressed with React and feel like we are going down that route. We have done all the Angular vs Vue vs other options to death.
As we are all C# developers we are planning to use React with TypeScript. Mainly for two reasons
We are used to a strongly typed code bases coming from C#, so we have been more successful with the React with TypeScript.
The code base has the potential to become quite large and we plan on sharing React components and TypeScript interfaces between teams/projects via an internal NPM registry. We think TypeScript will highlight typing issues early especially when refactoring and allow sharing more effectively.
I have talked with another similar sized team who did not start out with TypeScript (or Flow) they ran into refactoring problems when their solution got large and retrofitted in TypeScript.
I would like to start out with TypeScript from day one as a result
However, I am getting some push back from the more Javascript orientated developers. Who say:
TypeScript not required in modern ES6 JavaScript applications
The wider React community does not use TypeScript
Hooks which are new to React compound the points above
Have I wandered into a religious argument rather than a technical one (static typing vs dynamic) or are there points justified?
Happy to admit I am a JavaScript novice compared to my C# experience so I could be totally missing the point.
I thought I would pose the question to the community and find out some educated opinions. Please be kind
TypeScript not required in modern ES6 JavaScript applications
It depends on what the requirements are. You say you anticipate refactoring, I have some experience with refactoring my own javascript and TypeScript projects. I can say that without TypeScript, refactoring takes more effort - you have to look at the implementation code a lot, just to be able to understand what the interface is. This can be alleviated by extensive amount of API documentation and unit tests, but - how many projects out there have those, and how many projects maintain the API doc so that it matches 100% with the actual code? Type annotations are a nice way to express what the expectations in the code are, and have a side benefit to be maintained together with the code.
The wider React community does not use TypeScript
Everyone uses what's best for their needs. In reality, there is no "community", there's just a bunch of people working on different projects. What's suitable for a majority of people might not be the best for you.
Hooks which are new to React compound the points above
The recent version of typings for React does seem to support hooks. The result of google search for "react hooks with typescript" shows that a lot of people are using React hooks with TypeScript. I'm not aware of any specific problems, but if there are any, there's a chance they will be sorted out, eventually.
I am new with react js.
I made two components to send/receive data using props between them.
But it gets more complex, I feel like I need to replace them with other solution like redux. I wonder there is the latest better solution to replace redux now for communication between two react components.
There was a lot of opinions between redux and context api like this post. But today, I can say yes, you can replace redux with just react itself. Because, currently react provides so much concepts just like the redux, context api. You can find react additional hooks like useReducer, useCallback, useMemo, etc.
But arguably, redux is still worth for maintaining project easily. You can have redux devtool, keep the code clean (state in store - a separate place for concerns).
There are more concerns over this. You may see this issue what future react will have. You may also find the medium blog helpful and the reddit discussion.
Worth Reading:
State management with react hooks and context api
Redux main task is to be a 'predictable state container', and, as you wrote, it also makes sharing data between components much easier. The main drawback is that it requires additional code, but I think that it is worth it.
For apps / websites that are not very small, I wouldn't use react / react native without it.
The way redux works may be a bit difficult to understand in the beginning. The following is a great article that helped me when I started using it: redux connect explained
I've spent the past few days looking at VueJs 2 with Vuex and i really like it.
Having only had a brief introduction to React, I've found vue js 2 has been easier to pick up.
React seems to be growing in popularity, but I can't see the benefits of React over Vue 2.
Both are component based frameworks with routing and state management tools.
So can someone explain which are the main differences between those frameworks?
This is an opinionated and subjective question. And it often starts holy-wars than really answering anything and thus it is not really suitable for StackOverflow. However, I will try to answer this in an objective manner as possible. (Note: I am purely comparing Vue with React and deliberately avoiding Vuex vs Redux)
Why Vue.js?
It is designed to be an approachable framework. It is suitable for beginners and advanced users alike. When you are starting with Vue.js, it is as simple as adding a script tag to your page. For the advanced developer, the possibilities are endless. You can start with any sophisticated build tools - TypeScript, Babel, Webpack, etc.
Vue.js is developed much after Angular and React. It has learned from both and managed to pick many best things from them into Vue. For a beginner, Angular's idea of components, services, dependency injection, bootstrapping application, etc can feel overwhelming. Same is applicable to React; JSX can feel odd (Even after years, I still find it weird.). Now, Vue.js is a cross-path. You can use angular like templates or you have the freedom to choose React like JSX.
Vue.js reactivity is very well abstracted. With Angular (digest cycle in v1 and zones in v2) or React, it is bit different. It takes time to learn these concepts.
There are tons of other reasons why Vue.js should be your choice. Sometime back, I had written an article explaining why Vue.js:
https://blog.webf.zone/vue-js-answering-the-why-after-15-months-62db797f75cc
Why React?
React is a pioneering library (It is not a framework) just like Angular. It introduced the ideas of uni-directional architecture, virtual-dom, components (stateful and stateless), etc.
React Native is another reason why you may want to consider React. It allows you to take the same code that you wrote for Web and build native mobile applications. Now solutions do exist in the Vue.js world. But definitely not as mature as React Native.
Functional programming: No way React is a library based on functional programming. But doing React right way means you need to use immutability, explicit state management and all these allied concepts stemming from functional world.
Redux: Redux is the darling of React world. It has unlocked wonderful architectural patterns for front-end world like time-travel debugging, explicit side-effects, functional components, etc.
Innovation: React has some crazy ideas like Relay, Next.js (Vue.js has Nuxt.js). I also heard about some Drap-n-drop editor for React; first class TypeScript and Flow support (You just cannot get TypeScript + Vue.js + JSX working together even in 2018).
Why not React?
Using only React is not enough. Very soon, you will end up with using Redux, Redux middleware, Immutable.js, etc. Doing all of that at once can be intimidating.
Redux. It is wonderful but it is verbose.
Most important: Using React without any sophisticated build system is cumbersome. To do anything serious, you will need Babel, Webpack, etc.
Again, which one is better?
There is no better solution. I will choose Vue.js if I need to accommodate a vast array of developers (beginners-advanced). I will choose React if my team is versed with all the extra overload that comes with React and team loves everything JavaScript approach to web development (Even CSS is JS).
Finally, there is one another angle to it. Programming in React needs discipline and hence, there is a good chance that you will find it easier to bring homogeneity to your codebase. With Vue.js, there is often more than one solution to a problem. That makes it good and bad at the same time.
You will not go wrong with either of them.
I'm new to react and while browsing through the net I came across various terms associated with React - Flux, Redux, Relay, Graph QL.
So far I understand these are design patterns for a React app.
I want to embark on a small side project using react and am confused as to which architecture to invest time and effort in learning and implementing .
Could someone please help me out here ? Thanks!
A brief overview of each with the pros and cons would be ideal .
Yeah, it can be daunting. The thing is React is just a UI component framework (but an awesome one) so the rest of the application architecture is up to you. Flux and Redux are solutions to managing state (not just in React), both are certainly worth learning about. Relay and GraphQL from Facebook are solutions to fetching data from a server and requires both client-side and server-side implementations to be used.
I agree with Tom's comment: for a small project start with just React (and complimentary libraries for details like AJAX and routing). There are still basic React patterns to get the hang off. Once you are comfortable with React and your app gets large enough, you will likely start to feel the strain of managing state in your UI, and that will be a good time to seek out something like Flux or Redux.
I'm a noob on react/es6 stack/framework. I was previously developing in Backbone/Marionette.js and recently started reading more about ES6 and React. Considering my background I'm used to having Backbone for Model and Controller (MC of MVC pattern). I have heard people using react with Backbone/Ember/Angular. What are your experiences and what are the different patterns that are trending in this area at the moment. I'll really appreciate you sharing your experiences/thoughts on this. Thanks in advance!
Facebook has proposed the Flux architecture as a way of flowing data unidirectionally into your React components. The idea is that you have a separate container (often called a "store") for all of your data. You register actions which run through a dispatcher and change your data, which then causes your view components to update.
There have been a lot of implementations of this idea. So far there isn't a single plug and play data model that's a no-brainer to use.
One implementation that has a lot of people excited right now is called Redux. Like React, it draws inspiration from the functional programming school of thought.
From the README:
The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.
So it's not exactly the MVC paradigm, but when combined with React you have a chain of events where the user triggers some action which changes the data and updates the view.
I recommend checking out the examples in the repo. It's a solid approach that's gaining a lot of traction. It also comes with a really neat dev tools. Hopefully in the future someone will be able to abstract away more of the boilerplate code.