News for hackers. Stuff that matters.
Re:Can You Afford It? Real-World Web Performance Budgets by aaron-lebo on Saturday October 28, 2017 @01:50AM (#15574132)
How do you notify a user of errors in input without a complete page refresh if you do not use Javascript (ignoring the most basic HTML stuff)? Without at least some scripting capability, you're talking about making the experience worse for the user to the benefit (ease of the request/response model) of the developer.

Don't throw the baby out with the bathwater. It is the responsibility of devs to use technology well. You don't want all of this JS, but you do want some of it.

Too many people are making their assumptions about what is possible and what JS is capable of based upon views of web development that are 5-10 years out of date or based on bad software. Bad software is endemic to the industry, it's not representative of any single tech stack.

Re:Can You Afford It? Real-World Web Performance Budgets by ehnto on Saturday October 28, 2017 @04:17AM (#15574422)
You just let the page refresh. It's really not that much different. I am not saying don't use JS for UX improvements mind you. But your comment suggests that any other approach makes no sense. If you have a massive form that has 12 fields then it would be a huge help, but just a couple of text fields? Why replicate the backend validation in client side JS when it's already there on the backend? Then you would have to maintain two code pathways in two different languages in two different locations if you need to update the validation rules. Where simple works, pick simple.

5 years ago was 2013, there were some pretty great things going on in the web in 2013. Don't lose sight of lessons learned by previous work either. A new shiny framework doesn't automatically make it better practice.

While we are reinventing the wheel in client side JS we should make sure to remember that it has probably been done before, software has been around for decades, the web as well, and to think the best of it has only just happened in the last five years is a bit misguided.

Re:Can You Afford It? Real-World Web Performance Budgets by TeMPOraL on Saturday October 28, 2017 @07:18AM (#15574751)
This. You can't trust client-side validation anyway, so you need to have some server-side. So why not just let the page refresh, and then add a tiny bit of JavaScript that'll send off the form via AJAX to validation?

Suddenly, the site becomes solid, lightweight, and supports everyone. That's what I think people used to call "progressive enhancement".

Re:Can You Afford It? Real-World Web Performance Budgets by mrighele on Saturday October 28, 2017 @08:03AM (#15574865)
I would love to have a way to tell the browser "don't throw away the current DOM, Just apply the differences". It would work nicely in non-js page to make the experience smooth (and would probably work terribly if there was a lot of J's, of course)
Re:Can You Afford It? Real-World Web Performance Budgets by nojvek on Saturday October 28, 2017 @01:06PM (#15575811)
This. Every major client lib out there uses some variant of vdom. If this dom diffing was natively supported, browser would request with current dom hash and server could efficiently reply with a diff that both server and client can compute to be the same new hash.

If it's forms. Client calls server with base hash + changes made by client and server replies with. Base hash + new diff to apply. The new diff includes validation changes.

It's trees and diffs all the way down.

Re:Can You Afford It? Real-World Web Performance Budgets by pcmaffey on Saturday October 28, 2017 @01:10PM (#15575827)
This is exactly what React's virtual DOM does. Maybe the future is making the virtual DOM native to the browser?

Bundle React with Chrome? Or how about a browser package manager that could cache and reuse all these common js libraries used on so many sites?

Re:Can You Afford It? Real-World Web Performance Budgets by discreditable on Saturday October 28, 2017 @09:17PM (#15577567)
DecentralEyes does just that.
Re:Can You Afford It? Real-World Web Performance Budgets by grogs on Sunday October 29, 2017 @07:38PM (#15582192)
Sounds like PJAX.
Re:Can You Afford It? Real-World Web Performance Budgets by nawitus on Saturday October 28, 2017 @08:12AM (#15574889)
Page refresh takes a longer time than client-side validation.
Re:Can You Afford It? Real-World Web Performance Budgets by gjjrfcbugxbhf on Saturday October 28, 2017 @08:54AM (#15574994)
But you still need to do the server side valuation.
Re:Can You Afford It? Real-World Web Performance Budgets by Can_Not on Saturday October 28, 2017 @11:37AM (#15575458)
That doesn't detract from the value of client side validation, which is that it will be faster from the client's perspective and reduce server load.
Re:Can You Afford It? Real-World Web Performance Budgets by christophilus on Saturday October 28, 2017 @10:35AM (#15575258)
Yes, but from the end-user perspective, it's nice to not have to do a round-trip to find out that you entered something wrong.
Re:Can You Afford It? Real-World Web Performance Budgets by TeMPOraL on Sunday October 29, 2017 @07:03AM (#15578863)
Fair enough.

Still, validating a form client-side doesn't require a JavaScript framework; it would only require the server to send small snippets of JS for each field with the form.

Re:Can You Afford It? Real-World Web Performance Budgets by nawitus on Saturday October 28, 2017 @08:11AM (#15574888)
Needing a page refresh for input validation degrades experience.

"Then you would have to maintain two code pathways in two different languages in two different locations if you need to update the validation rules."

Not necessarily. You can use the same exact code, in the same location written in the same language.

Re:Can You Afford It? Real-World Web Performance Budgets by ehnto on Saturday October 28, 2017 @08:26AM (#15574925)
But by how much and does it actually matter? It's also a pretty small example. The problem of complexity outstripping benefits only grows the more you inspect the frontend landscape.

My main point is just that the implication that JS is required otherwise the UX will be unbearable is false. It's also really easy to mess up the UX with JS and I see it constantly. I would take a fast form post over a cumbersome JS powered experience any day.

Re:Can You Afford It? Real-World Web Performance Budgets by mattmanser on Saturday October 28, 2017 @05:38AM (#15574553)
Well, you don't need a SPA to do that at all. You don't have to do the validation client-side, you can still get the server to do it with some extremely simple javascript.

You can render server-side, then switch it to an ajax post in javascript. On submit, post the form back in ajax (a simple `.serialize()`) and if there's a validation error in the form, return the HTML form back in the response with the validation errors and replace it in the DOM.

Virtually instant feedback, no page reload, no 30 second initial SPA load.

In ASP.Net MVC, for example, this is as trivial as changing the `Layout` property of the page in the controller, the full layout for GETs, no layout in POSTs.

Technically you don't even have to support progressive enhancement, but it's so trivial in most frameworks you may as well.

I believe Rails has a built in turbo feature which essentially does this and more.

Example ts code, though usually put more in to disable double clicks and add a loading spinner:

    onSubmit = (e: JQueryEventObject) => {
        e.preventDefault();
        let $form = $(e.currentTarget);
        $.ajax({
            type: $form.attr("method"),
            url: $form.attr("action"),
            data: $form.serialize()
        })
        .done(() => {
            //do something
        })
        .fail((e) => {
            if (e.status == 400) {
                $(".js-form-wrapper").html(e.responseText);
                this.wireUpControls();
            } else {
                //handle error
            }
        })
    }
And wire it up on initialize with:

    $("#your-form").submit(this.onSubmit);
Re:Can You Afford It? Real-World Web Performance Budgets by nawitus on Saturday October 28, 2017 @08:10AM (#15574885)
The comment said "no Javascript", no "no SPA".
Re:Can You Afford It? Real-World Web Performance Budgets by jaggederest on Saturday October 28, 2017 @02:24AM (#15574200)
> How do you notify a user of errors in input without a complete page refresh if you do not use Javascript (ignoring the most basic HTML stuff)?

Well, it used to be that submitting a form and rendering errors on the server took the same ~100ms that evaluating a javascript framework validation does now, and so it was... not a problem.

If you mean "leaving aside the most trivial html stuff" to include things like html5 inputs, that's the most significant part of what Javascript provides in form validation.

Re:Can You Afford It? Real-World Web Performance Budgets by aaron-lebo on Saturday October 28, 2017 @02:33AM (#15574220)
You're glamorizing old web. Old web had the same quality issues, most form submissions were not taking 100 ms and JS validation does not (have to) take 100 ms today.

If you exaggerate the numbers, you can't make any useful comparisons.

Re:Can You Afford It? Real-World Web Performance Budgets by vecinu on Saturday October 28, 2017 @02:46AM (#15574242)
What about all of the information that was already in the submitted form?

We can now keep the user's state and inform them of errors in a way that is more difficult with server-ride rendering.

Re:Can You Afford It? Real-World Web Performance Budgets by bildung on Saturday October 28, 2017 @03:32AM (#15574334)
> What about all of the information that was already in the submitted form?

Of course the form gets returned from server validation will all user input prefilled? At least with Django that's the default behaviour.

Re:Can You Afford It? Real-World Web Performance Budgets by DCoder on Saturday October 28, 2017 @09:10AM (#15575029)
Does "all user input prefilled" include file uploads?
Re:Can You Afford It? Real-World Web Performance Budgets by hawski on Saturday October 28, 2017 @02:39PM (#15576183)
It's not complicated. Server could offer to use already uploaded file or selecting a new one. Identifying it with session cookie or some kind of file hash.