Ask HN: Help me pick a front-end framework

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • Svelte

    web development for the rest of us

    I built a text annotation tool recently, first in React before rewriting it in Svelte. I found React's virtual DOM annoying, esp. when dealing with text selections + wrapping those selections with elements, etc. Svelte was just simpler in this regard (and overall, IMO).

    But if you're not a frontend dev and want to use lots of off-the-shelf components, Svelte's ecosystem is much smaller than React's, so you won't have access to full-featured component libraries like Material UI, Chakra, etc. Additionally, Typescript support is stronger in React (it's mostly there in Svelte, but lacking in some areas [1]).

    For both React and Svelte I found XState helpful to manage annotator state. It might not be necessary if your app isn't terribly complex (in particular, Svelte's built-in stores can handle complex state well), but I've found it a good way to think about state+events and more confidently make changes as a result.

    1 - https://github.com/sveltejs/svelte/issues/4701

  • CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  • Mithril.js

    A JavaScript Framework for Building Brilliant Applications

    I love Mithril (https://mithril.js.org), even in 2022. I wrote a blog about how/why I used it for Homechart:

    https://homechart.app/blog/tech-stack-ui/

  • Elm

    Compiler for Elm, a functional language for reliable webapps.

  • vitesse-modular-naiveui

    If you are really into the "Vitesse" starter template created by Anthony Fu (Vue core team member) but want to use the clean architectural pattern instead of monolithic architecture, then you can clone this repo and use your own project. Have fun 🙂!

    +1. I also recommend this template[1] based on Vitesse, a starter project created by one member of Vue core team. It includes the NaiveUI library with many advanced components ready.

    [1] https://github.com/arijs/vitesse-modular-naiveui

  • lexical

    Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

  • modern-editor

    [discontinued] A rich text editor for the modern web

    > "building a text-annotation based app"

    I'm going to assume that you are talking about a desktop-based webapp that is also responsive, and not a native app. I also believe you when you say that you do not know where you are getting into.

    I have 10+ years of experience doing front-end, with probably over a dozen React packages self-published in npm, and also tried making a rich text editor ~6 years back[1]. I actually recommend starting with no framework at all (please read on).

    Creating a rich text editor might be the hardest thing you can do in "normal" front-end (excluding some more advanced "frontend" fields like 3D or games). You can either manipulate raw cursors, which will be very tricky because I'm not even sure you have access to all the right APIs (specially on mobile), or you can attempt to use Contenteditable, which is a hell of its own[2].

    "All problems start with caret placing and multi browser support" [3]

    That said, I believe 90% of the complexity of your app will be here, around the actual interaction with the or <div contenteditable> that you will be using. For that, no framework will really help you, at all. So my recommendation is to first get that working, which will take weeks/months and hundreds or thousands of lines of code, and then worry about placing the little hovering boxes in their place (the "UI"), which is like 10 lines of JS/CSS[4].<p>[1] <a href="https://github.com/franciscop/modern-editor" rel="nofollow">https://github.com/franciscop/modern-editor</a><p>[2] <a href="https://answerly.io/blog/my-pain-developing-a-wysiwyg-editor-with-contenteditable/" rel="nofollow">https://answerly.io/blog/my-pain-developing-a-wysiwyg-editor...</a><p>[3] <a href="https://news.ycombinator.com/item?id=27938702" rel="nofollow">https://news.ycombinator.com/item?id=27938702</a><p>[4] <a href="https://stackoverflow.com/q/4495626/938236" rel="nofollow">https://stackoverflow.com/q/4495626/938236</a>

  • structured-text

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
  • TOAST UI Editor

    🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

  • DefinitelyTyped

    The repository for high quality TypeScript type definitions.

  • htmx

    </> htmx - high power tools for HTML

    As in every post about front-end frameworks, I must mention HTMX and Unpoly:

    https://htmx.org/

    https://unpoly.com/

    To learn more about the concept, please take a look at Essays here:

  • stencil

    A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

    Maybe have a look at Stencil (+ Ionic). https://stenciljs.com/

    Pro:

    - Simple to learn

    - Doesn't change all the time

    - First-class TypeScript support

    - Good default UI via Ionic

    - Compiles to Web Components (although to be honest, this doesn't really matter)

    - Easy testing

    - Ionic as a company invests in Ionic the framework + Stencil the compiler. Might be around in 10 years, altough things could change. But this is true for all frameworks.

    - You basically get an iOS/Android app for free, if you just dump the output in Capacitor (also developed by Ionic the company).

    Cons:

    - Stencil is not very widespread as a frontend framework.

  • create-t3-app

    The best way to start a full-stack, typesafe Next.js app

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Is TypeScript actually worth It?

    12 projects | news.ycombinator.com | 12 Jan 2023
  • Why TypeScript and ReScript are Worth Considering: A Comprehensive Look at JavaScript Alternatives

    4 projects | dev.to | 3 Jan 2023
  • State of JS 2021 Results and Analysis

    15 projects | dev.to | 20 Feb 2022
  • 🚀10 Trending projects on GitHub for web developers - 29th October 2021

    8 projects | dev.to | 29 Oct 2021
  • esbuild – An extremely fast JavaScript bundler

    16 projects | news.ycombinator.com | 13 Oct 2021

Did you konow that TypeScript is
the 2nd most popular programming language
based on number of metions?