Okay folks, i just spent the weekend coding a vers...
# linking-together
e
Okay folks, i just spent the weekend coding a version of little kid's Lumberjack game that was programmed in React/Typescript (playable game at https://lumber-jack.netlify.com/). I did a high-fidelity clone of the React version in my Beads language, and published the results. The Beads version is here on GitHub (https://github.com/magicmouse/beads-examples/tree/master/Example%20-%20Lumberjack). Although the source code is comparable, the reduçtion in the number of source files from 13 to 1 is favorable, and the reduction of external API's referenced directly or indirectly from 1300 to 13 is 100:1 reduction in terms of dependencies. A big part of the problem with programming especially in the JS world is the horrible tangled web of interdependencies, which makes interchangeable parts impossible in the JS/framework space IMHO. If you have your own favorite language, why not try making the game yourself, the original React version has all the art and sound effect assets you would need already created. And if there are any lurkers on this group that would like to try Beads out please message me.
🍰 1
👏 3
c
this is pretty interesting!
to use these modules, it requires a mishmash of magical tags in the source code like , , , <>,
was there supposed to be more examples there?
the 1300 deps thing is a total non-issue to me but i’m a 15 year javascript dev and’ve been using node packages since before npm was even a thing. i can understand why others might get freaked out by that though! 🤣
y
I don’t think that the comparison of number of files is a good objective measure. Many folks won’t necessarily prefer one monolithic file over something split into sensible modules.
i
It's nice to do comparison demos.. but I think the whole React / npm ecosystem is a bloated, under-designed, incoherent mess, so this is a bit like shooting fish in a barrel. You don't need the machinery of React and its extensions to make something this simple — just use the dang DOM, people! On the other hand.. I loved getting to finally see some Beads code! Thanks for posting that, Edward. It reads a lot like a minimal whitespace language like CoffeeScript, which I'm very fond of. Do you have a link to any document that outlines the syntax, statements/operators, and other core language features?
w
I suspect most programmers would prefer the react version simply because it looks less foreign.. all other advantages will sadly be secondary
i
"Less foreign" is ambiguous — They'll prefer the React version specifically because it has cultural momentum behind it. Recall, when React first blew up and people were seeing JSX for the first time, they lost their damn minds. It took a good while, a lot of Medium post advocacy, and more than a few Pete Hunt talks for people to get used to it. The culture has proven itself capable of adopting new ideas about syntax. It just takes a force capable of moving cultural norms. Popular music is a great comparison to study, since there's a lot of big-money machinery designed to bend the norms to its whims (akin to Facebook/Instagram in the React case), but it can also be moved by outsider individuals in the right place at the right time.
w
Yes, new syntax can be adopted.. if other attributes are compelling enough. But you're starting one step behind. For every 1 story about new things being adopted you can probably find 100 being rejected.
🍰 1
g
i would definitely like to try Beads out—i’m camping until monday, though
e
In this particular example, of a program of only 750-1000 words, it is a hindrance to comprehension to split a task this small into 13 pieces. If you imagine a project times larger, 130 files would be very unwieldy. Of course there is a point at which one splits things into submodules, but having lots of teeny files is very much an obstacle to comprehension.
Wouter has a good point that almost all new things are rejected. I have long observed that inertia is the most powerful force in the universe. Although it is common and ordinary practice to build JS projects with hundreds of NPM modules included, it also means that the final product will be unstable, and that nobody will fully understand it from top to bottom. I am a purist and expect people to understand the programs they write in their entirety, with no fuzzy gaps in understanding, and so few dependencies that the program can last for 50 years without modification. If you depend on 100 NPM modules which are being mutated by other people, sooner or later a breaking change will occur, and then debugging that mess will be a nightmare. The young punks programming today assume that what they build is disposable, so in a rush to build people are, not realizing that software lasts in companies for decades. Robustness seems to be an unsought quality today. I find myself constantly annoyed by the huge numbers of bugs in production software. Just testing this tiny web app, I encountered an intermittent failure of Safari to load the JS file. You report the bug to Apple, and nothing happens. These large code bases are out of control. Even with tens of thousands of engineers they fall way behind.
👍 4
g
i really like the array squared notation for 2d arrays
what does al mean in the context of the source?
e
The term "al" is short for aliquots, which is a term from chemistry formulae where it refers to its proportional share of available space.
g
don’t understand how it works yet but really love the idea of proportional representation being first class
c
@Edward de Jong / Beads Project just a correction on the node modules, they’re not getting mutated by anybody, any mutation would mean a version change and your
yarn.lock
or
package-lock.json
file — depending on which package manager you’re using — will make sure that your project always contains the exact version of the modules you were working with initially unless you manually upgrade or update them
d
Unless they mutate the package but don’t bump the version number 😉. Or make a breaking change and only bump the patch or the minor number, or a bunch of other possibilities
i
It's also vastly more work to review the changes in versions of your dependencies (and their transitive dependencies) than it is to stay on top of changes in your (or your team's) own code. The culture of NPM (and rubygems, etc) is to just grab updates as they come out, to not review them (because if you're taking on hundreds of deps, and many hundreds or thousands of transitive deps, you clearly don't have the luxury of time), and trust that semver covers enough failure modes to make the risk worth it. Semver also doesn't, for example, cover the case of Angular 1 being largely abandoned by Google within a few years of its release in lieu of the totally redesigned Angular 2, requiring you to rewrite your app. Third party dependencies are by their very nature a Faustian bargain.
c
@Daniel Garcia it’s not possible to change the package without also changing the version. people can mess with minor and patch versions sure, but when you’re locked to a specific version it doesn’t matter to you
d
It’s possible on CI/CD environments, with every new build fetching the package version from
yarn.lock
, but the underline code being different in local/staging/production environments
👍 1
e
I don't understand how freezing to a particular version is that great of a solution. If there is a bug in the external code that gets fixed, in order to get that bug fix you are going to have to upgrade to probably the latest version which indeed might force some rewrite. And if the tree of dependencies is large, who decides when it is safe or wise to upgrade the lower modules? Doesn't this basically cause you out of caution to freeze all this code? We have this problem all the time at my firm, where we use Asterisk/FreePBX/OpenVZ open source stack, and unfortunately in the case of OpenVZ the bug fixes we would like to take advantage of, break the software for several thousand virtual machines, and would take a huge effort to make the transition. Same thing with updates to FreePBX, it breaks all sorts of plug-ins which customers are using, and we aren't even aware of which ones will be broken. So we typically don't upgrade because it is too dangerous. We only upgrade when we have to. Not a perfect solution because security fixes aren't getting incorporated, and we are under constant attack by hackers (50 million break-in attempts per data center per day). In my Beads language, i have adopted a principle for the external modules that they are encouraged to stay tiny and focused, avoiding the fan-out of dependencies which i think is a huge problem. In the lumberjack example program that i converted from React, the React yarn.lock file had over 1300 dependencies, and the lock file was 40 times larger than the program! Also, let's not forget that all this fan out is building cognitive load on what these modules do. To understand what the subsystems do you then have to learn the subsystems they use. I want to totally understand my program from end to end, and not have it recede into gray as it gets deeper. There is no reason why a simple program like the lumberjack game cannot be completely understood by the author. It is only 700 words of code, that is like a short newspaper story. Should be a piece of cake to comprehend that. I want robust software that is rock solid and without an ounce of fat.
🍰 2
c
@Daniel Garcia yah, reproducibility between platforms is an issue. something that runs on os x might be slightly different on linux or not run at all on windows
@Edward de Jong / Beads Project i’m not sure you’re making the differentiation between tooling and stuff that’s necessary to run the program here. they’ll all get jumped up in the
yarn.lock
file but in
package.json
you’ll see them separated between
dependencies
and
devDependencies
i
React has the same problem jQuery had — people only learn the wrapper tool, and don't learn the underlying primitives, so they're unable to tell when the primitives are actually much simpler. That's how you end up with Stack Overflow posts like "How do you add two numbers in jQuery?" In the case of this lumberjack game, React and its ecosystem are colossal overkill. If you're building Instagram or Facebook, you'll want some infrastructure akin to React or Polymer, sure. But in that case, you're better to do what Facebook and Google did, and just build your own frameworks that you own and control. And in the case of this game, just build it using plain HTML, CSS, JS. It'll be small, maintainable, accessible (in multiple senses), and it'll still be somewhat relevant as an example in five years.
There's so, so much post hoc rationalization of using these industrial scale tools like React at commercial or personal scale, probably because people have scale envy or tool obsession — I know I've got that, at least. Also, so much FUD about the complexity of JavaScript and CSS and HTML, a lot of promises made about React and post-css and tachyons and system-js and (.... yawn) simplifying that complexity. Those promises are kept, but only when you know the right cases for those tools — typically, global scale web apps made by teams of thousands of junior devs — which requires knowing what they do and what primitives they're built atop, which requires good engineering discipline.
Beads probably has a scale for which it's an appropriate choice of tool. For us to evaluate it fairly, @Edward de Jong / Beads Project, you should pit it against other examples of implementations using tools appropriate for that scale. The fact that someone else made the dumb decision to use React in this inappropriate way is not a compelling argument in favor of Beads. This game doesn't need 1300 transitive dependencies — that's a bad point of comparison. Beads seems really interesting, and I'd like to see it kick ass on a level playing field.
e
Ryan pointed out my ignorance of React. I suspect that the yarn file had more than just the transitive dependencies, it also carries the build toolchain which is also gigantic. I come from a commercial background where the companies i worked for strove to control every part of the codebase they could, not because they wanted to take care of more code, but because in a pinch they want to be able to fix anything. When you depend on some company, and they don't fix a showstopping bug quickly enough, you can get screwed royally. At least in the open source universe you have access to the code, and push comes to shove you can dive in to fix it. But to understand a system in its entirety, i think that most people agree that it is desirable to have as few dependencies as possible. The way people build libraries in the npm world tends to generate these giant balls of yarn, that are so vast as to be unknowable. i find a lot of people are using Meteor, Electron, React, Vue, etc., nowadays even for small projects. When you want to make something respond to screen resolution changes, regular CSS and JS are a disaster, because there is no arithmetic in CSS, and no IF statement to control layout in HTML. The #1 language stack (HTML/CSS/JS) used in the world today is really 3 incompatible languages rolled into one, where one can draw but not compute, and the other can style but has no IF statement, etc., is a bizarre historical artifact. The fact that these 3 languages don't agree on a line comment syntax is totally bizarre, and this crazy system cannot stand forever as the primary language; it is simply too mediocre a design to endure. Sure, it can proliferate like COBOL did, but who now starts a project in COBOL? nobody.
w
I'm working on the replacement of html/css/js.. it's called.. WebAssembly! (+WebGPU 🙂 And I'm only half kidding
👍 2
i
Yeah, I'm writing GLSL by hand right now (ugh) and thus I'm very eager to see WebGPU evolve. Hopefully they can come to some consensus around it, the way they did with WASM.
👍 1
j
@Wouter which half are you not kidding about?
w
@Ivan Reese WebGPU will likely be harder to program directly than WebGL+glsl.. it will also come with a shading language etc. But importantly it will be faster, so any friendly rendering library built on it will be better too
@jonathoda that it's a replacement for html/css/js.. it's of course not a straight replacement, because it is very different tech, and very different from working with the DOM, but plenty of webapps will be written this way. You'll have more choice of languages, more choice of how to render, and it will all be faster, so you can do more with it
j
@Wouter to supplant rendering to the DOM with html/css, we will need a rich UI framework with wide usage. Do you see anything emerging to fill that role?
w
with WebGPU, anyone can design one.. I don't see why it needs wide usage, as each project can pick one individually
if you look at games and apps like cad etc, there's a gazillion UI frameworks already
the big thing is that these will need to gain better text interop, like selection, copy paste, accessibility etc
the big thing is, just because the past looked like a DOM, doesn't mean the future needs to look like it. Maybe future web apps will be more like how games are made today? 🙂
we already went from web 1.0 (its a scrolling page of text) to 2.0 (looks more like a desktop app).. so who knows what web apps with this tech will look like
j
In my world, Flutter and SwiftUI are the most attractive future for UI. Would love to see a clone in WASM
w
if those are good UI designs, chances are, someone is going to end up making them for Wasm 🙂
since both of those are based on a particular programming language, those would first need a Wasm port
Swift is based on LLVM which comes with Wasm out of the box, so seems like an easy path to me
(I actually worked on the LLVM Wasm backend :)
y
@Ivan Reese “There’s so, so much post hoc rationalization of using these industrial scale tools like React at commercial or personal scale, probably because people have scale envy or tool obsession — I know I’ve got that, at least.” It makes total sense that people want to use industrial tools. When I switched from BASIC to C (an “industrial tool”) I programmed in C stuff that I could have had used BASIC for with more ease. Part of it is to learn the industrial tool, and part of it is because I’d rather even forget the limited tool if it may reduce my cognitive load which is already burdened with an abundance of stuff
👍 2
w
Still rocking jQuery over here for my light DOM manipulation needs.
❤️ 2
i
(Deleted some messages I wrote in a hurry while holding a baby. Decided they didn't add to the conversation.)
👍 1
❤️ 2
d
William: modern bowsers now support document.querySelector, which handles most of the basic stuff that JQuery used to be used for
w
@Dan Cook thanks, I am well aware. But it is good for a person to know about
querySelector
and
querySelectorAll
in case they're doing something especially light — don't want to have any external dependencies. Still I find jQuery's monadic semantics are just the right level of power/magic for me: better than iterating across a NodeList.
i
I wrote my own DOM manipulation library because I found my own sweet spot of concision, performance tricks, and abstraction. It's so short, and so stable, I often just copy-paste it into projects instead of pulling it down with yarn. It scratches a React-shaped itch with a JQuery-shaped stick, but I own that damn stick and nobody else is going to touch it. But that's besides the point. The point is — I want to see more of Beads, so I can learn what sort scratchers it features.
d
@Ivan Reese can I take a look at your DOM manipulation library? I’m more and more leaning towards minimalist dependencies and sounds exactly like something I’d like to give a try
g
same
d
same. Maybe you can put it on GitHub, even as just a code snippet?
i
@Daniel Garcia @Garth Goldwater @Dan Cook — It lives here: https://github.com/ivanreese/DOOM I just whipped up the README and don't know how helpful it is, so send me a DM here if you have questions. PRs welcome. The code isn't too thorny, but it was definitely written under the expectation that the only reader would be future me, haha.
👍 2
g
@Ivan Reese you have such an unusually clear style of writing what i’d consider fairly procedural code. really like the way your brain works
i
Haha, thanks!? I would not kiss my mother with that code. I'm much, much happier with how my module system micro-library reads (https://github.com/cdig/take-and-make), but that's just me. I find CoffeeScript to have the most readable syntax of any language I've worked with. I love it.
w
Of yeah, CoffeeScript! It was a nifty surface syntax, forgot about CoffeeScript.
😉 1
g
tried to make a PR to fix formatting on www.rust-lang.org. cloned the repo, ran cargo, 350+ deps, 7000+ files.
e
This kind of geometric explosion of dependencies is what makes the largest software we use so horribly complex and basically unmaintainable. I recently encountered an intermittent bug in Safari, where including a module in the current folder fails. It goes into Apple's bug database, and never gets fixed. I can imagine that Safari browser is the millions of lines of code. The problem is that massive redundancy occurs because programmers cannot connect interchangeable parts, but instead keep importing packages, which duplicate sub-functions over and over. I would wager that 90% of Safari is effectively duplicated code.
c
@Greg Jarmiolowski does it not just run
rustfmt
over everything?