Build Full-stack Product series: What I Did Wrong
Learn from my mistakes while building full-stack products (Javascript-based Fullstack: #ReactJS #NodeJS #Meteor #MySql #ReactivePrograming)
Why did I decide to write this article
Sharing my mistakes + I don’t want to make these similar mistakes again
1. Wasting loading resources and wasting rendering
Wasting loading resources and wasting rendering slow down and create negative impact on your product. So only preload resources always being used or regularly being used.
What I want to implement: I want to show a list of short movies that related to current playing movies When user pause at the end of the video && that video type is movie && the video is playing in full-screen mode.
It’s rarely being showed so I should not preload <ShortMovies /> all the time
Bad:
ShortMovies is a component showing list of movies
Good:
Solution 1: use display instead of visibility.
Notice that when using display, <ShortMovies /> is still being rendered no matter display = none or not. The different between display & visibility is when display = none, all image resources are not being loaded through network while all image resources always will be loaded with visibility. You can check it out by inspecting from DOM.
Solution 2: only render <ShortMovies /> when needed.
<ShortMovies /> will not be rendered and all image resources will not be loaded when willShow = true.
2. Forget to add meta tags for the website
Here is my example of adding meta description tags for SEO:
Adding meta tags help all website’s content appear on google look like this:
For more information about adding meta tags:
3. Store and read hide data on DOM instead of reading from the React’s state (Model)
If you use React, you should not read/store hide data on DOM
If you use React, you should not read/store data on DOM. When elements have disappeared or haven’t rendered yet or un-existed and many unknown cases… In those cases, the results from reading data on DOM would be null => Oops Mr.Bug begin here! That’s why instead of reading data from DOM you should read it from a model. In most cases, you just need to read data from React’s state or Redux’s store…
Remember, React is designed to do all those jobs interacting with DOM for you. You should not do it.
