Kae Job Sluder

React and Vue: Two Weeks Learning Reflections

A current project is to implement Plaid account configuration for customers. Unfortunately, Plaid is not quite compatible with what we need or our legacy code for international accounts. Our plaid interface includes some followup questions and confirmation the user wants to use this account to make payments through our system. The first step is to get it working for our legacy interface which uses Vue3. We'll have to rebuild this for our upcoming dashboard later in the year.

Documenting some pain points switching gears.

Vue Options API vs. Compose API

I started with a proof-of-concept produced by a teammate that used the Options API, while a number of examples available to me used the Composition API. (See article at Vue School for explanation.) Options API exports an object with sections for data, methods, computed values, properties, and other parts needed during the component lifecycle. Composition API defines many of the same features using more traditional JS. Using Options, it was sometimes confusing whether I needed a method or a computed expression. It made sense once I got into it.

Field Binding vs. State Setters

Vue binds data directly to input fields which makes some things very easy compared to React controlled input fields. Usually I find that the implicit data modification used by Vue to be more confusing than explicit setters. Once I knew what to look for, it wasn't a problem.

Template vs. JSX

Vue's file layout mirrors an html file with setup performed in a <script> tag. This includes additional tag definitions for conditional and iteration logic. Vue's template approach (mostly) separates code from presentation. React uses JSX where "tags" are rendered function expressions. Vue's templates are similar enough to other html templating that it's not a big deal.