Background
I admit, this annoying PM is me. I hinted to developer that I need a signup form quick, like in 0.5 day. She hinted me back: it is not possible. Plus, she is still bug-fixing the last iteration of our product design.
It was so blunt - her hint, I think she didn't master the 1 single most useful skill when it comes to communicating with product manager, the creatures that are constantly furious onHearing "no can't do" :
Clearly state your capacity without encouraging unrealistic expectations and intimidating at the same time.
I was disencouraged intimidated ☹️
What's so hard
So I had some frontend development background. Presumptuous enough, I set out to do it myself. There I met with frustratingly numerous obstacles.
🙀Git
It's a himalaya mountain in front of every not-everyday-programmer. Git cheatsheet is required every step of the way. Tiptoeing on the ice, trying very hard not to mess up with the branches. It already took me >0.5 day to do just the basics: branching, config, pull and commit.
3️⃣ Vue
Not defeated. I continue.
Here my outdated knowledge on Vue is challenged. I know vue2 but its a vue 3 era already. I do admit and is learning to admire the beauty of the vue3 by using composition API. I admire how it can accommodate both easy and confusing at the same time.
you don't need the rigid data{}, methods{}, onCreate{} blablabla anymore - dont know if Evan You the creator got his inspiration from 八股文 (a paradigm fixed style that Ancient Chinese must adhere to when they write official thesis especially in a national test). But then you have ref(), reactive() - both can be reactive but with differences. and const rect = reactive() rect can't be modified but reactive({property:value}) property can be modified. etc etc.
Form
Let me fast forward here (Forget about the process of learning the ant-design-vue framework - their documents and codesandbox did help a lot.)
The real challenge is product manager should really put some thoughts into the limitations and business purposes behind the "simple" form.
Here are some points:
Depending on which ID system we are using, what are the mandatory fields for signup and account creation.
What validation rules should apply to name, password and other mandatory fields?
What to prompt to user when validation fails?
What is the best practice in terms of filling a form?
Demo
Here are the considerations ( *I'm glad I put myself in shoes of both product manager and developer even if it's at the cost of burning midnight oil. *)
I think the best practice is real-time validation. It should not be subject to negotiation. Ant-design provides quite extensive validation supporting either builtin and custom. There is another plugin I really like - vee-validate. I used ant-design's.
Rules applied to all mandatory fields are not empty by default.
Rules applied to email is builtin and we need not worry about it.
Rules applied to password is often custom and here is where we enforce our organization's security rules in the business operations.
Two passwords must match and in case either one is changed after validation, the re-validation must happen.
after submit, there is final validation.
Here is the demo:
if you can't see the preview, here is the screenshot
here is the button linked to the codesandbox
Final product
Final product is a bit different than just a demo. Our ID system allows accounts to be used across teams so only unregistered email is allowed to be used for account creation, otherwise an invitation will happen instead.
Conclusion
Today's takeaway is an advice for Product manager: do not attempt to code on your own. Downside of it:
- it's a slap in your face telling you how wrong it was to think its a 1-day thing.
- it doesn't earn respect from programmers cos they be like " what's so hard" " i can do it too, maybe just a bit uglier but who cares".
- at the end of the day, still one salary for doing two jobs. And the coding still doesn't make up a surviving skill for you should you lose pm job one day. its an expertise requiring expertise focus and dedication.
Top comments (0)