Tuesday, May 9, 2017

Where has all the browser javascripting gone?

I guess it's time to admit I'm behind the times. I have little experience with many of the things I'm hearing the web-community talk about like it's something everyone is already using. Webpack, AMD, UMD, Flow, JsDoc, EsLint, Typings. I have some experience with node, but 99% of the code I write/have written is for the browser and blissfully ignorant of server-side JavaScript.

Individual parts of this I imagine I'd have no problem learning. It seems each one of them takes for granted that you already know or are willing to go learn the other system, and then not discuss how you would (as a beginner or intermediate to both systems) integrate them. Also, forget how you would use them on a path that doesn't perfectly match whatever path they choose for you to learn on, especially for any advanced usage.

Motivation

VsCode has a combination platter of lovely features/extensions to enable things like intellisense, auto-completion, and design-time error detection. However, what it seems I'm running into is they rely on using (non-AMD) module systems. I'm having code types/method thrashing in a live personal project (also a similar issue in a non-live non-personal project).

Solutions (from my Understanding/Attempts)

  • JsDoc
    • where it seems I have to redefine the same @typedef MyClass in each and every file rather than somehow referencing the source of an object's shape.
    • There doesn't appear to be anyway to get the annotations out of every file to centralize (which is of dubious benefit in many cases, unless it causes you to have to copy-paste your shape comments around to multiple files.
    • Some of it (no idea how much) isn't supported by VsCode
    • This is the documentation for a callback 
      • notice there is no example that doesn't involve using prototypes or resorting to classes?
      • I can find nothing that talks about a way to reference code in other files
  • Flow
    • all the documentation appears to say it always needs to be babel-ized to be in browser
    • running it, it complains like crazy about react 
      • I added it as a package, most likely to try to get flow or one of these other systems working
      • should the node react module be in the libs section of .flowconfig ?
      • when not in the libs section, and .*/node_modules/.* is in the ignore, it doesn't seem to care, still reports errors in node_modules/React/lib/ReactChildren.js
    • Whereas, I can use my jsx directly in browser via babel, I don't think I can do this with adding in flow-typing.
      • which means I don't have to figure out or take on learning Watcherify or something else to auto-magically detect changes and recompile on the fly.
    • aims at being an amazingly safe type system (vs TypeScript looking to strike a balance between safety and productivity) - see here
  • TypeScript 
    • I have no idea where to even start into this thing. It seems like a beast of changes to tackle to migrate anything into try it.
      • The examples demonstrate how to use either node or Visual Studio. I'm using (and loving) VsCode for all my JavaScript and some of my F#.
    • I suspect, were I to download the typings for react, my project (no TypeScript in it) would suddenly be able to design-time detect all kinds of problems.
    • I have no idea if I could write my own typings files for my non-JavaScript somewhere that would help anything. Furthermore, when I go look at something called DefinitelyTyped it looks like you have to do a lot of installations, and then elsewhere on the web, it's semi-deprecated since there is (or will be?) auto-discovery
  • React PropTypes
    • Everywhere it says move to an NPM package. no indications what to do if you don't develop your JavaScript in node. 
    • No sign, upon searching, of a CDN or other browser-capable file to help find method/object shape/type errors (which wouldn't happen until run time anyhow)
  • Fable - oh my beloved F# - produces so-so JavaScript, always bundled up in webpack that also doesn't seem to appreciate not having everything bundled into their own module system.
  • VsCode - oh so lovingly lightweight
    • doesn't support an unknown percentage of the JsDoc syntax
    • allows you to add ///<reference path="./x.extension"> but apparently only supports typescript files

This is at least partially a rant and venting

I have very little idea of what I'm talking about, having been stuck in a Wpf project for almost 2 years now. This is my way of categorizing and venting while trying to pick the flag back up. Also, a recounting of my experiences having been a cutting edge resource on near every coding-topic on every team I've ever been to now, feeling entirely lost trying to get a few features that seem almost entirely built-in to my IDE of choice for JavaScript. These are features I never even had a taste of before, and now it seems like I'm in instant withdrawals as soon as what I consider to be a near-critical feature is missing. (the features don't work if you aren't developing in node, aren't using webpack, are using AMD, etc..)

The topic

Very little of what I find that people recommend for usage explicitly appears to support JavaScript in browser. Node seems to have come up and choked out search results or the community or both from talking about in-browser or code that doesn't take a dependency in the entire codebase on a module system.