DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Bruno Bernard
Bruno Bernard

Posted on

Why not try declarative coding for the Web

Google and Apple, for the past few years, have been touting their frameworks: Flutter, SwiftUI, and JetPack Compose. Being a mobile developer (on occasion), I've noticed that these frameworks have something in common: doing declarative UI. And I think they might be on the right side with type of paradigm...

Either writing code for the web, or you're creating applications for phones, you'll notice that these two worlds never collide; different paradigm and approaches. That's why I tried to code declaratively on the web. I wrote a little project (WIP), it was quite interesting topic to dig into. No need to Google what it does or doesn't do. Each component is self-documented, easy to extend, no HTML and perhaps no css.

What I mean by declarative ?

For those who don't want to bother with css and html. You can expressively write components rapidly and autocompletion of your IDE will help you a lot.

Writing declaratively:

- Components already made and available for you to use.
- Extend Existing Components with its built-in styling
- Easier to read
Enter fullscreen mode Exit fullscreen mode

In a case you want a list:

Just do:

Column({
    children: [
        Items(),
        Items(),
        Items(),
    ]
})
Enter fullscreen mode Exit fullscreen mode

Or a row ?

Row({
    children: [
        Items(),
        Items(),
        Items(),
    ]
})
Enter fullscreen mode Exit fullscreen mode

What about centering ? (Yeah my dudes, it's so easy)

Center({
    child: Items()
})
Enter fullscreen mode Exit fullscreen mode

What if you want to create a scrollable/stackable/clickable elements ?

In declarative coding, everything is a sort of function you can call.

Scroll({ children: [] }), Stack({ children: [] }), Button() and so on...

How can we style a component ?

// Inside a component you will have all that you need, and it is self documented
// Your IDE will help you :)
TextSpan({
    text: "Hello",
    style: {
        fontWeight: FontWeight.Regular
    },
}),

Enter fullscreen mode Exit fullscreen mode

Check out my repository and try it for yourself. And see if coding this way is nice or really bad.

https://github.com/theArtechnology/declarative-js

Do you think it's time to simplify things? Why not try declarative coding for the Web?

Top comments (0)

🌚 Life is too short to browse without dark mode