As a person who have spent time writing his own JS framework, I am nitpicky, when it come to frameworks. When it comes to React, there are several things I don’t like, which Vue.js seems to have solved in nice ways (out of the box): My personal preference is templates over JSX. I find the lack of ‘if’ and ‘for’ control statements with JSX causing developers to define lot of temporary variables at the top of render functions, which in turn makes the code more difficult to follow. jsx-control-statements can mitigate that. However templates are certainly more readable. 1. Templates vs JSX: [Besides, babel is a huge dependency that adds to the build system, which I try to avoid. Its 150MB when a full browser — Chrome debian extracted, is 178 MB. Ridiculous!] With React, if one isn’t using Redux, there are two ways to trigger state change on a child component: 2. Updating child components: i. trigger state change through props + listen to componentWillReceiveProps(), which can then change the internal state of the child component or ii. keep a reference to child component(s) during the render() function and then call a method on the child component, which in turn changes the internal state of the child. I personally find method (i) convoluted and rather prefer (ii). However React recommends (i). On the other hand, Vue.js gives an easy way to access child components using “ref” attribute on the component’s custom element. (Besides it looks more nicer/readable than keeping references to child components in JS with React). [1] You might be thinking: “Why not just use Redux”? My question is why add the additional layer when the application/website is small? When it comes to parent component listening to events on a child, I prefer to attach anonymous functions as event handlers to the root element of the child. This makes both the parent and the child easier to refactor if/when needed. 3. Attaching events to component root element: With React, one has to pass function(s) through props (which introduces a name) to attach an event handler to the root element of a component. The name introduces an interface to be documented by the component maintainer, looked up the developer using the component and still limits the number of event types on which the parent can listen to. (Yes, when attaching events to non-root elements, the introduction of an interface may be unavoidable. However attaching event handlers to root element is very common, so..this should be easier right?) Vue.js, gives ability to directly attach an event handler by defining a “v-on:eventname.native” attribute on the component’s custom element. It avoids any named property on the child and is much more declarative, nicer to read. Let’s say I need to implement an abstract pop-up modal, that has two different body and footer shown at two different places in the website. The React way is to define props, and use them in the render function. But with Vue, one can define it with placeholders (Vue calls it “slots”)as: 4. Abstract components: <div class="popup-modal"><main><slot name="header"></slot></main> <footer><slot name="footer"></slot></footer></div> and declare a modal where ever needed: <popup-modal><p slot="body"> Some message </p><div slot="footer"> <button>Ok</button> </div></popup-modal> Vue.js gives a declarative way to define abstract components through slots, which I prefer over using props for this case. Here is a small nitpick. Vue’s syntax for manipulating data/state is nicer than React’s setState() method. One can manipulate the data like usual and expect to see the view updated. Vue uses setters/getters to know when a property changes. 5. setters vs setState(): Side notes: [1] — A gotcha here is that $refs isn’t available until the component renders. I solved this with the JS framework I wrote in the past, by rendering the component in-memory, on construction. This helps in resolving *most* of the references to child components, if not all. It also avoided a “not rendered” internal state, which avoided several checks in the library code, avoiding bugs, simplifying code for both the developer and the maintainer. <- Vue.js maintainers, if any of you reading this, take that as a potential idea/suggestion. That’s all for now. I’ll add more here as I learn more about both frameworks. React and Vue devs: Please comment if I’ve got anything wrong or if I have missed some easier ways to manage code. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
