mssantosdev
Phoenix Blog Post: Creating a Frontend Style Guide with Phoenix Components
Our take on how to build a frontend style guide with Phoenix Components, Atomic Design and plain CSS, with focus on reusability and code organization.
Most Liked
zhangzhen
This blog post is worth reading. I wonder how your guys deal with live components and where they are placed in the atomic design?
mssantosdev
Thanks @zhangzhen!
I wonder how your guys deal with live components and where they are placed in the atomic design?
Great question - we don’t use live components yet. Assuming they are more complex than the “static” ones, I would create them as organisms with the prefix live_.
derpycoder
I’m glad this resurfaced.
I loved the defdelegate approach to avoid cluttering up the Organism.
Will implement this in my own project, that is just starting out.
Have you considered using Storybook?
I am bit scared of business logic seeping into the components over time, so I was thinking of separating components as well as adding storybook to avoid those pitfalls.
Plus whenever we have to change something in a component, we won’t have to jump through our UI to make it happen.
Popular in Blog Posts
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








