JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Building form field components in an enterprise-scale product

Submitted by Bharathvaj Ganesan (@bharathvaj) via Abhishek Balaji (@booleanbalaji) on Aug 1, 2019

Section: Crisp talk (20 mins) Technical level: Intermediate Status: Confirmed & Scheduled


In an enterprise-scale product, it is quite challenging to build and maintain reusable forms using component-based frameworks like Vue, React..etc. We’ll be discussing how form fields are handled effectively at a large scale in a product like Chargebee using vue.

Key Takeways:
1. Killer pattern for creating elegant component-based form
2. Best practices and tips for creating flexible form field components
3. To understand why a business critical product like Chargebee adopted Vue


  • Who we are and Why we choose Vue
  • Building forms with Vue
  • Challenges involved when dealing with large forms
  • Why User and Developer experience matters
  • Taming the form beast
  • A walkthrough over the best practices while working with forms fields


  • Thirst for learning
  • Basic understanding of Vue

Speaker bio

Hi, I’m Bharath. Software Engineer @Chargebee.
I work majorly on Chargebee’s Leap UI.
Reach out to me on Javascript, NodeJS, Design Systems, front end stuffs and anything related to Chargebee.





  • Zainab Bawa (@zainabbawa) Crew 10 months ago

    Thanks for the proposal, Bharatvaj. Quick comments:

    1. Explain Chargebee’s business and engineering contexts in one slide to help the audience understand and appreciate the problem you are explaining.
    2. What approaches did you try before settling on the current one? Can show comparisons with other approaches and how you benchmarked the options before you arrived at the current solution?
    3. Have a key learnings slide where you explain what you have learned in the process.
    4. Show how anyone in the audience, even those who don’t have ChargeBee’s use case, can gain from these learnings.

    On the proposal page, update your bio and tell us who you are. :)

    • Bharathvaj Ganesan (@bharathvaj) 10 months ago

      Hi Zainab Bawa, Have updated the propsal with fresh set of slides. Kindly, let me know ur feedbacks.

  • Chirag Jain (@chiragj) 10 months ago

    Hi Bharathvaj,

    Some suggestions:
    - A bit about chargebee and yourself.
    - More details about the usecae, pain points and how you came to the solution.
    - Why Vue? The architecture you discuss could be implemented by any component framework + central datastore combo.
    - What are the improvements that you’re seeing, business / technical impact (like increase in develpment velocity or reduction in bugs in QA / Design review).

  • Bharathvaj Ganesan (@bharathvaj) 10 months ago

    Thanks for the update Chirag Jain, updating soon.

  • Swapnil Agarwal (@swapagarwal) 10 months ago

    Hi Bharathvaj! 👋
    Thanks for submitting the proposal. Here’s my feedback on the latest slides:
    1. While introducing Chargebee, it’d help the audience to relate more if you could also tell your frontend use-cases aka subscription billing software and the scale it operates. (I’m sure you’d do this already, I just wanted to add a reminder. 🙂)
    2. The “Why Vue?” slide is perfect. 👌
    3. I like how clearly you mention the roadblock on the transition (most people only say nice things about vue but this one sets the right expectations for the vue-day audience).
    4. The problems are clearly mentioned. The demo gif was all I was looking for earlier and this makes things easier for the audience.
    5. Keep the code background light. Dark backgrounds don’t render nicely on the big screen.
    6. +1 on exploratory examples and observations.
    7. In the codesandbox demo slide, it seems like you would be switching to the browser to show some things. Don’t do that! Your slides shouldn’t be dependent on external factors like wifi, etc. You can include a gif or a video instead. 🙂
    8. In component structure, let’s be consistent - either use <field /> or use <form-field /> (basically don’t give a chance for audience to get confused).
    9. In slide 24, is it <text-field-form /> or <text-field-wrapper /> ? 🤔
    10. The impact slide is still missing - this helps audience in pitching their team to use similar approaches in their workflow. 😉
    11. Any particular reason you removed the openapi spec slide which you were using to define validation? I’d like that to be included so that it gives an end-to-end picture of your perspective on how forms should be handled at scale.

    Most of the above things are nits, except for 5,7,10,11.

    Overall, it’s a great update from your previous deck so kudos for that! 🙌

    • Bharathvaj Ganesan (@bharathvaj) 10 months ago

      Thanks for the feedback. Will update those slides.

  • Abhishek Balaji (@booleanbalaji) Proposer 9 months ago

    Hi Bharath,

    Thanks for taking the time out to do the rehearsal. Here’s the feedback from the call:

    • Time taken: 25 mins, scheduling for a 30 min session
    • Add subpoints under each title, so the audience is able to follow along with you
    • Add more context on the size problem described when explaining the reasons to switch to Vue
    • Add more explanation and comparisons on what the performance was compared to the earlier techstack.
    • Define the problem statement to a couple of lines. This helps narrow down the key reasons for switching as well as helps narrow down the focus of the talk
    • Structure the layout of the slides correctly, so you’re not looking for the right slide to show
    • When mentioning about the community plugins, add more details about each one on what they do
    • Add more context around the parent form and child form duplication
    • The pace can be reduced to some extent, some parts were feeling rushed through.

    As discussed, please update your slides and add the link by Monday, so we can do a final review of your proposal.

Login to leave a comment