Pick my JavaScript libraries so I don't have to evaluate all my options?
August 4, 2019 4:21 PM   Subscribe

I've trying to write a simple web app, and utterly flummoxed by the array of options available for every step of it. It's as if modern web developers looked at Perl and said, "Hold my beer." Could someone read a quick description of my project and dictate to me which tools / frameworks / languages I should use? I'm happy to read tutorials and whatever for any of them, but the work of researching all of them is more than this project is worth.

I need to GET some JSON, combine the results in an utterly trivial way, and then display the results as a table. And for $reasons, this would be way better if I could host only static files and do all the code execution on the client side.

I think I need to pick one of each:

1. A language: ES6? Flow? TypeScript? Most of my experience has been in statically typed languages with type inference and parametric polymorphism.

2. A UI library: React? Angular? jQuery? I think I would prefer something that supports ES6 promises, as I'm used to promise-like abstractions in other languages.

3. A test framework: I'm not even going to enumerate them. They apparently publish a new popularity contest every year. For a small project like this, I'm most interested in end-to-end tests where I can mock out the JSON coming back from those few GET requests, and then diff the final table against some expected output.

I plan to write the (minimal) CSS by hand. Is that terribly short-sighted, or would it be fine to start?

In case setting up a dev environment is nontrivial, I'll mention that I use spacemacs on Debian.

posted by meaty shoe puppet to Technology (12 answers total) 7 users marked this as a favorite
I like TypeScript, although getting an initial configuration can be tricky. You can start with JavaScript and migrate later if you prefer, since JS is a subset of TS. (If you use JS figure out what ES6 features you need, but TS can transpile back to ES5)

jQuery is on the way out, but it's a simple way to hack up what you describe. You could also do everything in native JS.

Mocha is an adequate test framework for me. You can use npm.

You can code CSS by hand and use the browser dev tools to test things out.

I pretty much do the above and include .js files directly in my .html, no packaging tools or anything. Archaic but simple.
posted by RobotVoodooPower at 4:42 PM on August 4, 2019

ES6, underscore, React, Jasmine. Typescript if it floats your boat but not necessary if you don’t really care about type safety as it has a learning curve. (However everyone i know who works with Flow hates it).

Credentials — I manage a team of very opinionated and experienced software developers and this is their current stack of choice.
posted by cgg at 6:13 PM on August 4, 2019

This is one way:
1) Install Nodejs if you haven’t already
2) Install create react app by doing
npx create-react-app my-app
cd my-app
npm start
3) browse to http://localhost:3000/ to see what you just built.
4) run: ‘npm test’ to see the initial tests passing
5) edit the source or test code
6) go to 3)

This is probably the easiest way to get started, though it chooses your frameworks for you.
posted by forforf at 7:27 PM on August 4, 2019 [1 favorite]

You could forgo frameworks and check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
posted by czytm at 7:30 PM on August 4, 2019 [1 favorite]

I've trying to write a simple web app, and utterly flummoxed by the array of options available for every step of it.

I've been doing JavaScript web development since the 90s, and wanted to commiserate with you here; these days, everything is about frameworks and build tools and abstractions that make the simplest things seem daunting

As you dig into this, remember that all of these complicated things are intended to solve specific problems.

If you have the time and inclination, start by attempting to do what you want to do using vanilla ES5 JavaScript in a static file. Then, if/as you encounter a thing you think should be easier (making async API calls, writing tests, managing the view) explore options to deal with that one thing, and pick the one that works best for you (which usually means the one whose documentation you can find and understand, and use without adding unreasonable project dependencies.)

I suspect as you do this, you will find there are ES6 features that would make your life easier, and then you might want something like transpiling and polyfills that will translate your ES6 to run in older browsers, and then you discover Webpack can manage your transpiling and polyfills, and...you get the idea.

In short: don't go looking for a huge collection of tools to solve problems you don't have yet. Solve it in simple static vanilla ES5 JavaScript first, then let your inconveniences and annoyances drive you towards tools to ease that burden.
posted by davejay at 9:26 PM on August 4, 2019 [11 favorites]

Oh, and one further piece of advice: you're trying to write something simple here. Adding type checking with Flow is probably overkill if you already have the discipline to manage strict typing (most JavaScript-trained programmers in my experience do not, which is why Flow is useful to catch those mistakes) and why would you burden such a simple app with TypeScript, which adds the need for package management and compiling?
posted by davejay at 9:33 PM on August 4, 2019 [2 favorites]

Yeah, if you're sure that you don't need anything more than what you've specified, especially if the code doesn't need to be obfuscated, then a static ES6 file with jQuery is probably fine, and conceptually the simplest if you're familiar with the HTML DOM. But if the functionality could expand in the future, I'd start with a more modern framework. (As someone familiar with C# and functional languages, writing ES6 is a far more pleasant experience than ES5, and TypeScript is even better.)
posted by serathen at 5:21 AM on August 5, 2019

For purposes this simple, I would just use jQuery. It's kinda old and fashionable, yeah – but it's also the simplest way to accomplish what you want to do. You definitely don't need a framework like React or Angular, and you don't need testing frameworks and build tools (unless you really want them for some reason).

You could also consider just writing it in plain old ES6, without using any libraries. Google up a decent cross-browser function to handle the XHR request. And be prepared to write some (slightly) more verbose code to assemble the actual table rows – manipulating the DOM using native methods, such as createElement(), is wordier than using jQuery. The advantage to this approach is that browsers won't have to download a copy of jQuery, so your page weight will be slightly reduced.

This is one of the simplest things you can possibly do in JavaScript. Don't overcomplicate it.
posted by escape from the potato planet at 10:10 AM on August 5, 2019

This is just about as simple as a web application can be, and I cautiously third or nth doing this in library-free ES6, with jQuery if you are worried about supporting older or weirder browsers. Even the XHR can be done easily with the fetch protocol in modern browsers, and it's especially worth learning the ES6 DOM manipulation rather than leaning on jQuery. It's fine to write the CSS by hand, and any test framework will do.
posted by Kwine at 12:25 PM on August 5, 2019

I like the "This is simple" pattern. Let's stay with it!

You can totally do this in "vanilla" JS - just the tools that the browser gives you. So, no need for larger frameworks like React/Vue/Angular. You can choose to use jQuery to help you, or not. It's not actually "on the way out", but it's a little out of favor for new projects because it's not compatible with the way the big frameworks do things.

One thing you need to look at: What's your audience? You can use most ES6 if everyone is on a recent browser. If you're supporting older browsers like IE11 or so, then you're probably best off sticking with ES5 as your limit.

For your get request - I like axios (https://github.com/axios/axios). All it does is talk to the server, and return you an A+ Promise. If you're using jQuery, it's ajax functionality will do the same thing.

Personally, I've found Jest (https://jestjs.io/) to be the best of breed for testing in JS.

Writing plain old CSS is just fine. I wouldn't mess with any of the frameworks (especially avoid Bootstrap), nor would I bother with a transpiled CSS meta-language like LESS or SASS. Keep it simple. :)

You don't even really need a "dev environment". Just js2-mode and css-mode, and you're good.
posted by Citrus at 12:53 PM on August 5, 2019

Is this going to be the basis for future work? Do you imagine that you'll be doing more work in this space and therefore benefit from learning more frameworky stuff? Or is this just a one-off that you want done and out of the way with a minimum of fuss?

If you just want to be done, I'd Nth the advice for vanilla ES6 (or ES5 with polyfills depending on browser matrix), plain HTML with HTML templates, and plain CSS. I'd regard this as adequate for a simple client-rendered table with minimal interactivity.

If you know in advance that this will seed into something bigger and that you'll need to have multiple engineers working on this or that you'll want to leverage a lot of external code or UI toolkits, I'd look into React and TypeScript. Using create-react-app is a great way to bootstrap all of this, as it starts you off with a pretty well-regarded set of frameworks and sets up basic development and testing workflows for you. This may even be quicker than starting with vanilla JS development, but at the expense of greater up-front complexity, not all of which is abstracted away from you.

Jest is the testing framework I use at work. It seems fine, but I haven't explored other options in any depth.
posted by Aleyn at 3:51 PM on August 5, 2019

if you already have the discipline to manage strict typing

This is hilarious, because I've worked in dynamically typed languages like Python, Lisp, and bash, and I would have said that I prefer static typing because I'm not careful and attentive enough to get it right without the compiler's help.

Despite the overall trend in this thread, I'm leaning toward create-react-app as a way to get all the build, test, and UI tooling I'm used to having. And React's virtual DOM abstraction sounds so much more beginner-friendly than trying to mutate the DOM explicitly.

The goal is just to get this one tool working. I get paid to teach, not to automate lesson plan analysis.
posted by meaty shoe puppet at 9:30 PM on August 5, 2019

« Older Light Skin "Strips" at Base of Nail   |   This is a question about bidets... Newer »

You are not logged in, either login or create an account to post comments