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

AstonJ
Anyone have any thoughts about Preact? They’re saying it’s a “Fast 3kB alternative to React with the same modern API”… A different kin...
New
First poster: bot
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over...
New
vLev
As a 16y/o with enormous amounts of time during quarantine, I decided to learn neural networks. To further understand the concept, I deci...
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: bot
Open source CSS framework for data visualization. Contribute to ChartsCSS/charts.css development by creating an account on GitHub. ...
New
CommunityNews
WebAssembly-Powered FM Synthesizer. An 8-operator, polyphonic FM synthesizer running completely in the web browser via Rust compiled to ...
New
First poster: bot
Explore DOM Events. Learn how the DOM Event system works through exploration
New
First poster: bot
Assembler CSS. Assembler CSS is a highly performant utility-first framework that allows you to quickly prototype and build modern websit...
New
CommunityNews
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!. I’m very excited to announce @parcel/css, a new CSS pa...
New
First poster: joeb
Bun is a fast all-in-one JavaScript runtime. Bundle, transpile, install and run JavaScript &amp; TypeScript projects – all in Bun. Bun ...
/js
New

Other popular topics Top

PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
AstonJ
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
New
New
PragmaticBookshelf
Author Spotlight Rebecca Skinner @RebeccaSkinner Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New
CommunityNews
Do you remember what video game developer websites and gaming websites looked like in the early 00s?
New