nette/application

Missing barebone JS library for AJAX/snippet

xpavp03 opened this issue · 16 comments

The only official way for using AJAX/snippets is to install a JS library that is heavy and hard to install (Naja), or has been abandoned (Nittro).

It's hurting the reputation of Nette that it doesn't have its own barebone JS library for this, just like it has one for forms validation.

While it is possible to just download Nittro and get it going fast, turning on AJAX for all links is a bit too much for someone who just wants to try it out. Finding instructions for building a custom build with this feature inverted was never particularly easy and the custom builder has been broken for months. It no longer matters because the author officially confirmed he no longer plans to invest into Nittro:
nittro/nittro#42 (comment)

Naja is a cool project but there's no download, the documentation only says npm install naja. This is fine for a frontend developer but not for a pure PHP guy.

Componette only shows Vojta's library which no longer runs with the latest Nette.
While it is possible to find a working clone in the wild wideness of Github, the documentation doesn't link to it.

But even if it did, in a few months the history would repeat. Nette needs it's own JS support.

Basically we're saying to new users of Nette that in order to use snippets, they need to

  • install Node first
  • or start using AJAX everywhere
  • or spend hours trying all sorts of outdated libraries in a hope to find one that will work for a while
  • or write your own JS support

Unfortunately, I cannot maintain the proposed library myself :(

What do you recommend on your Nette seminars?

mabar commented

So problems are that docs recommend no longer maintained Nittro and Naja does not have a pre-built version? Naja works great and since there were no BC breaks in ajax on Nette side, the outdated nette.ajax.js should work (and it does) just as fine.

mabar commented

Oh so there is a pre-built version https://naja.js.org/#/installation?id=from-a-cdn-or-a-local-file

It is just not mentioned in quick start and tutorial sections, @jiripudil

dg commented

Well, if the only problem is that the „AJAX & snippets“ page lacks mention of embedding Naja in the page via <script>, I'm happy to add it there. But you could skipped the reputation-hurting bullshit, right?

@dg I think he's right on that - imagine how you'd feel if you came across something like this for the first time:

  • "Hey, we proudly present to you this amazing backend framework!"
  • "One of the cool features it has is X. To use X, you can pick from any of these three 3rd party solutions:"
    • <last commit 5 years ago>
    • <abandoned>
    • <only possibly viable candidate>

I don't know about you, but when I run across something like this, the state of the third party integrations heavily influences how I feel about the main thing, because obsolete / abandoned integrations (that are still the recommended way of doing things) often signify that either that specific feature or the entire project aren't really used all that much - so if I want to rely on the feature or the project I might be setting myself up for an unpleasant surprise a couple of years down the road.. I don't think you need to take it personally, it didn't read as an intent to attack or insult from my point of view, just an observation (and in my opinion a correct one at that).

mabar commented

@jahudka Would you mind notifying others on slack and forum that you no longer plan to maintain Nittro? Most people simply don't know project needs help and there are still some pretty big projects that depend on it and may be able to help with development.

dg commented

@jahudka oh heck, there was a link to an awesome well-maintained library (as first) and link to Nittro. No reason to write essays here about Nette's reputation suffering. All he (or You) had to do was create an issue that Nittro is unmaintained and should be removed, or just click edit and remove the link. I'm really not going to read this stuff because of a link someone historically put in the doc.

Oh so there is a pre-built version https://naja.js.org/#/installation?id=from-a-cdn-or-a-local-file

Sorry, I missed that.

I read the Install and set up Naja page, and got scared off by the need for npm.

Also, the page says I need to use a module bundler and goes on to reference Webpack and a need for a Nette extension. Although I wasn't 100% sure from the wording that snippets wouldn't work without the Nette extension, all of this together just felt like too much additional work compared to simply linking some form of nette.ajax.js just like we do with netteForms.min.js.

So, are you saying that I can just link to the CDN built and I'm good to go without any additional libraries or extensions? I wish this was more explicit in Naja's docs.

At some point nette.ajax.js in the past years stopped working for me and after checking back now, and seeing the documentation still referencing invalidateControl() instead of redrawControl(), I didn't assume it would work.

@mabar yeah, I should probably do that.. I honestly didn't even know Nittro is still being used - I get maybe one or two questions a year on the Nittro forum and I know of only one large project which afaik still uses it in production, but I think that project is in the process of transitioning to a different solution. So I didn't realise I need to make some kind of statement - I simply didn't think anyone cares at this point.

@dg yeah, you have a point, sorry.

I'd like to point out that my post wasn't only about removing a link from the docs.
It was mainly about the (unnecessary) complexity of (now the only) officially recommended library. Somehow this got lost in the heated discussion.

mabar commented

What is unnecessary complex about Naja except the setup docs which could be easily fixed? I don't see much that could be simplified, an official library would be probably almost identical.

Just throwing this out there for AJAX related stuff, I have used htmx on a couple projects and it's actually amazing. I used it with Latte in fact and rendering out template partials was trivial. This may be specific to another discussion, but thought it may be relevant to discuss in here.

@n0nag0n Thanks for sharing. Did you write something that made it work with Nette snippets (JSON with fixed structure that contains HTML, flashes etc.)?

No, I didn't use the Nette framework to integrate it, however it is easy to build a bridge to handle JSON requests through events in htmx. I know this is crappy jQuery but just to illustrated the point.

$(function() {
	$('body').on('htmx:afterRequest', function(event) {
		if(event.detail.xhr.getResponseHeader('content-type') == 'application/json') {
			var json = $.parseJSON(event.detail.xhr.responseText);
			if("some_var" in json) {
				// fetch a Nette Snippet
			}
		}
	});
});

In the response, you actually can render partials out that can be "injected" into different parts of the page. See this example to see what I mean. I typically do oob-swap for instance if I return a response of a table with a bunch of rows I'm updating, but I have a <div class="flash-message">Some message</div> that I wanted injected to show a flash message as well.

@xpavp03
Just a shameless plug, but have you tried Axette? It's a lightweight easy to install alternative for AJAX handling with no dependencies (so it works even without jQuery).

eydun commented

@matronator Axette is looking good. Could be nice, if it was possible to install it from Packagist/Composer.

@matronator Axette is looking good. Could be nice, if it was possible to install it from Packagist/Composer.

Thanks! I don't think that would be possible, as Axette is a JavaScript library and Composer is only for PHP as far as I know. I could theoretically create some proxy package in PHP that would automatically install Axette as part of its composer install workflow, but it would be difficult to determine where to install it as every project is different. Besides I don't think anyone does that and it would certainly be non-standard.

Sorry for going off-topic, just wanted to reply.

Although, why not use Axette as an inspiration for the "native" Nette AJAX library? It is lightweight with zero dependencies and has only the necessary features without extra bloat.