Phoenix.liveview, CDN and elm

I would like to know if anyone knows how live view will effect the CDN and other caching mechanisms. I know and understand that the changes will be treated as dynamic in nature. This means that we will update the cache each time there is a change. If your CDN supports it then only the diff will be sent to the browser.

How does live view work with elm is another cquestion. I like the concept but I need to ensure I have elm components within my application as this simlified things. The problem is how these should be embeded and what is the best strangey.

I know that elm attached a runtime to the JS file. The runtime is delivared each and every time. The runtime is small but does this mean it will be sent for each and every compiler. I also know that we can not interact with the dom from with elm soI suspect issue with the UI system.

To sumurise:

LiveView when it comes to caching and rendering ?

Elm and working with liveview ?

LiveView would, by in large, be delivering HTML. That HTML might include hyperlinks (e.g. a link to an image) and the browser would have to fetch the associated content. If that content lived on a CDN (if the image was stored on a CDN) then the browser would fetch it from there.

Elm is a client-side framework for calculating and working with client-side generated HTML. If your HTML is generated client side then it would not be delivered via LiveView.

2 Likes

Ok, thnaks this makes sense to me. My onky worry now is that I am not sure what is happening when using webpack with phoenix. The refrence to the file is referenced as Main.elm from the source at which I learned the process.

This makes little sense to me since normally in previous version we would generate JS then import it, then access a tag. I do not understand at which point does phoenix with webpack compile the js.

I think elm frontend hosted either with the app or else where. Then we havea status page in live view minor feature within. We could also maybe limit that only internal access via LAN

Webpack has tools called ā€˜loadersā€™. A loader tells it what to do when it encounters a particular file. Usually you tell it to recognize files by regular expression patterns in the config. Your config would says something like ā€œif you see an include for a file that ends in .elm, then use the elm loaderā€. The elm loader would compile the file and susbstitute the JavaScript.

2 Likes