What's new and funky in front end?

Question

I've been on sabbatical for a year, now I've returned and I am doing a side project for a friend with no deadline. Want to get wild with it and check out some of the newer technologies that have been released. I don't mean things like redux-toolkit necessarily, but things more like Svelte, Vite, Tailwind, anything like that.Friend's project a custom Shopify frontend with SEO requirements, so I've been debating checking out Gatsby or Next's new e-commerce stuff.I'm also just interested in new ideas in frontend that I may have missed. Remix looks kind of interesting, but it's not a massive leap from Next from what I've seen.

codeptualize · Accepted Answer

Generally I feel not that much "radical" stuff is happening, mostly iterations on existing concepts which imo is still very exciting.
Some things I have been excited about lately (not per se from last year, but definitely relevant):
- Stitches: CSS in JS solution that is great for design systems
- Radix UI: "Unstyled, accessible components for building high‑quality design systems and web apps in React."
- ESbuild; also SWC, generally newer really fast bundlers. I've been playing around with esbuild and I really like how easy and fast it is.
- pnpm: a npm/yarn alternative.
- Framer motion, Framer motion 3d, react three fiber, motion one: Lots of cool stuff happening in the animation & 3d space.
- Supabase: Similar to firebase, and aws amplify.
- React query, and swr; declarative data fetching
- Playwright: E2e testing/browser automation tool, I guess sort of cypress-ish, but really easy to set up and use.
- Typescript: not new of course, but it has pretty much become standard, means everything has bindings, lots of info out there, easy to use.
- ReScript: A more functional compile-to-js language, a bit niche and small, but really cool imo.
- Cool new CSS stuff (aspect ratio for example), also some new cool JS API's happening (I'm watching CSS houdini, although support is not there yet).
I could go on, there is lots of awesome stuff out there. Like I said I don't think as big of leaps as some years back, I think it's more better/faster/easier ways to get stuff done. It's a good time to FE dev!

acemarke · Answer

If you're doing any front-end dev work, take a look at https://replay.io . It's a true "time-traveling debugger": load your app in their custom browser, record yourself using the app (and reproducing a bug), the recording gets uploaded and processed on their servers, and then you use the debugging UI to investigate the code _at any point in time during the recording_. That includes full stepping debugger, variables inspection, integration with the React DevTools, and even retroactively adding print statements that print and show the values _at every time that line got hit during the recording_.
I had a chance to play with it live during a recent Redux livestream just before New Year's, and I learned a few things while using it:
https://www.youtube.com/watch?v=GvLGEuxV6BU
Also btw, I'm the creator of Redux Toolkit - if you do have any questions or feedback on RTK, please let me know! In particular, last year we released our "RTK Query" data caching API as part of RTK 1.6, which eliminates the need to write any actual data fetching code yourself. If you use Redux but haven't had a chance to try RTKQ yet, you should give it a shot:
https://redux.js.org/tutorials/essentials/part-7-rtk-query-b...

tambourine_man · Answer

Conversely, what&rsquo;s old and boring that works and it&rsquo;s guaranteed to be relevant 10 years from now?

poisonborz · Answer

Like with any "what's the cool" question, I suggest you always match the tech to the product, not the other way around, as this post might suggest. A cool idea, methodology, library, framework that makes your product better could be many years old, not necessarily something new.