As it pretty much is widely known, files sizes are quite an issue with SPAs. For once static content is included within the initial app download, but also all the javascript resources need to be parsed and compiled.
In my app, I have a dynamic navigation bar, which includes the logged in user. I would like to add static resources, that for instance contain documentation. So far I have tried to make such content available within api calls, but for resources like documentation this seems to add unnecessary complexity, as pretty much an app version comes with the matching documentation (and only needs to display documentation for that exact version). But there are also other pieces like a common FAQ, that is displayed on multiple pricing pages. The app is already using fastboot.
So far the options seem to include:
- embroider (which I couldn’t get to work in the past, due to the usage of fastboot)
- prember (which seems to work for a whole route only - but I can’t prerender the navigation bar as it includes dynamic data)
Is there any other way to solve things like these, which I so far haven’t been aware of? Any recommendations?
I’m wondering if you couldn’t figure something out using a lazy-loaded engine. Though from what it sounds like you may want a routeless engine(?) which unfortunately don’t yet support lazy loading. So this content is loaded inside other content on one or more existing pages? A routable engine would need to be “mounted” in the router somewhere meaning it would render into an {{outlet}} so that doesn’t sound like it would work for you, since I think that’s basically the same situation as prember. Though depending on your page content maybe it would be possible to use nested routes cleverly? I’m just spitballing.
Anyway other than embroider, prember, and API requests (whether JSON or old-school server rendered HTML content) engines are the only other thing I can think of.
Yes, I guess this is pretty close to how I was thinking about it. Pretty much I would need some sort of runtime partials - so that I could include faq.html into pricing.hbs. Seems like a wild combination of prember included into an iframe could do the job - but that sounds so awful, I don’t really want to get into that.
Pretty much I would need ember-cli to render a static component into a html (+ css) file, which then gets loaded from the server at runtime when needed. This just reminds me of another recent post here, where someone was trying to load components lazily, as react seems to be able to do that these days. Are there any plans for ember to support such things?
But thinking more about it, for now it probably makes sense to use prember or guidemaker to create an independent documentation page and/or invest more time to make embroider work (as route splitting will likely help a lot in terms of loading times)
IIRC Embroider would be the mechanism that allows anything of this nature. As far as I know the main “out of the box” use case would be route-based code splitting but since it’s webpack under the hood it’s possible you could wire up something else if you had embroider working.
If you were going to have a separate documentation page something like prember would probably be a good call, though in that case a lazy loaded engine might be worth your time as well depending on your needs. The benefits of an engine would A) mostly be that there’s no extra deploy/build steps it’s just part of your ember app but it’s isolated and can be loaded lazily and B) it’s Ember so if you ever needed any of the ember features (helpers/components/shared CSS/etc) in the engine they’d be there.
But yeah if it were me I’d probably try working the Embroider path first and see how far you can get.