A remaining opportunity is a beautiful component library like a shadcn. You can dunk on the complexity of JavaScript, but every choice has tradeoffs and a huge advantage of that ecosystem is you have amazing front end engineers doing beautiful, accessible UI work.
Just look at the demos of LiveView on their own site. Pretty rough by comparison.
It’s not to take away from the effort. Truly enjoyable to develop in. Just to point out there is an even higher level to reach next.
Preline - https://preline.co/docs/frameworks-laravel.html You can use the Laravel guide and adapt it to Phoenix. Quite trivial install
These two UI component libraries are mostly HTML and Tailwind, so not too complex to use.
https://www.youtube.com/watch?v=FADQAnq0RpA&t=2322s
This demo doesn't update the URL to keep state (but push_patch would make that trivial). I'll think about more complex examples for cursor pagination, but the solution to massive collections (thousands of entries) is going to be stream + limit
Its extremely easy to customize and build a reusable paginated table component
The flop is a good idea. Love the flop
In case folks missed it, buried in the blog post is a new installer that lets folks try out elixir/phoenix in seconds. It installs elixir and generates a new phoenix project from a single command:
osx/linux:
$ curl https://new.phoenixframework.org/yourappname | sh
windows powershell: > curl.exe -fsSO https://new.phoenixframework.org/app.bat; .\app.bat
You can visit those url's directly to see what the scripts do. It extends the official elixir prebuilt installers: https://elixir-lang.org/install.sh and
https://elixir-lang.org/install.batedit: You can see it in action here: https://x.com/chris_mccord/status/1864067247255306332
Of course we also have non |sh installation guides if that's what you're after: https://hexdocs.pm/phoenix/installation.html
Now that this is out, I'm looking forward to put together a few new demos. What would folks like to see? Happy hacking!
Suggestions for Demos:
1.Charting Libraries Integration
There’s currently a lack of demos showcasing LiveView integrated with powerful charting libraries like Apache ECharts, Plot, Chart.js, etc. A demo of a LiveView-powered dashboard using one of these libraries, connected to a database like SQLite (for simplicity) or DuckDB (for speed and demonstrating integrations beyond Ecto-native DBs), would be fantastic.
Emphasizes interactivity: For example, demonstrate how a server-based LiveView can handle actions such as mouse hover on a chart to update tooltips/labels, click-and-zoom interactions, or connected charts with brush functionality.
2.UI Component Libraries
A demo showcasing robust integration with UI component libraries would also be valuable. Features like tables with pagination, sorting, filtering, and autocomplete/typeahead functionality within modals could be a strong focus.
I’d suggest leveraging lightweight libraries like Flowbite or Preline, as they integrate seamlessly with Phoenix and rely on almost pure HTML and Tailwind for styling.
For additional inspiration on speedy charting libraries, this resource might be useful:
https://observablehq.com/plot/marks/rasterhttps://observablehq.com/plot/marks/contourhttps://observablehq.com/plot/marks/cell
We generally recommend stacked bar charts over pie and donut charts, so we haven’t prioritized those. But you can already implement them using custom marks, and there’s even a hacky way of doing them using Plot’s map projection system.
https://observablehq.com/@observablehq/pie-to-donut-chart
I don’t understand your comment about the “D3 example.” If you’re looking for Plot examples, you can find them linked from the Plot documentation and the gallery:
https://observablehq.com/@observablehq/plot-gallery
Plot is designed to be extended with JavaScript (rather than a non-JavaScript DSL such as Vega-Lite), such as for custom marks and data transforms. So you might occasionally see other libraries being used together with Plot.
"I don’t understand your comment about the “D3 example.”..." 1. When I visit the Plot Gallery https://observablehq.com/@observablehq/plot-gallery 2. Go down the page to "More from Observable creators" 3. Select an example I like, for example - https://observablehq.com/d/3ea4b4458fed9242?page=2&collectio...
It turns out it's D3, not Plot. I think you just have all possible viz in this section, but for me as a user coming from the Observable Plot page and clicking on "See more..." my expectation is to see only examples of what could be done with Plot, not both D3 and Plot. I need to explicitly click on each link an check if it's Plot based or not. It gets tiresome and the curiosity just wanes away. Thanks.
https://hostup.se/en
Is much cheaper than hetzner and still in Europe.