So, this article has two purposes. The first purpose is for me to vent a little bit about my experience working with ReactJS. At the end of the day, the purpose is to hear back from the community and learn a thing or two about how to solve the problems I ran into and what I could have done better.
I recently started an open-source project based on GitHub's Markdown profile feature. The goal is to make it easy to include awesome features for your own GitHub profile. I started off with a NextJS project which I would export with GitHub Actions and then publish through Github Pages. During development, I ran into some hardship using the ReactJS framework feature. Let's have a look at the issues.
dannyverp
/
markdownprofile
Markdown Profiles is a project that generates markdown files for those that want an awesome Github profile.It provides several templates for you to use.
Interfaces
I've been working with object-oriented programming for a while so it's hard for me to let go of the habits I picked up there. However, to find out that Javascript doesn't do easily do interfaces was a terrible shock to me. I mean how can you adhere to SOLID principles if your language doesn't even feature interfaces?
The use case I had here was that I wanted to make it easy for other contributors to extend the markdown template website with new templates. I was going to create an interface that could be implemented and would contain all the methods that I use on the main page to render and update the templates. I ended up creating a template class which would simply chuck errors for methods that weren't implemented. A bit like such:
import React from 'react'
import {error} from "next/dist/build/output/log";
export class Template extends React.Component {
render() {
throw error("The render method is used to render the Template's form. Please implement a form!")
}
}
export default Template
Methods, methods everywhere!
Why is it that everything seems to be migrating functions? What have classes ever done wrong to you? I mean how are you supposed to easily keep track of objects that were returned from an API. Aren't you supposed to have high cohesion in your code? I'd love to have my data objects all within my classes. I'll be eternally (or at least a while) indebted to someone who (links me an article that) thoroughly explains to me why functional components are better.
Tracking global states
So I've got a system where users need to log in. Once they're logged in I want to be able to access the current user throughout my entire web app. I couldn't for the life of me figure out how to create something like a singleton in my application to track one sole instance of that user object. I found some documentation but it was mostly "we don't advice you do this". Admittedly a singleton is somewhat of an anti-pattern but that doesn't mean it suddenly completely ceased to be useful. How would I go about solving the above use case?
Ok, it's also been great
I can keep on ranting for a while but these three things have so far been my biggest pain points. The experience has also been great compared to the old school jQuery way of doing things. Javascript has come a long way and I hope it will keep doing great things in the future. But it also bugs beyond belief. Now's your chance to bash me and prove me wrong!😊
Top comments (4)
If you like interfaces you could try Typescript or Flow, there are solutions.
In my opinion, functional components are better because there is no lifecycle, hooks are way better. it's easier to test also. You can have pure function components, in class based you always extend another class. There is less code, and you have consistency, no mixins between classes and functions.
As for global states there are a few approaches to this, but the simplest way is by using the context hook, create a context and consume it anywhere in the app.
reactjs.org/docs/context.html
Thanks for your reply Sabin! Which one would you personally recommend: typescript or flow. I've got a bit of experience with Flow but I find it a bit clunky. How steep is the learning curve on Typescript?
Personally I use neither, I'm not a big fan of strict typing. I do understand what are the advantages on a larger scale...
Tried them both, both seemed kind of same as complexity... If I would to choose, I would choose Typescript, because it's not limited to react only. The support and community it's bigger and it has a wider spread across projects than flow.
Well a small update. I tried typescript and it didn't go over too well. It just adds to the confusion. I tried using abstracts there and all react could come up with was: don't use inheritance. I'm ready to quit JavaScript all together by now! 😅
My stackoverflow question which outlines my confusion for reference:
stackoverflow.com/questions/659225...