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

wolf4earth
I’m currently in the process of rebuilding my personal website/blog from scratch. At the moment my website is using hugo, and while I thi...
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
New
First poster: bot
Kaboom!!. a fun JavaScript game programming library &amp; environment https://replit.com/kaboom This thread was posted by one of our ...
New
First poster: bot
Explore DOM Events. Learn how the DOM Event system works through exploration
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: bot
This release represents a huge improvement for elm-pages in terms of features, developer experience, and performance. It introduces a com...
New
magarrent
Welcome to @actionforms_io :rocket: No code - No backend Form sender for developers Send your without a backend Join now: https://www...
New
First poster: bot
RacketScript is an experimental lightweight Racket to JavaScript (ECMAScript 6) compiler. RacketScript aims to leverage both JavaScript a...
New
First poster: bot
Capacitor: Cross-platform native runtime for web apps. Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript
New

Other popular topics Top

AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
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
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
New
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
AstonJ
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New