DEV Community

Cover image for React or Vue or Something New?

React or Vue or Something New?

Milos Protic on November 04, 2018

Hello my fellow developer, considering that you are reading this post, the title got you intrigued, didn't it? Well, stick with me until the end an...
Read full post
Collapse
 
revskill10 profile image
Truong Hoang Dung • • Edited

It depends on your favorite paradigm. ReactJS code tends to be functional. Let me tell you the way how a React component get rendered on browser.

An application needs a currentUser, so i create a withAuth higher order component.
A component needs to authorize that currentUser to display/allow/disallow action on that component, so i create a withPermissions hoc.

A page needs a layout, so i create a withLayout hoc.

A component might get rendered differently based on current route, so i create a withRouter hoc.

In the end, your page is rendered as 

compose(
withAuth,
withPermissions,
withLayout,
withRouter
)

I must say, i love this style of application design and implementation also.
In Vue, i couldn't, because the way to code Vue is to use a Vue component, not function.

Or am i missing something in Vue ?

Collapse
 
ozanmuyes profile image
Ozan Müyesseroğlu •

Actually there are functional components in Vue. The document says

Since functional components are just functions, they’re much cheaper to render.
(snip)
They’re also very useful as wrapper components. For example, when you need to:

  • Programmatically choose one of several other components to delegate to
  • Manipulate children, props, or data before passing them on to a child component
Collapse
 
proticm profile image
Milos Protic • • Edited

Hi, your question was already answered by Ozan. As you can see, Vue does support JSX as well. And I agree with you that everything is in personal preference when you have great frameworks to choose between.

Collapse
 
antonfrattaroli profile image
Anton Frattaroli •

For the specific example you've given, my first instinct would be to check out Vue mixins. The react team has a different philosophy about mixins and prefer compositions as you've shown. Could read Dan Abramov's "Mixins considered harmful" article for their perspective. On the other hand, The Vuetify library is an interesting Material implementation that relies heavily on Vue's mixins.

Collapse
 
sergiu profile image
Sergiu Butnarașu • • Edited

Maybe Stencil can help you. He generates web components that can be integrated with other frameworks (Angular, React, Vue) or can be used without a framework (stenciljs.com/docs/javascript).

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'hello-world'
})
export class HelloWorld {
  @Prop() message: string;

  render() {
    return (
      <div>
        {this.message}
      </div>
    );
  }
}

And use it like this:

<hello-world message="Hello World!"></hello-world>
Collapse
 
gluons profile image
Saran Tanpituckpong • • Edited

Wow! I can write similar code with Vue + TypeScript (feat. Vue Property Decorator).

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({
  name: 'hello-world'
})
export default class HelloWorld extends Vue {
  @Prop(String) message: string;
}
</script>

<hello-world message="Hello World!"></hello-world>
Collapse
 
sergiu profile image
Sergiu Butnarașu •

Nice, but I personally like the Stencil syntax.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 • • Edited

Did you know the web platform has its own built-in component model? You can use shadow DOM to encapsulate your css - no more compound selectors, verbose naming conventions, preprocessors, etc. You can define your own html elements with custom elements and add your special behaviours, and you can efficiently render with template elements.

Check out my series on web components to learn more.

bennypowers image

Lets Build Web Components! Part 1: The Standards

Benny Powers

#webcomponents#customelements#javascript#html
Collapse
 
proticm profile image
Milos Protic •

Hi, yes, I'm aware of the web components and the shadow DOM, but I didn't get super deep into them. Very useful features, but it feels like that on every new project we need to recreate the framework.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦 •

The web components standards are very low-level. You're really not meant to use the vanilla APIs exclusively for large projects. On some projects, like you said, the best choice will be to write your own library to handle things like data binding, data flow, state container etc. But in most cases, the smart move will be to use an off-the shelf base class like LitElement for your components, with a state container like redux, or for example lit-apollo for graphql projects.

You can also use web components inside your existing framework code, since they are just html elements. I've used web components to solve problems in existing Vue apps, for example.

Collapse
 
chiangs profile image
Stephen Chiang •

Starting a new angular project is very easy. Install the cli and node, type in ng new projectName in the terminal and then you can start writing code!

Collapse
 
proticm profile image
Milos Protic •

Hi, yes, but I just wanted to do a simple Hello World example comparison. I think installing CLI and Node is a bit overkill in that scenario.