DEV Community

loading...
Cover image for Lesser-Known Yet Still Popular JavaScript Frameworks for Front-End Developers

Lesser-Known Yet Still Popular JavaScript Frameworks for Front-End Developers

simonholdorf profile image Simon Holdorf Originally published at thesmartcoder.dev Updated on ・4 min read

Not long ago, we used Vanilla JavaScript or jQuery to manipulate the DOM in order to create dynamic web applications. Since then, a lot of very good JavaScript frameworks/libraries have emerged helping us to create even more stunning, user-centric applications.

In this article, I’m going to show you some powerful but less-known client-side frameworks and libraries for JavaScript. Of course, there are the big three — Angular, React, and Vue — but let’s have a look at other frameworks as well, like Svelte, Preact, or Riot. Which framework to choose depends on factors like developer skills, project situation, industry demand, and others. So check out these frameworks, and decide for yourself.


Svelte

svelte
Svelte is the new kid on the block that constantly gains in popularity among web developers. It’s described as a radical new approach for building user interfaces. Compared to Vue or React, which both rely heavily on the browser to do their work, Svelte uses a compile step during build time, allowing for better performance.

Svelte aims to deliver an outstanding developer experience by reducing the need for writing extensive boilerplate code.

Key features

  • Outstanding performance
  • Small bundles
  • Accessibility
  • Built-in style encapsulation
  • Declarative transitions
  • No virtual DOM
  • Less boilerplate code needed
  • Truly reactive

Ember

ember
Ember.js is another great client-side framework that makes building web applications pretty fast by trying to take all the repetitive, common tasks away from the developer. It provides access to modern JavaScript features.
It comes with a great CLI tool for fast rebuilds, auto-reload, and a test runner. Ember also has a great router that has been the inspiration for other routers, like React Router. The framework is very performant due to its fast rendering technologies.

Ember addons give you plenty of plugins to enhance your applications. Ember Concurrency, for example, can be used for efficient state management. Ember Simple Auth is an addon supporting all kinds of authentication, and Ember CLI Deploy keeps your deploy logic maintainable and reusable.

Key features

  • Build pipeline out of the box
  • Best-in-class routing
  • Extensive data layer
  • Fully-featured testing capabilities
  • Six-week release cycle

Preact

preact
Preact is, as the name already suggests, quite similar to React, but the library is much smaller, only 3Kb. Yet it has the same modern API as React. It provides the thinnest possible virtual DOM abstraction, stable platform features, real event handlers, and can directly be used in the browser without transpilation.
It’s also one of the fastest client-side frameworks available, lightweight, and highly performant.

Key features

  • ES6 classes, hooks, and functional components
  • JSX, VDOM, DevTools, SSR
  • Ready for server-side rendering
  • Modern browser support (IE11+)

Riot

riot
Riot is a simple and elegant component-based UI library. It brings custom elements to all modern browsers without the need for polyfills. Those components glue HTML and JavaScript together, forming reusable components. The syntax is clear and aims to be easily readable by humans.

At only 6Kb, this library is pretty small. It comes with fewer API methods than the bigger frameworks — which means there’s less to learn to be productive.

Key features

  • Performant and predictable
  • Close to standards
  • Tooling-friendly
  • Enjoyable syntax
  • Small learning curve
  • Tiny size
  • Powerful, modular ecosystem

Aurelia

aurelia
Aurelia is a modern client-side JavaScript framework for building web, mobile, and desktop applications. Applications are built by composing simple components, each made of vanilla JavaScript or Typescript with the corresponding HTML.
Aurelia has great documentation and tutorials to help getting started. It comes with a powerful, reactive binding engine, a templating engine, routing capabilities, plugins, support for server-side rendering, and more.

Key features

  • Easy to learn
  • High performance
  • Reactive binding
  • Simple testing
  • Extensive ecosystem
  • Unmatched extensibility
  • Routing, composition, and progressive enhancement

Mithril

mythril
Mithril.js is a modern client-side JavaScript framework developed for creating single-page applications. It comes with a small bundle size (9,79Kb) and provides routing and XHR utilities.

It’s used by companies like Nike and Vimeo and supports things like JSX, ES6+, animation, testing, and more.

It has good documentation to get started — with many co-dependencies and examples to try things out. However, I find it to be slightly behind the other mentioned libraries in terms of docs.

Key features

  • Very performant
  • Supports virtual DOM
  • Lifecycle methods

Conclusion

I hope you understand there’s more out there than Angular, Vue, and React. Some use cases require different approaches and frameworks. It highly depends on the situation and project.
In the end, you won’t make a mistake by going with one of the big three frameworks. Angular is a valid choice for large enterprise applications and is often paired with Java for full-stack development. React and Vue are also good choices. My advice: Don’t be a fanboy/fangirl/fan person. Try to choose a framework that fits your situation and the project you want to work on. Be open-minded!

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰

Discussion (11)

pic
Editor guide
Collapse
jfbrennan profile image
Jordan Brennan • Edited

I have to give a plug for Riot.

I’ve used it a lot and every time I have to switch to something else I always want to go back to Riot. It’s so so simple and powerful.

Vue is probably just as good, but it’s 20kb vs. 6kb and has some minor bits that aren’t as clean, like:

<div v-if="">
<div v-for="">
<div v-on:click="">
data() {
  return {
    foo: true
  }
}

vs.

<div if="">
<div each="">
<div onclick="">
state: {
  foo: true
}
Enter fullscreen mode Exit fullscreen mode

Also, Ember is not lesser known. It was very popular years ago, but fell out of favor as much smaller and easier frameworks came along. Ok, so I guess it’s lesser known but that’s on purpose.

Collapse
simonholdorf profile image
Simon Holdorf Author

Lesser-used might be a good term / better term if I think about it. Thanks for the comment!

Collapse
bc profile image
Brian Canzanella

Years ago I used Aurelia for a biggish SaaS app, and I gotta say I liked using it better than React ;)

Collapse
braydentw profile image
Brayden W ⚡️

Are there any reasons why you wouldn’t use Preact over React?

Collapse
larsonnn profile image
Lars Feldeisen

Preact has ~260 contributors and react 1530.
Preact would not exist without react.

So. Use Preact its good. But in long term its more likely react will have the newest features and faster updates.

Collapse
braydentw profile image
Brayden W ⚡️

Good points. I’ll have to give Preact a try sometime.

Collapse
paulasantamaria profile image
Paula Santamaría

Great post! I'm currently working with Svelte and totally loving it.

Collapse
simonholdorf profile image
Collapse
abhishekkumar201005 profile image
abhishekkumar201005

Sir, I have a doubt on selecting framework a/c to my work, I am college student now and working on some mini project.So, I am very confused to select best framework for me. Some people say React.js is good choice and some says Angular.
So, Please gave your advice because I believe in experience rather than name.

Collapse
gradam profile image
Jakub Semik

My advice is:
Don't spend to much time choosing the framework.
Just pick one and do a project with it, then do another project with a different one and another. After few of those you will be able to tell which one you like the most.
As there is no such thing as "the best" framework. There is just "right tool for a job" and personal preferences.

Collapse
christiankozalla profile image
Christian Kozalla

Are there any recommendations or steps to find the "right tool for a job"?

I constantly wonder which tool or combination of tools to go with for a new project, but since I am not that experienced yet, I d appreciate some guidance from time to time.

Of course I know, that everything depends on the project / goals etc, and that there's not only one single correct answer to this..