React is quite the tool, and using it’s powers to control the DOM and build out web apps has changed a lot about web development… though… I was looking at a form component I built where I thought it might be a good idea to limit the text characters within a message input field as I don’t want to get any surprises. I already have verifications and sanitizing in place. I had to come up with a character limit and a UI that would be kind enough for a visitor who wanted to get in contact with me through submitting this form. I’ve already got some things in place using state and hooks along with some simple CSS in JavaScript logic. Very easy with React! It wasn’t quite user friendly so I took a look around the web for inspiration. Twitter is the classic example. But on inspection using devTools it’s quite easy to see the complexity of their faked input is quite over the top! Granted the UI is very friendly, the nice circle gives a sense of a running total, you then get warned when you’re getting close, and then red background text counted when you’ve gone past the char limit, allowing you to edit your thoughts down enough to allow the Tweet button to work. Why the complexity? Have we lost our way? Should not code and structure along with UI have some weight on a balanced approach to a simplified clean code? I might only be guessing here, though is it possible one large team works on each small component to build the most amazing things since sliced bread? 
LOL
I’ve seen and replicated (or tried) some crazy UI’s with 3d effects, SVG or Canvas animations ect… and those expect to have very complex logic that is hard to understand.
You wouldn’t expect a tweet button to be that over the top.
I personally think just about everything has been over engineered. That’s why we are seeing static site generators gaining popularity.
The other problem is also that websites are just shipping too much JS / too many scripts.
One example of unnecessary JS is routing. I’ve seen a project where they put a React like clone in a Service Worker. It works like this:
- User clicks real link
- SW intercepts the fetch
- SW requests JSON,
- SW pulls templates from the cache/ IDB
- SW ‘hydrates’ the template with JSON and returns HTML (like SSR)
- Browser renders content with the HTML stream parser (min 2x faster)
- DCL usually sub 16ms (60fps)
The advantage of this is:
- No render blocking (SW script is concurrent)
- No routing logic (browser works as normal)
- Faster page renders
- Can be offline if cached
Regarding components/ animations you don’t really need a framework. Web components are great.
I maybe should have added a question in there, probably the answer will be more opinion… what would be an generous enough message length in characters without upsetting a visitor with an honest enquiry submitted through a form?
