Did anybody use Turbolinks + StimulusJs with Phoenix?

I fooled around with turbolinks but eventually settled on http://instantclick.io/ in the end. It is imo not as sophisticated but in my case that was a good thing.

The reason to use such a library is to decrease the perceived page load time. So if you are really well versed with your webframework (say Phoenix or Ruby on Rails) or already have an existing application with a lot of existing webviews then it is most certainly more cost effective to have a preloader library instead of a full rewrite in React, Elm, Vue, etc.

Now for Stimulus: I looked into it a few month back and I’m not sure I’m keen of the concept. It is quite heavy in download size and has in my opinion limited use cases. Most of the times you really don’t need data binding for existing markup. Use jQuery (or simply vanilla js) if you need to manipulate the dom or straight up Preact components if you really need highly interactive elements.

I think you throw away lots of the benefits of using Phoenix to render your html by using Stimulus, because now you suddenly have to maintain two technologies that have each some control over your markup.

If you are willing to make this kind of sacrifice (especially for new projects) it might be a better idea to do it straight up as a single page application.

Just remember: a single page app is seldomly worth the hassle. Most of the times you can (and should) reduce your application to more or less static views and forms. You don’t need to pump several MB of JavaScript to the client most of the times.

My 2/c :slight_smile:

4 Likes

I’m coming from a Rails background and happily using Turbolinks and StimulusJS on my test projects. If all goes well I can see deploying them.

1 Like

I’d love to know about your whole experience with Turbolinks + Stimulus.

I’ve been using Turbolinks and it’s been a great experience. Works just as well as it does with Rails.

I’ve been using this Turbolinks plug to handle the tiny bits of server side code: https://github.com/thechangelog/changelog.com/blob/e37f183ac104b8b9ce8b1e76d1f4330cac2bfc72/lib/changelog_web/plugs/turbolinks.ex

Otherwise it’s just dropping in the turbolinks.js file on the front end.

6 Likes

I’ve been working on a medium sized project with Turbolinks and (more recently) Stimulus.

With Stimulus I do things like dynamic checkboxes in tables with stimulus populating hidden fields for batch actions. Like checking which invoices in a table are going to be sent and then submitting the send multiple form. Experience with Stimulus is solid. I think it is a very well designed library and I think it is rather unique in the way it tackles the problem of combining interactivity with server side rendering. 5/5.

Turbolinks however is a different beast. I like it and use it. Mostly for having tabs on pages that are actually different pages but does not add to history but replaces the current location. Also I use it do persist the applications main menu between loads since it is slow to reload. Basically I render an empty menu that a stimulus-controller will populate from a different url, then when Turbolinks changes the page body it will persist that part of the page so the menu is not replaced by the empty menu. Few lines of code and good enough for me. 4/5.

Unpoly looks nice. What unpoly offers I will do with Stimulus instead. Turbolinks is more about location and stimulus about interactivity. Unpoly does both. I think both are viable choices.

Hope this helps someone.

6 Likes

I know they’ve been in the process of removing that dependency, unsure if that’s complete yet or not, or maybe one of those lightweight shims can be used now?

+1 (thousand)

4 Likes

I would like to try unpoly. Is there a example repo app with phoenix? Or what kind of plug need in server side?

It’s a client-side library, not a phoenix library, you just use it either via cdn or your npm assets then just decorate the HTML however you wish, all of it’s information and access is trivially accessible via the headers it sends on requests. :slight_smile:

1 Like

The only advantage of Turbolinks is that you get for free the integration for IOS and Android, as exemplified here

2 Likes

Could someone summarize? I can’t really view anything audio/video related easily, a webpage would be fantastic though!

Also, if you put the URl directly on it’s own line then the forums will onebox it. :slight_smile:

1 Like

You take for free an almost native experience encapsulating the app inside a webview in a Android/IOS shell, with several niceties. I strongly recommend all to watch this presentation.

I would watch it if I could, but unfortunately I still cannot. ^.^;

What is an ‘almost native experience’, and please don’t say PWA, I’ve yet to see any PWA that feels even remotely native (there was a huge thread on that in these forums not long ago)? Anything that runs in a webpage/webview is not even remotely native feeling.

I think for many apps you can take the performance to a level where it will feel as if it’s a truly native app. Uber’s Android app runs in a webview and I think it’s performance is great even on mediocre devices.

1 Like

It’s not just performance, I exceptionally dislike when a program does not ‘act’ like the rest of the system. I have a very specific dark theme with a very specific magnification of text (making it much smaller actually) and I expect the same interface through-out, swipe in from left for options and primary menu, from right for context-specific menu, double-tap top to jump back to top of whatever scrollable, etc… etc… etc… Webviews and apps made in somecrazyguitoolkit always end up doing things wrong. An example of a well made third-party program is Sync For Reddit, it fits the interface so fantastically, can be themed perfectly, is extremely responsive in ways that even few native apps, not to mention the horror of webapps, can ever achieve, and it’s a network interface to reddit of all things! ^.^

3 Likes

This is the best summary of their hybrid native approach I’ve found.

It’s out of date now (> 4 years!), and I suspect their approach as changed/matured; but it explains the gist.

They use a native app, native menus and interface and just use the web views for page content. Admittedly it doesn’t buy you any functionality over the mobile web app — they should be almost identical, save for menus — but makes the app easily accessible and feel more native in a way that a mobile web app doesn’t.

I don’t think it’s a perfect solution, but where the app largely mirrors an exciting website I think it’s a healthy compromise. Certainly preferable to the web site being built as a single page React app so that “migration” to a React Native app is easier.

1 Like

Having used (and frequently disabled!) Turbolinks in Ruby on Rails applications, I have to pitch in and say that I dislike it in general. Because it loads page content in an impredictable way, and normal browser events are not triggered like you (or many of the front-end libraries you might use) expect to, you can and at some point will encounter odd bugs that only occur when going from Page A -> Page D -> Page B -> back to Page A for instance. Those things are very difficult to debug, which meant that in all apps that did not really need it, Turbolinks got turned off.

1 Like

I’m not sure how this is related to Turbolinks specifically. Any pjax like library has to deal with the fact that the browser won’t trigger another onload event or some event listeners need to be removed & reattached or attached to a global parent. That’s why those libraries provide their own events for when pages are changed. Even libraries like react need to deal with that, but thoroughly handle that part for you with their knowledge about the rendered content.

2 Likes

If you want to see a more up-to-date 2016 presentation about how Basecamp does the hybrid native approach you are bringing up (including actual code) here is an IMO excellent opinionated talk: https://www.youtube.com/watch?v=SWEts0rlezA

3 Likes

Currently watching the talk, but I think it answers the question that I posed here a few minutes before you posted the video.

It seems that the Stimulus and Turbolinks approach is a very pragmatic approach.

1 Like

This talk made me finally go with Turbolinks & Stimulus combo. I have previously considered and tried Unpoly as well. The Android/iOS adapters that Turbolinks comes with are a bonus.