What JS framework do you use with Crystal?

Do you prefer Angular, or React, or something else?

Is there some framework that is more prevalent among Crystalites? For example, the Laravel community is almost Vue exclusive and it’s heavily integrated and the go to framework when you work with Laravel.

3 Likes

I’m using Lucky , and we are considering moving to https://www.mint-lang.com/ soon. But for now I use Vue, React, Stimulus, and vanilla JS. Lucky comes with laravel-mix which made it easy for us to just integrate any of those.

Happily using Vue. I think it well deserves it’s popularity. Much simpler than Angular, more integrated than React. Was quite easy to pick up even for non frontend guys on the team.

1 Like

No JS framework is prevalent in the Crystal community (like Laravel / Vue / Mix).

I use Preact / React and Vanilla JS. For the state management, I use Storux - State manager (home made). Some colleagues are happy with MobX

React is productive, as long as you keep its structure simple, without unnecessary overpatterning. I did some big projects with it, with several people. It scales well, remains simple and maintainable.

https://www.mint-lang.com looks great, but what stopped me from trying it is that there is no SSR, nor code splitting support (chunk file, lazy loaded). I hope to have the opportunity to test Mint one day.

Svelte.js looks nice also, I think I will test it on a small project.

The builder I use is vite.js. I used to use Webpack before, but Vite goes faster (based on Rollup and ES builder).

I use mithril.js with typescript, esbuild for bundling and uvu for testing. I keep my package-lock.json below 500 lines (E.g. i dont add eslint to my package.json and instead run it from a docker container). I also do not use JSX for templates but instead use the mithril builder syntax. This gives free syntax highlighting and type-checking (because its regular typescript). Also using conditionals and loops is easy (since it is typescript).

At work i have to use Angular, which i hate. It is slow, bloated, too much boilerplate, bloats your DOM with extra elements and classes, requires a weird template expression syntax with bad syntax highlighting and close to no type-checking, …

2 Likes

I don’t use Crystal for web at work (we use Ruby and Haskell, not that I wouldn’t want to use Crystal though ;-)) but for the frontend we use Elm more and more. It’s a functional language so it will take you a while to understand some things if you don’t have experience with functional languages (especially partial functions everywhere, which I still have some hard time grokking), but it gives you a lot of confidence when working with code and doing refactors. It’s awfully verbose, you have to write duplicate code many times, but it works.

2 Likes

Would you say all the benefits Elm gives you outweighs it being very verbose compared to modern JS frameworks? Honestly, that was 1 thing stopping me from considering it for real projects.

I have started a new project that needs SSR. I have gone with Marko.js, really good!

I know and Angular and React but I prefer Vue. It is right in the middle between Angular and React and is much lightweight.

1 Like

I did look at Elm some time ago, but it didn’t impress me much at all. I found that I am an OOP guy, and I don’t understand the beauty of functional languages aside from the absence of side effects (which I control perfectly fine in OOP languages).

1 Like

I am using Crinja for templating with Kemal and using very less JavaScript for front end. To add reactivity I am using AlpineJS. Since HTML is server rendered, I need not worry about SEO.

Routing: Kemal is handling all the required routes and serving HTML files.

Components: Crinja allows to have html snippets that can be included in other templates when necessary.

1 Like

I tried Svelte & TypeScript for some hobby project. It’s amazing. I previously used React & TypeScript and it was good. But Svelte did even better, it simple, I learned it in like 1-2 days, and the code - compared to React it’s like x2 code reduction, and the code itself is also simpler and cleaner.

5 Likes

I don’t really care much for JS, so I try to use as little of it as possible. Currently, I am trying out Stimulus for a project. My previous go to was the w3schools JS library.
If I ever need to build a SPA then I will likely go for Mint or Elm, both of them look really interesting.

I’ve started using htmx on my side project and it is perfect for my use. No crazy build tools, no crazy abstraction of the dom, just links, requests, and responses. Easy!