81: Evan You - Advanced Vue Component Design

Full Stack Radio

Episode | Podcast

Date: Wed, 31 Jan 2018 05:30:00 +0000

<p>Topics include:</p><ul> <li>What is a "higher order component"?</li> <li>How do you replicate the render prop pattern from React with Vue?</li> <li>Using scoped slots to build components with no UI</li> <li>Using render functions without using JSX</li> <li>How Vue's built-in components like `` work under the hood</li> </ul><p>Sponsors:</p><ul> <li> <a href="https://codeship.com">Codeship</a>, check out how they performed in <a href="https://codeship.com/forrester-wave-continuous-integration-report">Forrester's latest Continuous Integration Tools report</a> </li> <li> <a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li> </ul><p>Links:</p><ul> <li><a href="https://vuejs.org/">Vue.js Homepage</a></li> <li> <a href="https://medium.com/the-vue-point">The Vue Point</a>, the official Vue.js blog on Medium</li> <li> <a href="https://reactjs.org/docs/higher-order-components.html">Higher-Order Components</a>, from the React documentation</li> <li> <a href="https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce">"Use a Render Prop!"</a> by Michael Jackson, an introduction to render prop components in React</li> <li> <a href="https://vuejs.org/v2/guide/components.html#Scoped-Slots">Scoped Slots</a> documentation</li> <li> <a href="https://vuejs.org/v2/guide/render-function.html">Render Functions</a> documentation</li> <li> <a href="https://alligator.io/vuejs/vue-abstract-components/">"Writing Abstract Components with Vue.js"</a>, tutorial on writing a render function component with Vue</li> <li> <a href="https://jsfiddle.net/adamwathan/xov6ksvd/">Fetch Component Demo</a>, based on the component Evan describes in the podcast</li> </ul>