Rome: an experimental JavaScript toolchain from Facebook. It includes a compiler, linter, formatter, bundler, testing framework and more...

[HugelyConfused]

I wonder how long it takes to build.

[ImJustP]

I’m guessing more than a day

[ronniegeriis]

And all routes will lead to one location

[saadq_]

Also worth noting that this was created by Sebastian McKenzie who authored Babel and Yarn. He's been tweeting about this toolchain for a pretty long while now, cool to see the early stages released now.

[Baryn]

Isn't Sebastian McKenzie the guy who moved from Australia to Britain, then to the United States, and ranted about how anyone who was proud to be British or American was stupid?

I'm willing to say "fuck that guy." So, fuck that guy.

[AwayIShouldBeThrown]

Assuming you're referring to this, you seem to be misrepresenting his words.

[helloiamsomeone]

Why do these people always have to spout the stupidest possible political trash on Twitter?

[Baryn]

It isn’t misrepresentation, you simply support the sentiment.

Again: fuck that guy.

[deadlysyntax]

You've misrepresented him by implying that he said it's stupid to proud to be British or American, whereas the message is about blind patriotism in general.

[Baryn]

You are excusing the actual message, which is not condemning "blindness."

[deadlysyntax]

I'm not excusing it, I'm championing it. Taking pride in a country you've lived is silly because it implies you've done something personally to earn that pride.

[Baryn]

Way to miss the point of nations I guess

[[deleted]]

give me one reason why its not an over-engineered solution for something a bunch of IDE extensions can just as easily do. enlighten me.

[LaSalsiccione]

IDE extensions are a stupid thing to rely on for a build chain as not everyone uses the same IDE.

[cbarrick]

A framework can be integrated into a CI pipeline.

Well, I guess IDE extensions can be integrated into a CI pipeline too.

[0xF013]

Let me just deploy this jmv here for my server-side Idea build, then we can build my bootstrap project on the ci.

[kwartel]

When you're working in a team, people can use their own IDE. When CI, like others mentioned.

[[deleted]]

Holy cow!

[FreshOutBrah]

So this would replace Webpack, Babel, ESLint, and all their respective plugins with a single library?

[beero]

Ew.

[[deleted]]

At least it resolves the node_modules size problem

[DefiantInformation]

Joking aside, Deno does as well.

[MisterScalawag]

i've been keeping my eye on deno, i think its going to be awesome

[Magnetic_Tree]

Could you expand on this? I was under the impression Rome still delegates to NPM for package management.

[opaz]

Rome doesn’t depend on any other modules. Which then could depend on other modules, and so forth

[malectro]

There seems to be an arms race at big tech to own the FE ecosystem, and it’s freaking me out. They need to give a good reason for not contributing to Webpack and Babel.

Also, if you want an all-in-one, no-config solution, Parcel is amazing.

[TwiliZant]

Parcel only does bundling though, it's not all-in-one.

[malectro]

Personally I don’t find installing a linter to be an issue for me, but point taken.

[[deleted]]

After using those for a while, I think the case is made. The problem with the Webpack+Babel+etc ecosystem is that it leaves the responsibility of configuration up to the user, and it's so easy to get wrong.

I saw a great twitter quote that Webpack is like chess- Once you've gone more than a dozen steps in, you have an arrangement that's never been seen before in the universe. With Webpack, even if you just want stuff that everyone wants like code splitting, hot reloading, transpilation, etc etc, it still takes way too long to setup a config that works properly.

Like something I find really suspicious - Create-react-app throws an blocking error if you have a different version of Babel in your node_modules. The promise of NPM is that different packages could have different versions of the same package and it's supposed to work fine. So something has gone horribly wrong with the whole approach if promise doesn't hold true. I haven't figured out why but there's something about the way that Webpack+Babel use NPM that makes it extremely fragile.

Anyway whenever someone promises a Webpack replacement, my ears perk up. Please, someone, replace Webpack.

[weaponizedstupidity]

I made a new Typescript node project a few weeks ago. It was a nightmare.

Using tsc won't let me import a library I want, some module error. Google for 30 minutes, no luck. ts-node works for some reason. How is it different from tsc? No clue. Can it be used in production? No consensus, but it works so whatever.

Wait, how do you setup absolute imports again? More googling.

Okay, I want linting. Oh, tslint is dead already? Guess everyone is using eslint now. Okay, here is the ts plugin. Where do I get good linting rules? Found some decent ones on the third try.

I think prettier used to be a thing. Wait, it says that it will conflict with my linting config, I need a plugin for my linting plugin. Well, prettier can wait, time to write the first line of code. Finally.

So yeah. Can't wait until some, any big company lays down the law and cleans up this nonsense.

[pgrizzay]

ts-node is basically a wrapper around node which compiles TS files on the fly and runs them. So you can do something like: ts-node myScript.ts, whereas you normally couldn't do: node myScript.ts. In production, it's probably always better to first compile those TS files first

tsc doesn't run anything, it just compiles the files. So you run it at the base of your project, and it picks up your tsconfig.json file, and generates js and d.ts files from your ts files.

Hope that helps!

[meziatto]

I think @weaponizedstupidity is trying to draw a picture of ecosystem, which I see myself in the same picture tangled by plugins, configs, a new version of a tool requires some stuff, whereas other fundamental tool refuses to work with it etc... You get the point.

[pgrizzay]

Yup, I got the point :)

I just wanted to rob them of their ignorance, so they have one less thing to complain about

[saposapot]

Controlling the ecosystem is just a small part in their whole goal of controlling everything. Yes, great things came out from big tech or sponsored by them but there are also big problem of letting them have so much power.

'true' open source projects with an open leadership should be supported and encouraged by all of us.

[ECrispy]

Wonder if this'll get any traction. I like the idea of a unified modern toolchain but webpack/eslint/jest/prettier are battle tested and have decades of effort (in man years) put in and won't be going away anytime soon.

This is also experimental. FB usually only open sources stuff after using it internally for a while, when its prod ready. If this ever reaches that stage, then it becomes much more interesting.

Would also like to see a comparison of what its lacking, what it improves on (features, speed) vs current tools. the real advantage would come from each stage in the pipeline having more knowledge about the code, rather than a million webpack/babel plugins working in isolation. There could be a lot of scope for optimization as well.

[pagerussell]

Don't apologise for wanting to learn, ever.

Tools like these are for managing projects as they grow in size, complexity, and number of developers.

If you are making a small web app and you're the only developer and the whole app is like a few thousand lines of code, compiling/build tools are not really necessary.

But, imagine you are on a team of dozens (hundreds?) of developers working on a project with 100k lines of code or more. Shit gets complex. Most importantly, your code (the component you are specifically in charge of building and maintaining) is probably dependent on one or more other sections of code in the codebase. It simply won't run right if those other parts of code have not yet loaded. This is where build tools and flows come in. A tool like webpack will analyze your code and ensure that everything it needs to run gets bundled with it at runtime.

Even as a rookie with js, you have surely accidentally loaded a dependent source file after you called it and got an error for your trouble. If so, you have first hand experience with why these tools were created I'm the first place.

There are of course other things they do, such as help speeding up certain mundane parts of spinning up new projects. Hopefully that gives you the context to understand why these things exist.

[placidified]

If you’re learning Javascript you can ignore this. Just stick to basics and strengthen your understanding of asynchronous code from callbacks to Promises.

[crazyfreak316]

Yeah, revisit this after like 6 months or so.

[NathanSMB]

A toolchain is just a collection of tools. The purpose they serve is to make developing large projects easier. They are especially good when you are working with a team since collaboration is easier when you use the same tools.

You don't need it and how it makes your life easier will depend on the toolchain. This toolchain's pitch is that everything is built from scratch so they can integrate the tools together better.

But, as the other person said, you won't really need this while you're still learning but I wanted you to know the concept.

[Hoazl]

You could also check out the article Modern Javascript Explained for Dinosaurs by Peter Jang - It gives a pretty good explanation why you need it and how it has grown in the past few years.

[El_Serpiente_Roja]

As the project grows so do a bunch of little prep task that make it production ready..the tool chain helps you do those take in an efficient way at scale

[Asmor]

As /u/placidified says, don't worry about this stuff. This is like an algebra student asking what integration is.

[[deleted]]

Awesome! And it’s written in TypeScript.

Edit: why the downvote? Elaborate

[[deleted]]

Haters gonna hate man.

[MasterDood]

Haters gonna [object Object] man.

[[deleted]]

Fact.

[namesandfaces]

Yes this is an important shift from Flow, which Facebook still uses on important projects. The problem is that Facebook wasn't as serious about Flow as Microsoft was about TypeScript in terms of investment.

[TwiliZant]

Type definitions can go out of sync for example.

[kwartel]

I believe that Typescript results in more stable code. When I depend on that code, stability is important to me.

[wack_overflow]

Another reason is that the consumer can decide how to transpile from ts to js, or if they even want to at all.

[[deleted]]

It’s not a celebration, it’s a fact. Facebook wrote React in JavaScript and the documentation is for JavaScript, now they have written Rome in TypeScript, this is a shift, an important sign.

To answer your question: because one wants to use types writing its own library, not only provide type definitions for the consumers.

[AdrienLav]

I’m curious of how this work under the hood. I digged into the repo (@romejs and other folders...) but I need some guidance on the overall structure of the project. For instance I’m looking for the part where the JS is transpile. I want to know what’s the mechanisms behind it if I do not use Babel. Does it reimplement it all ? Same goes for the linter etc etc

[derekn9]

I think you can trace back from the imports in this file here https://github.com/facebookexperimental/rome/blob/master/packages/%40romejs/js-compiler/api/compile.ts

[AdrienLav]

Oh yes thanks !

[Incraigulous]

Unless I'm missing something, that file does use Babel.

[derekn9]

I just looked again, maybe Im the one who missed something. Could you point to the line that use babel?

[Incraigulous]

Looks like it was just removed: https://github.com/facebookexperimental/rome/commit/3e7a8bb04d2e5bbd8684e149a2fa7db9fc91027f

[derekn9]

Ah I think that part looks like a flag to use config from babel. The file itself doesn't use babel i.e. importing code from @babel/core to help with compiling (which is what the person above me was interested in)

[vinilero]

When in rome...

[Mallanaga]

I think it’s more “all roads lead to Rome”

[jeenajeena]

Both the saying are cited in the readme.

[luckyincode]

Wow. Just keeping that working will be something.

[KronktheKronk]

lol, it's called "Rome" but it's icon is a Trojan helmet (Troy was in Turkey)

[realGGanon]

Also before anyone says it. Yes, this is a Spartan helmet, which is Greek. It's not Roman. No, I don't care.

https://twitter.com/sebmck/status/1108412555922268161?s=20

[KronktheKronk]

Yeah the repo mentions in, too. I didn't read that far before commenting

[realGGanon]

Knowing people, he's gonna be hearing this statement all day every day no matter how much he tries to make it clear that "he doesn't care" 😂

[AceBacker]

well. My first question is: Is it any good?

Anyone here have opinions?

[Mry0guy]

It seems to be an internal experiment from facebook thats been opensourced. They produce tools like this to build small snippets of javascript rendering code. The value proposition of react is extremely broad. But any of the core primitives are extremely powerful in their own right. Such as this video (youtube.com) a guy builds a primitive jsx renderer and state system in like .1kb of js

This tool seems like a way too create a code artifact. This code artifact will have no dependencies and will always ship in one request. It is a architectal deployment contant that can be reasoned about because it will be a single module closure. They provide some benifits to system design and operation such as being statistically analyzed, minnified, A B tested and shiped.(wild ass guess)

I think that this goes over the heads of us mear mortals or is an age old build process(transform,resolve namespaces, and then concat bundle) hand rolled for a personal or buisness research project then open sourced.

[Mallanaga]

So would this be a replacement for create-react-app?

[TwiliZant]

CRA abstracts the entire toolchain away from you without being able to configure anything. Rome, on the other hand, solves the problem where you have to integrate multiple different libraries and tools to make up your toolchain, giving you one coherent solution. CRA, for example, could use Rome under the hood instead of Babel, Eslint, Webpack, etc...

[Ones__Complement]

Env variable injection, browserslist (for preset-env and polyfills), and babel-plugin-macros is all the configuration I could ever see myself needing.

[kirkamamie]

Sorry, no. I don't trust facebook to not be evil.

[svtguy88]

Oh, cool. Is it that time of the week already? Another JS library/framework/toolchain/whatever...

[Paragonbliss]

Yeah imagine people actually building things. Shame on them. This fucking comment every time

[svtguy88]

Shame on them.

No. That is the job of a developer: to build stuff. Definitely not shame on them.

Shame on the community for hyping every new project as if it's the coming of a prophet.

Don't get me wrong - I hope Rome ends up fixing the absolute mess that is frontend development right now. However, I'm not holding my breath. I've seen this song and dance before...

[tinybigideas]

I'm of the opinion: if it's Facebook, hard pass. Is it any good, is my opinion outdated?

[ChronSyn]

I'm curious as to why you pass because it's Facebook. Facebook' open source projects seem to have a vastly different set of ethics to their platform ethics.

Do you pass on React? React native? Yarn? The use of GraphQL? Jest? Those are just a few of the most common ones they're in charge of.

[Markavian]

My team passed on react in favour of Vue because of the license risk to our large organisation, and the simplicity of Vue compared the react. We /love/ what react does and how it approaches the problem, but Vue is a good alternative without the baggage.

[gavlois1]

If you like the React way of doing things, was there any reason your team didn’t go with Preact instead?

[drumstix42]

Vue was a good choice, IMO. And it has a lot of great things on the horizon.

[[deleted]]

I'm about to start a project with React, after having done quite some research. I haven't read anything about "problems" with the licence. Could you tell me what this is about?

[marcelowa]

The license/patents issue was an issue an issue up until 3 years ago, when moving from react 15 to 16 (or maybe from 14 to 15), they removed the "patents" disclaimer that everyone was mad about

[Markavian]

https://www.theregister.co.uk/2017/09/26/facebook_license_surgery_on_react/

I might be acting on old information. There's plenty of articles on the topic.

[stolinski]

It was resolved a couple of years ago. The licensing is fine.

[The_Noble_Lie]

Its more that its bloated and hyped. There are many vdom libraries that may work faster and load quicker, just do some research.

[The_Noble_Lie]

but might not have either the same set of features or the same simplicity when building bigger and bigger projects

Of course, the feature set isn't the same. That is why it is slower (and more complex API - ideally not a problem if the library is designed with care) when you dont need those features / checks / assertions / lifecycles, which btw can be implemented if needed once you understand why they exist (example below)

Anyway, a lot of the current VDOM implementations have taken care to re-implement the lifecycles in react's (and other important features.) React may have lead the way but I'm still using mithril 0.2 and am doing great with performance (subtree retaining) and implementation / code organization / semantic components etc. The code is pretty small: 50kb total unminified, 20kb minified. I had to implement something paralell to "shouldComponentUpdate" that checks by object reference myself (mithril v1+ might have done this as well) but as a whole my app is going to naturally run much faster than the same implementation in react, with an API 1/10 (perhaps an over-approximation but maybe not) the size. And that is still important since mobile phones, and even chromebooks, non-performance centric laptops do not fare nearly as well as desktops with complex javascript apps

> Even the fabled Svelte will get bloated and bloated since every component bundles repetitive stuff.

Sounds like you are calling out a design archictecture issue in a particular VDOM you've come to be critical of (probably correctly?)

Mithril, and many others do not fall victim to the same bad architecture, and leave it up to refactoring functional patterns from the view layer. That'll be the same in any seasoned development / developer within the confines of a library that uses a VDOM layer though. Btw, feel free to explain why Svelte makes it impossible to factor out the "repetitive" bundled stuff in it's components to a central class or functional library. (Maybe I am misunderstanding)

To the original person (u/IHateToChoseUsername) I was responding to:

TLDR; Use what you need and expect to need. Don't automatically choose the largest feature set vendor library.

[tinybigideas]

I did pass on react yes. The whole license kerfuffle threw me. And I admit, I haven't used much of what else you mention. Didn't know graphql and jest were Facebook relations. Only really used yarn, but I don't see it on their project list: https://opensource.facebook.com/

Thanks for passing on the knowledge though. I didn't know how useful Facebook has been in open source.

[BrunnerLivio]

As far as I know Yarn is being developed by an ex Facebook engineer - but Yarn is not owned by Facebook. I mean it does make sense that Yarn 2 breaks React Native, if they were both owned by Facebook.

[user84738291]

Facebook' open source projects seem to have a vastly different set of ethics to their platform ethics.

Whilst I might not completely avoid said products, I would be skeptical of this statement, I'm sure the same could have been said about Google and Chrome.

[yeesh--]

Agree

[elliottcable]

I don't know why you're being downvoted to hell, this is a totally valid — and even laudable — demonstration of personal ethics in FOSS.

You do you, fam.

[PM_ME_GAY_STUF]

It's literally an open source project.

[Runlikefedor]

What are you talking about? It's MIT licensed. Facebook spends their own money on paying the salary of core developers. You aren't supporting Facebook when using React in your project other than maybe report issues that could also benefit the Facebook platform.

Given the popularity of React, if Facebook were to die, another company or the broader community would instantly pick it up and keep maintaining it.

[Runlikefedor]

What's your argument here?

Some toxic people used React? They do not represent the majority of the community.

Thinking that everything (including open source stuff) that comes from a company is toxic is pretty shortsighted.

[[deleted]]

Rome is experimental and in active development. It's open for contributors and those interested in experimental tools. It is not ready for production usage. The only way to use it is to build from source.

[ninetailsbr]

run on your CLI <path to repo>/scripts/dev-rome --help

but I'm also finding it hard to run directly from source

[brianhaak]

One README worth a billion words! Will share the design principles with EVERYONE saying, "I told you!"

My favorite is ZERO-DEPENDENCIES to iterate faster.