I am currently working with a new start up as a Sr. Product Designer.
We are building a new B2B SAAS product.
One of our strong philosophy is that we look for Designers who can code (not javascript but experience with html/css).
The Dilemma — how do we start development?
We are very sure of using React.js as the frontend javascript library but the question was whether to build the UI from scratch or should we use a UI Framework.
After having worked on redesigning the entire Cleartrip UI we know what it takes to build something from scratch.
Yes we did build our own UI framework called ‘bento’ which we could not release publicly because the entire the companies vision shifted from desktop to the Cleartrip mobile app.
While it is still a wise decision and has its own benefit to build everything from scratch and it may work if you already have an established product in the market and you have enough time and bandwidth to do the investment to release another version in parallel.
After doing some research we concluded that it makes sense to use tools/frameworks/libraries that can help you save lot of effort, time and help you release your MVP as soon as possible.
The Research & Analysis
I evaluated approximately 15+ React UI Frameworks based on the following parameters:
- Breadth of components (are there enough components to suit our needs now & in the future?)
- Quality of implementation (including flexibility, depth, aesthetics)
- Ease of re-styling (also considering the designer experience)
- Typescript support
- Quality of documentation
- Project health (update cadence, extensiveness of use, depth of commitment)
- Cost
Below is the result of the analysis (We kept ‘Material UI’ out of the league, that has its own reason)
Below is comparison of elements
The conclusion
For us Ant.Design from Alibaba wins the race based on the following parameters:
- Git Hub Stars
- Contributors
- Number of Components and the variations it offers for each component.
- All the components are available in Javascript and Typescript
If you are building a product that has a lot of forms, ant.design does a cool job.
There is a trade off that the bundle size is a bit heavier in size as compared to other frameworks but does it really matters that much if your product will be used on computers with a high internet connection.
Our experience with Ant.Design so far
The prototype has shaped out quite decently.
The deliverables from design team is a functional prototype to both the QC and Development team.
We use static JSON files to mock data and by putting a little bit of condition and logic we can are able to prototype all the use cases based on the user stories.
More Benefits of having Designers who can code:
- No exchange of Sketch files and maintaining version
- No need provide designs of different flows/scenarios
- No need for Zeplin.
- The QC team can easily write all test cases using the prototype
- The developers do not need to work on the UI
- Integration is seamless
Integration of few modules has already been completed and it is very seamless.
Our Design Process
- Define User Stories
- Ideation on white board
- Sketch / Wire frames
- And Code
We as designer are directly prototyping new screens/flows/interactions in the code based.
Resources
More Comparisons
Tools used
Will be happy to hear your thoughts and experience working with React UI Frameworks and Libraries in the comments section.
