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

Frontend Developer Forum Frontend Libraries/Tools
1

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.

5 Likes
2

Share link for this tweet.

1 Like
3

Nice one @mafinar - what was the experience like compared to the alternatives?

Unfortunately my Elixir install is broke atm - ASDF keeps saying I need to install Elixir when I already have!! But I am looking forward to looking at this when I’m back up :nerd_face:

2 Likes
4

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!

3 Likes
5

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

3 Likes
6

Thank you! I do intend to do that by next week. There are some optimizations I want to do before. There are corners I cut during the development so that I could get my hands dirty with LiveView (I’m still a noob), and had a series of refactors afterwards. Now that I am done with a more or less UI PoC, I will look out for any redundant data fetches or caching issues today and tomorrow and then deploy :slight_smile:

2 Likes
7

Or for those where they’re broke :rofl:

:+1:

2 Likes
8

Oh the things I learned when trying to optimize the data over the wire!!! Also, what is Heroku? :rofl:

I am sure I have some VPS-I-am-paying-for-never-used lying around somewhere, I’ll use one of those. Not sure if Heroku free tier would like a 500MB database.

2 Likes
9

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

4 Likes
10

Nice one Mafinar! I’m going to watch this when I get some time later :smiley:

It’s nice to ‘see’ and hear you btw!! :+1:

1 Like