Tuesday, 16 January, 2018 UTC
Summary
TLDR; I show that Vue can use JSX to utilize the React pattern of a render prop. Source code here
In Vue, templates are typically how we compose/extend/mix/open source our components. This is contra the experience of React developers who write most of their compiled html in JSX.
Thanks to a similar architecture of using the virtualDOM + createElement API and babel-plugin-transform-vue-js, we can write our Vue components in almost the same way we write React! (Not that we should do this for all components, but it’s fun to see design patterns and utilize them).
UPDATE: I’m using render props in https://github.com/educents/vue-autosuggest in the renderSuggestion prop, so go check it out!
Render props demo For demonstration, I will use an example from Use a Render Prop! article by Michael Jackson.
First the SFC:
Vue creator Evan You on render props.
If you were to do “render props” with templates, a similar design would be to use scoped slots and would look something like this:
Vue Scoped slots are powerful when using templates.
Some advantages to scoped slots are that:
- Custom parent-child template injection without a render function or jsx.
- You can specify default content easily. In the above example, I pass in a specified slot, that defines a custom message, but when I don’t specify a slot, it will fallback to the default slot. A default slot also gives users of the component a “component api” so that you don’t have to guess what you might need to render.
- Uses destructuring similar to jsx render callback
- Parent content to be rendered with child data is “inline” with the template
- You will probably never be able to inline a jsx function in your template (https://github.com/vuejs/vue/issues/7439)
Why would I want to use the render prop pattern or JSX? The nice thing about this is that using the render function + JSX is a closer-to-the-compiler alternative and allows fine-grain control over rendering. You won’t be able to use custom directives like v-model or v-if. Render props themselves have a lot of benefits, as outlined in this episode of Full stack radio where Adam interviews Kent C. Dodds.
If you’re a Vue user, does this type of component composing surprise you? If so, I recommend going and reading the official docs which actually explain JSX and render functions in greater detail.
I love that we can share design principles between frameworks. It gives me warm fuzzy feelings in a cruel, cold world that believes there is a war on frameworks. In 2018, try and find the common ground.
If you enjoyed reading this, follow me on twitter where my DM’s are always open!
Further reading:
- Source code: https://github.com/darrenjennings/vue-jsx-render-props-example
- Official Vue documentation: https://vuejs.org/v2/guide/render-function.html#Basics
- Original article on using render props and what this article’s title is referencing: https://cdb.Reacttraining.com/use-a-render-prop-50de598f11ce
- A helpful article on similarities in frameworks converging React + Vue + Angular: http://varun.ca/convergence/