mafinar

mafinar

Just tried Surface component library for LiveView and it's amazing

Wanted to try out Surface for awhile now and yesterday finally had the time for it, the developer experience is amazing and I decided to convert the project (a small one) to Surface. I would like to know if any of you have any experience with it or if there’s anything I’d look out for.

If anyone’s interested in the project, it’s here (It’s a Covid19 dashboard based on (soon to be pluggable) John Hopkins Dataset.

Most Liked

mafinar

mafinar

I demoed it on ElixirTO last month, the video just got uploaded, here is the link on it.

mafinar

mafinar

asdf is fun!

So the experience is very good. I had ~12 components and 2 live views written in plain LV and took around 2 hours convert 5 of them to Surface until I hit a bit of a block with passing Jason encoded data for the Leaflet Map hook to consume. I realized it’s probably a bug, reported it and went to sleep, only to see it fixed upon waking up, and completed the transformation without any hiccups. My muscle memory is much more attuned to this syntax as opposed to LV one (after all, it IS a wrapper so it’s meant to be friendlier ;)).

Now for the things I loved about it:

  • Syntax is reminiscent of Vue, did not have to stress much to understand how to do what.
  • The distinction between LiveView, LiveComponent and Component is nice and explicit
  • Awesome declarative is awesome! I get warnings and errors on mismatched prop types (for some of the types at least). I even get warnings if I feed something to a component I did not declare (i.e. id in a Surface.Component (stateless) and not declaring it).
  • Event handling niceties. Events are types too, declarable! Not remembering to @myself was convenient for me. Also :on-click is more intuitive than phx-click (on any other even).
  • The IDE integration is surprisingly good (I was expecting worse) and there is a to do list on it I look forward too
  • There is a Context
  • For me, <Hello name={{ @name }} /> is better than <%= live_component @socket, Hello, name: @name %> and <tr :for={{ row <- rows}}></tr> is better than <tr><%= for row <- rows %>{}<% end %></tr>
  • Bulma for examples! So there was this great minds think alike effect

I am still working with it as I type this (which explains the lengthy reply), I cheated on some of the components with :any as prop/data type so am fixing those and thinking of converting some of the form and input elements with Surface components. I hope to make the codebase look prettier by tomorrow and then move back to the backend. If you try it out and have any suggestions please reach out!

Carter

Carter

Looks v.cool Mafinar…but could you upload a demo to Heroku for those of us who dont have elixir dev environments pls?

Where Next?

Popular Frontend topics Top

mafinar
Wanted to try out Surface for awhile now and yesterday finally had the time for it, the developer experience is amazing and I decided to ...
New
AstonJ
Yew looks really interesting!! What is Yew? Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssem...
New
First poster: bot
HTML Boilerplate is the gold standard of HTML base templates but I’ve always wanted something simpler. We don’t need to force decisions ...
New
CommunityNews
Tailwind CSS Tools For Developers. A collection of tools designed for developers, to save you and your team time when building websites w...
New
First poster: bot
Local PDF uses Webassembly to edit your PDFs inside your Browser. Your files won’t leave your System, they will not be sent to another se...
New
First poster: AstonJ
Try it here: https://david.li/paint/ This thread was posted by one of our members via one of our news source trackers.
New
First poster: malloryerik
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivi...
New
First poster: bot
Instead of pulling you into a library-specific magical world, CalDOM let you fully access the DOM directly while keeping the reactivity. ...
New
First poster: bot
Solid stands on the shoulders of giants, particularly React and Knockout. If you’ve developed with React Hooks before, Solid should seem ...
New
abhay-rana
Bit of a personal itch-scratch post — curious if anyone else runs into the same thing. Every time I kick off a new React project I end u...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1052 22283 402
New
PragmaticBookshelf
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
New
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File &gt; New Rule: And select Deny, O...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New