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?
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.
Yeah, PWA’s can be run entirely locally once downloaded, so they require javascript for any functionality. vue.js is really easy to get started with and going for PWA’s for one example.
So i want to create something like WPA-light I don’t need the offline functionality for my application as most people are almost always online.
What I really don’t like are pages that have almost no html when looked into their source code. It doesn’t feel right to me. For me there has to be HTML in the browser.
So I can go the JS route and my app will feel almost native on mobile devices or I can stay in my HTML/minimal-JS world and live with its downsides. So far I’m still undecided.
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.
Anything but using native API’s always look horrible though…
Every react-native app or some embedded webview drives me nuts on my phone because they always just feel ‘wrong’, the inputs are handled wrong, the interactions are wrong, the activities are wrong… >.<
If you want a native look&feel app, you really should go native. I’m a huge proponent of that.
You’ll probably find Breethe by Simplabs interesting. They created a PWA with Glimmer as the frontend and Phoenix as the backend but included SSR content rather than just using a client/api combo.
As for your use case SSR content and a service worker should be enough to run the site as a PWA. And when it comes to css something lightweight would be best but not crucial. It should only effect the initial load. After that everything will be cached.
Routinely! And it absolutely does not feel native. ^.^
The menu is in the wrong location, the menu accessor brings up the browser menu (not the page, even though it is a full screen page), can’t slide in the menu, doesn’t support activities, much slower than native, the buttons don’t look like buttons (they look like unthemed rectangles), etc… etc…
Now there are some fantastic apps that combine native and web use, like Sync for Reddit as one, they are fully native with all the features there-of but do a lot of web processing (mostly in the background to prepare for your use), that’s generally the way to go.
they may not feel the same to you, but I promise you there is a huge business advantage to having that icon sit on your users home screen reminding them about your business and the easiest, most reliable way to get that icon there is via PWAs (at least for android, iOS is hopfully catching up) where you can send people to your website and they can trust you to put a button on their homescreen rather than having to look you up in a play store that they may not trust or know how to use.
The right one is the application installed from the app store, easily recognizable by the FAB.
And to be honest, I’m using the Google Play much more than my browser and I hate the browser asking me if I want to have some icon on the homescreen for a web site. I do not like applications on my homescreen, thats what the drawer is for (searchable of course). The Homescreen itself contains the a calendar widget and an email widget. Nothing more.
That’s because PWAs are new. Let me ask you this, are you more confident you’re installing a PWA from the source that you wanted if you search via the play store or if you go to a URL? Of course it’s the URL, because you probably got the URL from a trusted source in the first place and the “app install” is coming the website you trust. Now obviously once your app is super popular your result will get good SEO on the play/app store too, but for the 99% of apps out there that might have a similar name as something else, a PWA is going to be more reliable and easier to “install”
Well, yes, now looking closer I realize, that the left one has a FAB as well, but I haven’t seen it, because its floating above some blue background
I prefer if the show me a link to the playstore, which then gives me the official app.
I trust the play store more. A PWA has about the same rights that my browser has (far too much) while I can revoke/deny rights on a regular application.
Again, if I want to open a website, I open it pro-actively via the browser. I do not want some icon on my homescreen. I want something that I can check for its battery and data usage. I want to see “twitter” used 10 MiB in the last month, facebook 20. And not your browser used 30.
PS: My mother, much less tech affine than me, doesn’t like those as well, as she feels very much the same about rights and restrictions. She never was asked if she want to grant access to the location service by the PWA, still there was a map which showed her location exactly. Maybe we can talk again as soon as the are controllable, monitorable and restrictable via native means of the host operating system.
but where do you get a link to the playstore? People don’t hand those out nearly as often as they hand out search queries to find a website via google and if you’re already on their web page you can already install it with PWA without another click
these are really good points, I wonder if phones will adapt around PWAs quickly enough to give the same tooling?
Hmm, how does an icon get there? Any icon that gets added to my launcher gets added on some page >2, the first 2 pages are reserved for widgets (I can manually move an icon for a program on page 2, but I never do, an icon will never be auto-placed there either), and this is the bog-standard android/google pixel launcher.
And no need to look up, it is trivial to link straight to an app, Pie even has a quicker mini-launcher that can install an app without even leaving the browser or whatever.
That’s definitely not a standard setup, I’m guessing that’s Twitter (I don’t use twitter outside of the terminal)? I’d lean more toward the left one as the bottom bar is the modern design that should be followed, however the design of it implies that neither are native, or at the very least not using the recommended API’s. Having a program that ‘interacts’ like the platform standard is very important to make an app feel comfortable, that’s one of the tenants of the Flutter framework by google for example (yay no xml horrors).
But yeah, neither ‘look&feel’ native by any stretch.
As for installing, well I search ‘twitter’ using the search bar at the bottom of my home page and the very top big obvious thing is an ‘Install’ button for twitter from the play store, clicking it brings up a little screen in the enter of my screen giving a little bit of information, the ranking, download count, I can click on the image to bring up the full view or hit install to install it right then and there, it took about 2 seconds (I’m on wifi), and I now have a notification on my phone to launch it or I can swipe it away. That doesn’t seem even remotely difficult, it took a couple of seconds and it was guided the entire time. Twitter on the other hand isn’t even letting me log in, no message or anything, I put in the 2fa and all and it just goes back to the main screen, great program there… oh wait, closing and reopening it and I am now logged in and seeing things, the heck? o.O
Let’s see, can swipe in, search bar is in the wrong place, bottom bar is good, can’t swipe between tabs, why are so many people following me (o.O?!?), the animations are ‘wrong’ (not following what I have set in the system, and they are too slow as I have them sped up globally.
It seems about half-native in feel, maybe some ancient android version in feel or something. Significantly smoother than a webapp though (Facebook’s app is just horrible, I’ve tried their PWA and native both and both are just absolutely horrid in quite a number of ways, especially battery usage somehow…), but twitter’s native app at least seems responsive if a little unusual in layout.
Likewise, a link is fine, some hovering popup on the screen or at the top is annoying as heck and will definitely ensure I don’t install anything.
Exactly this, this is the modern android homescreen standard, as said above no icon will automatically appear on the first 2 pages. The first page being google’s AI thing and the second being my daily widgets. Launching something is either a quicklaunch at the bottom, or I swipe up and hit one of the 4 ai-selected apps that it thinks I want, or I can search or jump straight to a lettered section or whatever, it’s all super fast and I can do that swipe-up thing from any screen (consequently I’m almost never at the homescreen).
The play store for CERTAIN, programs there go through a LOT of checks, sure some malware makes it through but most does not and most get caught soon anyway. Going to some url and ‘installing’ something from there without ever seeing the play store would give me a very immediate cause for concern and I’d be looking for how to undo that immediately.
Never install an app without going through the play store, doesn’t matter if it’s a little web link that is set somewhere or not, just Do Not Install Anything Without Going Through The Play Store, big security issue otherwise.
As stated above, both look non-native and horrible.
Precisely this
Ooo great point here, didn’t think of that but that would bug me too if I started using them…
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.
I don’t need the offline functionality for my application as most people are almost always online.
