This article almost died in childbirth. Because the summary of the process, many times doubt that this article is on the official…
A Roman project Logo containing the Greek Sparta helmet
All roads lead to Rome. Rome has yet to release an official version of NPM. Let’s take a look at what’s on the way to Rome, centered around the JavaScript toolchain; And Rome itself, what does it mean?
On the last day of February, I was searching for the month’s latest open source projects for the Open Source Aficionados monthly when I came across a repository hotshot named Rome. “An experimental JavaScript toolchain”, “includes compilers, Lint, formatters, bundlers, testing frameworks, etc.” and “aims to be a comprehensive tool for all functions related to JavaScript source code processing” are ambitious goals in just a few sentences. Now, it’s time to dive in to understand the wave and make a shallow sharing within one’s ability.
Rome is being developed by Sebastian McKenzie, author of Babel and Yarn at Facebook. Before open sourcing, Rome was mostly a personal project for him, but now Facebook is willing to pay him to work on it. As of now (early April 2020), Rome’s submission record has grown from 70+ to 600+, with 40+ contributors, 30+ issues and 170+ Pull Requests.
In addition, it may also echo a quote I wrote in the third issue of the monthly about the difference in the starting point of open source between startups and big companies: Large companies may open source in the early stages of a project, hoping that more people will “contribute” to the iteration with its appeal, while the start-up team will open up when the product is relatively mature, hoping to attract users to “use” the product in depth as soon as possible, focusing on improving the overall performance of the product in the industrial environment.
Body & Background & Dry goods begin.
Rome: From personal projects to Facebook’s new open source
As you can see from the official website, Rome aims to be a comprehensive tool for all the functions associated with JavaScript source code processing, including “compilers, linters, formatters, bundlers, dependency managers, and testing frameworks.” Rome stems from a desire for consistency across the project’s extended scope.
Rome also comes from Babel’s author’s own dissatisfaction with Babel, just as Deno is with Node.
This section uses questions and answers from Readme. md and the homepage of the official website to show Rome’s background and specific goals.
01. What are some sources of Rome?
There are only two hard things in computer science: cache invalidation and naming. – Phil Karlton
- Credit: Sebastian McKenzie, author of Babel and Yarn, is a React Native team project.
- Name source: Named for the proverbs “All roads to Rome”, “Rome was not built in a day” and “Be like a Roman when you are in Rome”. This refers to the extended scope and desire for consistency of the whole project, which began as an office joke.
- An ancient Greek Spartan helmet. It’s not a Roman alphabet and it’s not very relevant, but it looks cooler than Galea.
02. Coding Architecture for Rome?
In version control systems, monorePO (short for syllabic mono repository) is a software development strategy in which the code for many projects is stored in the same repository. As of 2017, this software engineering practice is more than a decade old, but has only recently been given a name. — Monorepo, wikipedia
- Written entirely in TypeScript, loose typing is rare.
- Support for handling JSX as well as Flow and TypeScript code.
- Self-hosted, you can compile yourself.
- Rather than being a collection of existing tools, all components are custom and do not use third party dependencies (a rethinking of the JavaScript ecosystem and a bold implementation of the entire toolchain that does not rely on third party libraries).
- Is the Monorepo architecture with internal packages to delimit code boundaries.
03. Job Prospects for Rome?
- Designed to be a comprehensive tool for all functions related to JavaScript source code handling.
- The goal is to replace many of the existing JavaScript tools, but there will also be integration solutions that provide their own for other tools to use freely as needed — such as a plug-in that uses the Rome compiler as another bundle.
- The current area of focus is Linter (a tool for analyzing source code to flag programming errors, bugs, style errors, and suspicious constructs), which is the least of the resistance in the goal of making Rome the easiest tool chain to use.
Microbar: Go back to the JavaScript toolchain
Before we learn a tool, we should always know what kind of problem it can solve. Similarly, when we meet a problem, we should also take the problem to find a tool to solve it.
** — ** Ye Junxing, Senior front-end engineer of Alibaba Group
Mature software projects must follow good development practices, but also have their own unique software development life cycle, programming practice only accounts for a small part of the entire development cycle. What other problems usually arise when a JavaScript software is built? This involves the technology selection of JavaScript projects, and there are numerous star projects in the JavaScript ecosystem. The following is an overview, which does not involve the specific use of each tool.
JavaScript toolchain schematic
- JS development environment? V8, Node, and even Deno;
- JS front-end framework? Angular, React, Vue, React Native, jQuery, etc.
- JS backend framework? Nest, Express, Koa, etc.
- JS scaffolding? Vue CLI, Angular CLI, Create React App, Yeoman, etc.
- JS translation tools? Babel, etc;
- JS test tools? Unit testing, integration testing, Mocha, Jasmine, Jest, Karma, etc.
- JS debugging tool? Chrome DevTools/Firebug/Webkit Inspector and other major browsers, VS Code/WebStorm and other major editors/IDES;
- JS format specification tool? There are JSLint, JSHint, ESLint, TSLint, etc.;
- JS interface tuning tool? Axios, Fetch, etc.
- JS package manager? NPM, Yarn, Bower, PNPM, etc.
- JS module loader? There are RequireJS, SystemJS, StealJS, ES Module Loader, etc.
- JS task management tool? Grunt, Gulp, and Webpack monitor file changes and automatically execute tasks.
- JS static support? There are TypeScript, CoffeeScript, Flow, LiveScript, etc.
- JS code post-processing tool? There are a variety of loaders in many fields such as obfuscation, miniaturizer and optimizer.
- JS packaging tool? Webpack, Rollup, Parcel, Browserify, etc.
- JS template engine? Handlebarsjs, ETPL, TemplateJS, and even the template syntax built into most front-end frameworks.
- JS non-Web framework? Related libraries are supported in the fields of Internet of Things, blockchain, big data, etc., which are not involved in this paper.
- JS process management? There are Forever, PM2, StrongLoop Process Manager, etc.
- . ? Even editors, ides, CSS preprocessors, code hosting platforms, team development modes (pure front end, heavy back end, front and back separation), WebAssembly, Serverless, JS DevOps, etc., can be added to the technical selection of a project.
Therefore, it can be seen that the technical selection is to find the corresponding solution for each link that can make the project run successfully; Workflow is the implementation process after all the solutions are converged. A Toolchain is a collection of all the ways in which work can be implemented, and a tool can represent a solution.
In short, a JavaScript toolchain is a set of tools that JavaScript engineers use during their development.
Taste Rome (V0.0.52)
Rome doesn’t currently have a direct release on Github, but the compiled version of Rome. json shows a v0.0.52 version number and is in an early stage, and the project description is “an experimental JavaScript toolchain.”
To try Rome, you need to work through these steps step by step (since There is no official release of Rome, there is not much engineering involved in how to integrate it into a package.json script).
The Roman army of the imperial era
All demos in this chapter are in the Rome folder of @Hylerrix/Demos.
Git Clone Rome
Since There is no official release of Rome, there is no way to install Rome directly from NPM. At this stage, Rome offers a local installation that requires only a local clone and local compilation and a local NPM installation.
Note: Before installing Rome, ensure that Node and NPM are properly installed on the local PC
02, Rome init
The Rome init command generates a rome.json file in the current directory, and using the recommended configuration initializes the following:
This file tells Rome that it should be at least version 0.0.52 for use with the current project. Specific usage documentation is still under development.
03, Rome Run index.ts
The Rome Run command runs whatever files are passed to it, usually in conjunction with the project’s main file. It is still under development and may not process all source files correctly. To test that the Rome Run runs successfully, create an index.ts and api.ts file, as shown below.
In this case, run the following command to successfully use:
04, Rome Lint index.ts
Since I really don’t like semicolons in JavaScript apps, which is a bit different from the mainstream specification, the Rome Lint command comes in handy: Rome requires semicolons at the end of JavaScript statements by default. At the same time, an interface is deliberately not exported in api.ts and is deliberately imported incorrectly in index.ts. After reconstruction, there are errors in index.ts, api.ts and Rome Lint. The execution process is as follows:
The Rome Lint command tells us here that we need to add a semicolon and that we need to successfully export interface in api.ts. The former can be fixed directly with Rome Lint index.ts –fix (no semicolons added to api.ts); The latter requires manual repair, but provides a perfect friendly reminder.
05, Rome compile index.ts
The Rome compile command uses a set of default conversions to compile files. Because this command is currently under development, there is no option to specify a subset of the transformation. After using this command, the output result has no interface.
06. Rome Parse Index
The Rome parse command parses the file and outputs a nicely formatted AST.
07. More orders for Rome
In addition to the few commands shown on the official website, you can see from the source code that there are many more built-in commands under development, which you can find in Rome — Help.
The resources
- [English] Rome Github Project
- [English] Rome, a new JavaScript Toolchain
- [English] Rome Official Announcement
- [English] Rome Timeline
- [English] Facebook Introduces Rome Experimental JavaScript Toolchain
- [English] 01: Sebastian McKenzie on Babel and the Road to Rome – The Babel Podcast
- Front end Toolchain class (1) – Package management tools
- Rome: Get started with Facebook’s latest JS tools
Summary & Subscriptions
In recent years, JavaScript has grown beyond the realm of “front-end development”. Therefore, the perspective of this writing is not just the front-end development as the main exploration, but the JavaScript itself out, which is also an important change in my career development gradually clear.
This article provides a brief introduction to Rome through learning and writing sharing, but it’s only a primer. I am not familiar with Babel itself, and THERE are many doubts generated in the learning process that I cannot answer properly now. For example, “What are the similarities and differences between Rome and Babel?”, “How do you think the Rome repository uses Git to track Node and Modules?”, “How does Rome replace existing tools or integrate solutions?”, and “What are the characteristics of the Rome packaging process?”
Whether or not you end up using Rome, it would also be rewarding to trigger a rethink of the JavaScript toolchain.
Finally, thank you for reading, the official account (@ningowood) and supporting group chat welcome to join, and welcome to update three issues as scheduled, Ningowood/Open-sources-magazine will soon support online UI browsing and provide more extended features “open Source enthusiasts monthly (@open-sources-magazine)” repository click Star! (Github has not gained followers for a long time. Please follow me.)