babili VS jazelle

The key is that the scoping happens for each iteration, not around the entire loop. That detail is nonobvious, given how many other languages have gotten it wrong, but I wouldn’t say it’s wild.

(If you’re curious how Babel deals with the more complicated cases of continue, break, labelled break, and return, try it out at https://babeljs.io/repl.)

I used https://babeljs.io/repl to know the size after the code has been transpiled.

You must have a basic understanding of JavaScript and be familiar with some of the features of ES6, the most recent version of JavaScript, to follow this tutorial. More information is available here if you’re unfamiliar with ES6. If you are more familiar with the older version of JavaScript, you might find the babel REPL more helpful to see how ES6 code is translated.

The JSX code is far easy to understand, but React, ReactDOM, or browser does not understand it. Babel comes into picture to translate JSX code to equivalent React code.

If we copy and paste the code in a Babel repl editor, we will get the equivalent React elements that we used earlier:

In your node project, add Babel and Webpack. They can “transpile “ your JSX code to browser compatible code. You can try it out here

If your project uses a bundler like webpack or rollup, then you can use the nullish coalescing operator in your code. But if you are using a browser, then you should use a transpiler like babel to transpile your code to ES5. You can use babel repl to transpile your code.

The Babel REPL is an easy way to see what the transpiled output looks like.

babel has an online playground

But we also have teams working full time on monorepo stuff. I wrote tooling myself to bridge some of the gaps in the web ecosystem (e.g. we integrate w/ bazel to compute build graphs), but one still needs to integrate that w/ CI. Our solution uses dynamic pipeline generation, spot instances for elastic compute power, a bunch of crazy optimizations, a test flakiness detection system, a merge queue system (because we have hundreds of commits landing daily and HEAD must be green at all times)... A lot of this has no turn-key open source / commercial offerings and you're gonna need to invest time into integrations w/ the ones that do. Monorepos can be quite a commitment.

Yes, it's possible. At Uber we run a 1000+ package monorepo w/ Bazel and Yarn. Someone else mentioned rules_nodejs if you want to go with the popular option that is more or less in line with the Bazel philosophy[0]. We use a project called jazelle[1] that makes some different trade-offs that lets us do some interesting things like not busting the whole world's cache when lockfile changes, and source code generation (including automatic syncing of BUILD files to package.json)

[0] https://news.ycombinator.com/item?id=30959893

[1] https://github.com/uber-web/jazelle

I maintain the web monorepo at Uber (a fairly large codebase w/ ~1000 packages). Our monorepo uses a tool I wrote called jazelle that wraps over yarn workspaces and bazel.

3) Yes, you can have granular smart tests. Again, tooling can help. We use Bazel (I wrote a JS-oriented wrapper on top of it called jazelle), which can compute dependency graphs and only test things that changed. For example, with my tool, you can have a master job call jazelle changes to figure out what projects need to be checked given a git diff, and then we distribute the workload across multiple machines to parallelize tests/lint/bundle size analysis/etc (we can do a full run of several thousand compute hours for ~1000 packages in about 20 wall clock minutes). Other similar tools exist for dep graph computation, e.g. turborepo, and to some extent Rush and yarn workspaces + foreach, which might be sufficient for your scale.

Nice write-up. I have explored different repo strategies quite a bit myself in the course of a few efforts that I've been involved with. On one, we originally had a monolythic framework and everything the article said about cons is pretty spot on. However, I'll qualify by saying that I think the problems come less because of the nature of monolyths in general and more because of lack of experience with modular design.

We then wrote a new framework using a monorepo approach, with separate packages using Lerna. The problem here was tooling. Dependent builds were not supported and I've had to delete node_modules more times than I'd ever cared to count. The article talks about some github specific problems (namely, the issues list being a hodge-podge of every disparate package). We tried zenhub, it works ok, but it's a hack and it kinda shows. I've seen other projects organize things via tags. Ultimately it comes down to what the team is willing to put up with.

We eventually broke the monorepo out into multi-repos, and while that solved the problem of managing issues, now the problem was that publishing packages + cross-package dependencies meant that development was slower (especially with code reviews, blocking CI tests, etc).

Back to a monorepo using Rush.js (and later Bazel). Rush had similar limitations as Lerna (in particular, no support for dependent tests) and we ditched it soon afterwards. Bazel has a lot of features, but it takes some investment to get the most out of it. I wrote a tool to wrap over it[0] and setup things to meet our requirements.

We tried the "multi-monorepo" approach at one point (really, this is just git submodules), and didn't get very good results. The commands that you need to run are draconian and having to remember to sync things manually all the time is prone to errors. What's worse is that since you're dealing with physically separate repos, you're back to not having good ways to do atomic integration tests across package boundaries. To be fair, I've seen projects use the submodules approach[1] and it could work depending on how stable your APIs are, but for corporate requirements, where things are always in flux, it didn't work out well.

Which brings me to another effort I was involved with more recently: moving all our multi-repo services into a monorepo. The main rationale here is somewhat related to another reason submodules don't really fly: there's a ton of packages being, a lot of stakeholders with various degrees of commit frequency, and reconciling security updates with version drift is a b*tch.

For this effort we also invested into using Bazel. One of the strengths of this tool is how you can specify dependent tasks, for example "if I touch X file, only run the tests that are relevant". This is a big deal, because at 600+ packages, a full CI run consumes dozens of hours worth of compute time. The problem with monorepos comes largely from the sheer scale: bumping something to the next major version requires codemods, and there's always someone doing some crazy thing you never anticipated.

With that said, monorepos are not a panacea. A project from a sibling team is a components library and it uses a single repo approach. This means a single version to manage for the entire set of components. You may object that things are getting bumped even when they don't need to, but it turns out this is actually very well received by consumers, because it's far easier to upgrade than having to figure out the changelog of dozens of separate packages.

I used a single repo monolyth-but-actually-modular setup for my OSS project[2] and that has worked well for me, for similar reasons: people appreciate curation, and since we want to avoid willy-nilly breaking changes, a single all-emcompassing version scheme encourages development to work towards stability rather than features-for-features-sake.

My takeaway is that multi-repos cause a lot of headaches both for framework authorship and for service development, that single repos can be a great poor-mans choice for framework authors, and monorepos - with the appropriate amount of investment in tooling - have good multiplicative potential for complex project clusters. YMMV.

[0] https://github.com/uber-web/jazelle

[1] https://github.com/sebbekarlsson/fjb/tree/master/external

[2] https://mithril.js.org/

Bazel is still our bread and butter at Uber. Nothing in the JS space comes close in terms of features. I wrote a tool that wraps over it called jazelle

Oh sorry, we just moved it here https://github.com/uber-web/jazelle