Nefcairon
Phoenix: Lightweight PWA framework?
Hello,
TL;TR: I look for a lightweight compagnon (HTML/CSS & minimal JS) to milligram to build a PWA with phoenix.
Long version:
I want to improve in Phoenix (means: stop learning and do something productive) and implement my first “real”, but small project. Development will take time and I am in no hurry, so I will start with phoenix 1.4 in its current state, wait until it’s released and later integrate Phoenix.LiveView.
As you know Phoenix 1.4 comes with Milligram CSS and it seems to fit my “mobile first” approach: At least a “blank” phoenix 1.4 app looks much better an Android then phoenix 1.3. My future app should be as a progressive web application (PWA), and so “work” on Android and IOS as well as in the desktop world.
But as Milligram lacks on navigation elements I need something additionally. Currently I think I will need a mobile bottom navigation, cards and maybe a navbar “hamburger style” (though it seems that later is already “depricated”).
Are there any good lightweight components/frameworks? In my current situation I don’t want to learn any new “language” (as SASS), I want to stay within HTML/CSS/JS and Elixir - and use as little JS as possible. I don’t want to create a API with Phoenix/use a pure JS framework on the frontend, I want to create HTML with Phoenix that just “looks fine on smartphones and on desktop browsers”. I further value “lightweight” because of speed and second it’s easier to understand what enables me to learn from it.
I googled, looked at dozens of CSS frameworks (e.g. materializecss, which seems to be rather dead) and read the forum. Still I am unsure… So is there something you could recommend me? Do I have to use something big as bootstrap?
Thanks in advance.
Most Liked
bryanjos
I don’t know if this helps or not, but I successfully created a non-spa PWA using Phoenix. Progressive Web Apps have a scale of functionality they can do. For me, I just wanted something that would make an icon on mobile devices and show a message about being offline when there was no connectivity. You can do a lot without having to build a full-fledged SPA.
Some helpful tools/readings for me were:
peerreynders
To me Progressive Web Application (PWA) implies a refinement of the Single Page Application concept which means it’s JS heavy and tends to use some sort of JS framework. For the time being “lightweight PWA” seems to be an oxymoron.
The implementation style you seek seems to be exemplified by the sidecar site (Github, article) which should be quite easy to emulate with Phoenix/EEx - it doesn’t even use a CSS framework but you have to know your CSS.
dgmcguire
I can’t tell you which one is PWA and which one is the app but I can tell you which one was easier to get an icon for… it’s the PWA by far
Last Post!
DevotionGeo
I installed Sidecar on Android now and looks like much is changed after this discussion. PWAs are now shown in the apps list inside settings, their battery usage, data usage, permissions etc are shown there. Their permissions are controlled from settings.
Also, when I was installing it, the notification area showed a wait bar from the Play Store saying “Adding Sidecar to the Home Screen”.
A tap and hold on the icon also shows you Site settings which takes you to a settings page where you can clear the stored data and can allow or disallow permissions.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"