mwmiller

mwmiller

Use Client APIs without Actual Javascript

I’m wondering if there is a way to use some Javascript client APIs via Hologram without writing some kind of pure JS hooks.

I want to add some date information to my pages. A notoriously sticky wicket, to be sure. However my needs are fairly simple. I have UTC instants in my data source. I’d like to display them as local times for user convenience.

I don’t like pushing client concerns to the server or vice-versa. So I’d rather not round trip the client’s TZ to the server to create a date string in Elixir which might not even match their locale’s preferred formatting. Instead, I’d like to push the common-to-all-clients UTC instants to the clients and allow them to format it as desired.

Is this just something for which I will have to write some Javascript? Or is there a clever workaround of which I cannot think?

Most Liked

bartblast

bartblast

Creator of Hologram

I won’t prioritize the DateTime porting immediately then, but I’ll keep it high in the backlog since others will likely hit this pattern too.

bartblast

bartblast

Creator of Hologram

Web API wrappers are planned, but locale and time handling need a special isomorphic-aware approach. For your use case, you’d probably want to server-render with a default timezone first, then update client-side - otherwise you’d have to render all dates only after client load.

Some DateTime timezone functions are impractical to transpile directly because they require timezone database libraries like tzdata (Elixir’s default UTCOnlyTimeZoneDatabase only supports UTC). These libraries contain large IANA timezone databases that would bloat the JS bundle. Instead, it’s better to port them manually using Web APIs underneath while maintaining the same Elixir API.

You could theoretically get the timezone like this now:

timezone = ~JS"return Type.string(Intl.DateTimeFormat().resolvedOptions().timeZone)"

This would return something like "Europe/Warsaw", but the DateTime functions to format dates with that timezone won’t compile correctly yet for the reasons mentioned above.

Two insights from your use case:

  • I need to manually port key DateTime functions
  • There’s probably a need for client-side system info modules like Hologram.Client, Hologram.Device, Hologram.Platform, etc. (you’d use something like Hologram.Client.timezone())

Is this blocking you at the moment?

mwmiller

mwmiller

Thanks for the explanation! This is actually further along than I expected already.

It’s a silly little side project and my explorations of what’s possible. It could not matter less in the grand scheme of things.

Where Next?

Popular in Questions Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New

Other popular topics Top

joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44139 214
New

We're in Beta

About us Mission Statement