I am an angular collaborator and an avid user of Angular this is my first react project a netflix clone using react, styled components, jest tests. It uses firebase firestore as the DB if you want to run it you have to set it up using the seed data already given. To setup follow the instruction in readme and firebase.prod.js. You can also fork my repo or set it upto learn more.
Few of my positive experiences
Creating a component in React.js is a dream components cannot be created easier than this.
Hooks for state management - Hooks are a really easy paradigm for state management
Neutral experiences
- Styled components - Suffers from scalability problems writing styles again and again seemed weird but the scoping was great.
Negative experiences
Context was weird Calling use context again and again seemed odd somehow. Maybe I'm not accustomed to it.
How to find right tools for the job you are trying to do. React has so many options which is great but it makes choosing the right tool that much harder.
How to scale react could not find good resources on it.
Angular apparent short comings after using React
State Management- It has nothing compared to hooks
Component creation is so hard in Angular
Why do we need modules. Why?
Angular team giving every package has taken its toll on angular innovation. Not much is tried by the community in angular.
Angular strong suit
Angular basics will always be same because of the same lib use so easy to work on multiple projects
Angular directives there is nothing like them
Angular schematics setting up libs for you is great
Angular Cli is the best
CSS Management
I don't know how we got to this place in frontend but there is no great way in Angular or react to manage your CSS is important in frontend but not much attention or tooling is there for managing it
Let me know in the comments if I'm wrong about something or I need to study more I'm trying to learn other frameworks so that I know more paradigms in frontend development.
Top comments (15)
Why we need modules?
Modules is important concept for me to group related components together so when I look at component declaration I know the business scope and where it is used (instead of searching that component everywhere). It is crucial in big projects. Also modules allow you to lazy load all at once instead of seperate loading of related component( imagine 20 + components seperately). Without modules on initial project we can assume it is easier but as project grows , things get out of control. I looked at your Neftlic clone repo and it consists of few components so you may not feel difference with/without modules. Angular is working to make ngmodules optional but even with that I would prefer to use modules.
also don't forget, that with modules you can avoid the import hell in every component. (e g. importing every used material component every time?)
Yeah but that causes another problem importing full modules in Angular. I've seen many times a shared module with all material components imported. Imported at many other places. That just add in wanted is to your modules. That is a problem too. I component creation seems so trivial in react that I don't think you should import more than 4-5 components in one and import them at other places. If you have created your app in the right way. I don't think there is a need of modules. I have read and wrote about Angular Compiler and I think we could have worked around them. It is one of the culprits that creates a bad narrative that angular is hard. In other frameworks the mental model is so easy. Create components and import them use them. We have worked with modules for so long that we have wtarted thinking it as important part of a framework but working in React made me think we could have work without them.
Moreover in services providedIn option have you given a module name it creates circular dependencies. Providing service in a module seems like the right thing but then you have to create an intermediate module import there and pull that module in the module. See already this comment is getting so confusing. I don't think modules are a good pattern and I'm very happy that they are going to be optional
Why don't we use our folder structure to manage our components. We can keep one type of components in one folder and we can use import for lazy loading a bunch of components in react too. So I don't see any need for module.
İ am afraid with React.lazy you need to use React.lazy(()>import.... ) on every component which depends on that component. Is not it?
Just create an intermediate component. That is how everyone that use SCAM in angular does it anyway.
Thanks for sharing your experience, it's interesting, I want to re-visit React as well (did React stuff last time about 4 years ago). A couple of questions, if you will.
Aren't hooks scoped to components in React? How can we share something like feature-state between different parts of the application in React using hooks (or can we)?
Also why component creation is hard for you in Angular? What specifically?
Component creation is hard on Angular wrt React in React you can just write a function and return Jax it is a component in Angular there are decorators, lifecycle methods. We can use useContext hook to share data given by hooks. Then you can use redux too. Hooks are great for handling component state. That is what I think
Thanks, that makes sense.
In terms of component creation, I think in React the amount of boilerplate is definitely much less. Though I don't think it's too complex in Angular. It's repetitive and when you work with it day-by-day, you don't even notice that. As a benefit, it gives a great separation of concerns - each thing has it's well-defined place, which is quite useful when you work in a dev team.
Yeah it's not a big hassle in Angular it's just while working with react I found component creation easier than Angular
I know that but still compare it to react just a function that is a component won't that be great. It is just a function that returns JSX
that's a fine comparison, thanks.
Thanks