DEV Community

loading...

Angular Dev's first React project - Netflix clone

Ajit Singh
Angular Collborator | Frontend Developer | Currently learning AWS
Originally published at ajitblogs.com Updated on ・2 min read

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

  1. Creating a component in React.js is a dream components cannot be created easier than this.

  2. Hooks for state management - Hooks are a really easy paradigm for state management

Neutral experiences

  1. Styled components - Suffers from scalability problems writing styles again and again seemed weird but the scoping was great.

Negative experiences

  1. Context was weird Calling use context again and again seemed odd somehow. Maybe I'm not accustomed to it.

  2. 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.

  3. How to scale react could not find good resources on it.

Angular apparent short comings after using React

  1. State Management- It has nothing compared to hooks

  2. Component creation is so hard in Angular

  3. Why do we need modules. Why?

  4. Angular team giving every package has taken its toll on angular innovation. Not much is tried by the community in angular.

Angular strong suit

  1. Angular basics will always be same because of the same lib use so easy to work on multiple projects

  2. Angular directives there is nothing like them

  3. Angular schematics setting up libs for you is great

  4. 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.

Discussion (15)

Collapse
vugar005 profile image
Vugar • Edited

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.

Collapse
ajitsinghkaler profile image
Ajit Singh Author

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.

Collapse
vugar005 profile image
Vugar

İ am afraid with React.lazy you need to use React.lazy(()>import.... ) on every component which depends on that component. Is not it?

Thread Thread
ajitsinghkaler profile image
Ajit Singh Author • Edited

Just create an intermediate component. That is how everyone that use SCAM in angular does it anyway.

Collapse
ribizlim profile image
Mark Magyarodi

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?)

Collapse
ajitsinghkaler profile image
Ajit Singh Author

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.

Thread Thread
ajitsinghkaler profile image
Ajit Singh Author

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

Collapse
fyodorio profile image
Fyodor

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?

Collapse
ajitsinghkaler profile image
Ajit Singh Author

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

Collapse
fyodorio profile image
Fyodor

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.

Thread Thread
ajitsinghkaler profile image
Ajit Singh Author

Yeah it's not a big hassle in Angular it's just while working with react I found component creation easier than Angular

Collapse
vugar005 profile image
Vugar • Edited
  • Component creation is so hard in Angular. Well I have not seen any complaints about that. I bet you know about ng g c {componetName} what is problem with that? There is even VS code extension for that as alternative .
Collapse
ajitsinghkaler profile image
Ajit Singh Author • Edited

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

Collapse
zohar1000 profile image
Zohar Sabari

that's a fine comparison, thanks.

Collapse
ajitsinghkaler profile image
Ajit Singh Author

Thanks