Architecture: Web app[front-end] from scratch 2021
3 min read
Currently, I work as a front-end engineer and I worked on some of the frameworks Ember, React, and Vue. during that time I learned a lot of things about the web application. some of the learnings I wish to share here.
#Intro At some stage, a front-end developer not only knows how to develop a feature. Should know what are the main components must-have in a web application.
Here I am sharing as much of waht I know here. If, you will feel I missed anything here please, feel free to add a comment below here the post.
- Choosing the right JS framework
- File system
- Styling system
- Design documentation
###1.Choosing the right JS framework The first is the best. we solve 60% of problems by choosing the right framework for your product. when you choose consider the below points:
- Don't choose a framework based on popularity until suit for your tech.
- Availability of Learning Resources
- Core Features (Which your product required)
- Active community and version release.
At least the above points when you decide on a framework for your product.
###2.File system As a product, the code files will grow year by year. so, later stage with a poor file system we have a code file finding and organizing, dynamic module loading issue. nowadays by default, all frameworks give a default file structure. but, we have to reconsider when files grow it will work for maintainability.
Some popular file system:
// Classic |--components |--services |--utils |--store |--icons |--routes
//Pods |--FeatureOne |--components |--services |--store index.js |--FeatureTwo |--components |--services |--store index.js
1. one of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.
2. TypeScript makes code easier to read and understand
3. Make app development as quick and easy as possible,
I mean styling system is organizing your style codes like CSS, sass, or CSS-in-JS. It looks like a small one. but, this only later is harder to maintain.
As a product design may change every 3/6 months. so, we able to change the design without the code duplication.
- Atomic CSS(New one (Facebook using this))
- CSS-in-JS (Popular one)
###5.Design documentation The design style guides nothing but, it's used to find co-worked what are the component available in the product and how to use them.
Why it's important:
- When a web app grows people may not know what are the components available.
- The Same component creates multiple times due to the different names. (Ex: UserLink vs Hyperlink(both do the same thing)).
Design documentation tools: Storybook styleguidist
Thanks to all who read this post.
Part 2 - Link