Making the Web Simple



  • So, due to reasons, our nightmare project ended recently.

    Before anything serious starts up again, my team is being given a chance to pitch an idea, and if it goes well, we can keep working on it.

    As part of that, we have a web component we'll need to construct. For several reasons, I am thinking that we should start it with ASP.NET Core 2 (partly in case our company does something drastic to Azure).

    If this piece successfully gains customers, we expect most of them will have poor internet connections, so I want to do something unthinkable in the modern web: a minimal javascript payload!

    Things I don't want anyone to have to think about on my team: NPM and Node.js.

    So, given the above, and the fact that this site will mostly involve a user filling in forms, what libraries should I use? I used Knockout a few years back, and enjoyed how simple it was. Obviously, because it was something written in javascript over three years ago, most likely no one uses it anymore.


  • SockDev

    @magus said in Making the Web Simple:

    So, given the above, and the fact that this site will mostly involve a user filling in forms, what libraries should I use? I used Knockout a few years back, and enjoyed how simple it was. Obviously, because it was something written in javascript over three years ago, most likely no one uses it anymore.

    First, I'd work out whether you even need a library. If it's just going to be users filling out forms, it may be better to just roll your own JS for the stuff you need, rather than pull in a full library or framework and only use 5% of it.



  • @raceprouk That makes sense. I just know a bit of interactivity (some client-side validation, for example) and preferably automatic data binding would go a long way. But yeah, we only really need js for things it was designed for.



  • @magus said in Making the Web Simple:

    So, given the above, and the fact that this site will mostly involve a user filling in forms, what libraries should I use?

    Sounds like an excellent usecase for vanilla.js.



  • @magus said in Making the Web Simple:

    some client-side validation, for example

    Can be as simple as

    onsubmit="if( !/^[0-9]{6,}$/.test(this.some_number.value) ) { alert('Invalid some_number'); return false; }"


  • SockDev

    @magus said in Making the Web Simple:

    automatic data binding

    Since you're using ASP.NET, you can use MVC, which has the binding on the server side rather than on the client.

    @magus said in Making the Web Simple:

    I just know a bit of interactivity (some client-side validation, for example)

    If it's just basic validation, you can probably roll your own. If you want something a bit fancier though, then jQuery and the Validation plugin could work well. With that, you can set it up in unobtrusive mode to get more responsive and immediate validation.


  • BINNED

    @magus said in Making the Web Simple:

    some client-side validation, for example

    JqueryVal does that OK. No idea how big a payload it is

    But apart from that, another vote here for just rolling your own. It might look a bit less flashy than whatever this week's framework of choice is, but if usability on low bandwidth is more important than modern looking UI then don't bother with frameworks


  • And then the murders began.

    I've normally stuck to the JQuery-based unobtrusive validation that MS sticks in the project templates for MVC 5.

    I don't know if the MVC Core templates already have that in it or not; but if they don't, this looks like a decent tutorial waking through setting it up: https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation


  • SockDev

    @jaloopa said in Making the Web Simple:

    @magus said in Making the Web Simple:

    some client-side validation, for example

    JqueryVal does that OK. No idea how big a payload it is

    Under 23kB when minified. Which isn't too bad, really.



  • Two points:

    1. SPAs can take less overall bandwidth if written correctly. (That was actually part of the initial pitch for the concept.)
    2. Why do you need to use a framework at all for filling forms? It's pretty trivial to write a couple quick JS functions to validate fields in real time, and assuming your HTML isn't a mess, the browser takes care of all the other affordances automatically.


  • @blakeyrat said in Making the Web Simple:

    Two points:

    1. SPAs can take less overall bandwidth if written correctly. (That was actually part of the initial pitch for the concept.)
    2. Why do you need to use a framework at all for filling forms? It's pretty trivial to write a couple quick JS functions to validate fields in real time, and assuming your HTML isn't a mess, the browser takes care of all the other affordances automatically.

    <a href="#" onclick="document.location='www.example.com/nextpage.html'">Click here to go to next page</a>

    Rivaled by:

    <form >
       <input type='submit' value='Submit' onclick='javascript:submit();return false;' />
    </form>
    <script type='text/javascript'>
       function submit()
       {
          document.forms[0].target="http://example.com/submit.php";
          document.forms[0].submit();
       }
    </script>
    


  • @lorne-kates ... not sure what you're trying to communicate?

    But keep in mind, if it's a SPA (and by the way, note that you don't need huge bloated JavaScript frameworks to make a SPA, you can do it in less than 10k of script) the concept of a "page" is virtual. So you could split your form in as many steps you want, saving the progress in browser LocalStorage, and submit it all in one big go at the end.

    If you have an account/login system, then yes it would be ideal to store half-completed forms on the server so the user could resume them from any location.



  • @blakeyrat said in Making the Web Simple:

    @lorne-kates ... not sure what you're trying to communicate?

    But keep in mind, if it's a SPA (and by the way, note that you don't need huge bloated JavaScript frameworks to make a SPA, you can do it in less than 10k of script) the concept of a "page" is virtual. So you could split your form in as many steps you want, saving the progress in browser LocalStorage, and submit it all in one big go at the end.

    If you have an account/login system, then yes it would be ideal to store half-completed forms on the server so the user could resume them from any location.

    Yup! and without much additional script async loading can be big boost [as can background submission of partials - as you mention]



  • @thecpuwizard said in Making the Web Simple:

    Yup! and without much additional script async loading can be big boost [as can background submission of partials - as you mention]

    Mods: can we edit the title to put sarcastic air quotes around the word "simple" plz?



  • @lorne-kates said in Making the Web Simple:

    can we edit the title to put sarcastic air quotes around the word "simple" plz?

    Wow (the following is overly trivialized to show minimal, a few more lines should be included for error handling...)

    <script src="demo_async.js" async></script>

    Then in the .js file....

    function demo_async() {
    ย ย document.getElementById("content").innerHTML='<object type="text/html" data="demo.html" ></object>';
    }



  • Okay, yeah, ASP.NET Core 2's MVC template is super slick. It'll make a whole form from a model for you automatically. Seriously, the last year or so on this project had me believing everything to do with the web was horrible and hard.

    Our IT blocks Docker things, so I can't earn bonus points for containerizing the whole thing, but that'll change soon most likely. Just doing basic web things and having them just... work feels really good.



  • Why would you need Docker if you're building a simple web app to fill out forms? That's something which anyone should be able to deploy using xcopy.


  • โ™ฟ

    @magus said in Making the Web Simple:

    some client-side validation, for example

    If your validation falls into categories like "email address" or "date" or "string that matches this regular expression" or "this field is required", just use HTML5. No need for any scripting at all.


  • โ™ฟ

    @pleegwat said in Making the Web Simple:

    @magus said in Making the Web Simple:

    some client-side validation, for example

    Can be as simple as

    onsubmit="if( !/^[0-9]{6,}$/.test(this.some_number.value) ) { alert('Invalid some_number'); return false; }"

    EW NO

    <input type="text" required pattern="^[0-9]{6,}$" inputmode="numeric" name="some_number">
    


  • @alexmedia Consistency is the only thing I can think of. It's harder to mess up.


  • โ™ฟ

    @magus said in Making the Web Simple:

    Our IT blocks Docker things

    Blocks as in the Docker hub is not accessible or blocks as in they won't allow you to use Docker at all?

    Because I may be able to help with the former.



  • @ben_lubar When docker launches a windows container (We're stuffing a legacy windows app in one), it throws a bunch of files around in ProgramData/docker, and then complains that some of those files are in use and dies.

    Alternatively, I could try using a Linux container for my thing, but that complains that I need Volume Sharing active, which gives me a firewall issue when I try to activate it.

    They've really got us locked down. Some people seem to be able to get it to work here, but only like two.


  • โ™ฟ

    @magus are you allowed to run a VM?



  • @pleegwat said in Making the Web Simple:

    @magus said in Making the Web Simple:

    So, given the above, and the fact that this site will mostly involve a user filling in forms, what libraries should I use?

    Sounds like an excellent usecase for vanilla.js.

    0/10, broken link.



  • @ben_lubar said in Making the Web Simple:

    @pleegwat said in Making the Web Simple:

    @magus said in Making the Web Simple:

    some client-side validation, for example

    Can be as simple as

    onsubmit="if( !/^[0-9]{6,}$/.test(this.some_number.value) ) { alert('Invalid some_number'); return false; }"

    EW NO

    <input type="text" required pattern="^[0-9]{6,}$" inputmode="numeric" name="some_number">
    

    Hm, I didn't know that one. Thanks.


  • Impossible Mission Players - A

    @pleegwat said in Making the Web Simple:

    @ben_lubar said in Making the Web Simple:

    @pleegwat said in Making the Web Simple:

    @magus said in Making the Web Simple:

    some client-side validation, for example

    Can be as simple as

    onsubmit="if( !/^[0-9]{6,}$/.test(this.some_number.value) ) { alert('Invalid some_number'); return false; }"

    EW NO

    <input type="text" required pattern="^[0-9]{6,}$" inputmode="numeric" name="some_number">
    

    Hm, I didn't know that one. Thanks.

    I think it's new to HTML5, yeh?


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.