olafura
Fireblast - Html render with module components for Phoenix inspired by React
This is just for people to test out to give feedback it’s working but the documentation needs to be improved.
Here you can mess around with this example:
https://github.com/fireblast-ui/fireblast_example
Main git repo
https://github.com/fireblast-ui/fireblast
I’m working on a couple of thing at the moment:
Looking at integrating it well with Live view
Implementing a css parser so we can something akin or styled components
Trans tag which would be use gettext, probably similar to js lingui
Still tweaking the logo
and will hopefully have a simple website up soon.
Most Liked
peerreynders
The question is - how does the React component model (or its JSX representation) apply in this particular context - other than appealing to developers who are already familiar with it (for better or worse)?
My point isn’t to critique your contribution - thumbs up for sharing - but to encourage thinking (and perhaps develop a more compelling rationale for somebody to use this).
React and Redux reference Elm as prior art.
Interestingly I’ve never found a reaction by the React community to the conclusion of the Elm community that the component model does not work in a single source of truth architecture.
Richard Feldman came from React and reports on components not scaling well in Elm Europe 2017 - Scaling Elm Apps. He reports that the component approach introduced too much accidental complexity over an approach that managed the model, view, and update aspects separately. It roughly focuses on “narrowing types” on the inputs of the constituent functions that comprise the model update and view render in order to limit the complexity of each constituent function to make everything easier to reason about.
By contrast in React/Redux a component often has to rifle around in the whole application model to get the information it needs (and therefore is coupled to the model’s layout), pay attention to the props that are handed down by the parent component, possibly use some of the (function) props to affect the local (i.e. non-centralized) state of any of it’s ancestor components, or even receive child components (render props/component injection).
To the benefit of reuse:
The Rules of Three originated from Biggerstaff and Richter in 1987:
- You must have looked at at least three systems to understand what is common across them (and therefore reusable)
- It takes three times as much effort to make something reusable as to make it usable
- You will receive payback after the third release.
And just another opinion:
Often the component mindset goes hand-in-hand with the OO mindset.
I understand that we all like the idea of components but optimal boundaries tend to be much more complicated than that.
olafura
Yeah, for now.
I might need to let some modules have access to the preprocessed children.
I’m also ensuring that the code makes some sense because I’m parsing the xml, so making sure you are closing you elements and stuff like that is ensured.
But the fundamental reason to create this library isn’t to be cooler or have more features than Phoenix. It’s about being able to port React code easily and make people with React experience more productive.
hauleth
Nice, but I am still trying to grasp what is the difference between this and regular EEx? You mean the fact that you provide sigil_x?
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








