Leo is a front-end scaffolding tool developed by JD iPaaS front-end team to support the full link of front-end development, extensible and customizable, while providing configuration support for templates, builders, extended command markets and other rich peripheral ecology.

The origin of front-end scaffolding

Front-end scaffolding is a productivity tool that comes with increasing business complexity.

When the team size is small or the business is relatively simple, the initialization of the project is usually directly copied from an existing project, and some code (previously business relevant or unnecessary features, etc.) is deleted according to the situation, and some parts are patched up to start new development.

As business development, several people between the copy already cannot satisfy the need (copy of the source can’t back, out of the question and I don’t know is which version of the problem), project initialization also became the template code in the git repository to maintain, need new project, the code cloning, deleted the git directory, Then re-upload to the new project’s warehouse.

As business complexity increases, there are more repositories of template code. When creating a new project, the developer not only has to find out which repository to clone, but also has to go through the process each time: Clone code → delete git directory → associate and push to a new repository. To improve efficiency, the development package this process as a CLI command, such as fe-cli, when creating a new project just execute fe-cli projectName.

Current situation of front end scaffolding

In a front-end development process, a typical development process might look something like this:

Scaffolding only exists in the first step, and at each step after initialization, it is all customised by the development (usually team or intra-team specifications) : how to build, which testing tools to use, standards for code Lint, how to approve deployment, etc. Even small internal specifications may vary from project to project.

Moreover, scaffolding often exists within small internal teams, and the templates provided by these scaffolds, even if they are excellent, are often confined to the internal team and cannot be discovered and used by other teams. As a result, they can only be improved within the team and cannot be reused and standardized at the team, department or even company level.

The above is the case of the old team, but for a new team, it is often impossible to draw manpower to develop a scaffold in the heavy business development, and initialization within the team may return to the era of copy and paste.

Leo provides the solution

Against the pain points, our team in research and collect the development of students, develop the Leo scaffolding as a solution, as shown in the figure below, each block each other within the team’s development to provided by Leo unified service, within the team not only reduce the cost of maintain their scaffolding, can also enjoy the services offered by other teams.

Zero cost access

Whether a new team is connected, or an old team will have a project template migration, simply initialize a template file using Leo Init Template, move your template project into the template folder and push it to the remote end (during initialization, Leo automatically creates and associates projects in the Template marketplace). Leo init your-template-name Leo init your-template-name

Overwrite development full link

Instead of scaffolding only playing a role in initialization, Leo uses a modular design that allows instructions to be overlaid across the entire link of development.

For example, the react-Builder is provided as the default build tool. However, if you use gulp, rollup or other build tools, You can write a Builder to support the build process of your project (as with template access, just initialize and write the build functionality and push it).

Leo market

As you may have noticed in the description of access above, when initializing a template or Builder file, Leo synchronizes the project to the appropriate market, and the template and build functions that were previously only used internally by the team will now serve more Leo users

Leo’s design idea

The layered design

The structural design of Leo is divided into three layers: core logic layer, functional module layer and business logic layer. Each layer is divided according to function as named, and there is one-way dependence between layers

modular

Within each layer, different functional modules are responsible for their respective missions, Core is responsible for login, burial points (Leo statistics), etc., Cli handles command line instructions and provides command line interaction, Generator is responsible for template generation, Builder is responsible for build and local development.

More extended

The template market and Builder market of the business logic layer are actually jointly maintained by developers. Leo only provides some basic templates and builders. Every developer and team can publish in the market, and the benefits are no longer limited to individuals and teams. Anyone can see it, download it and use it (Best practice: 300+ Babel iHub floors developed with Leo)

How to use

Leo as a scaffold frame, you need to do the necessary configuration to run locally.

  1. Create the project and install it

    npm i @jdfed/leo-core
Copy the code

  2. Create a new scaffold project directory below

    yourProject
 |- bin
 |   |- index.js
 |- package.json
Copy the code

  3. Declare your command entry in package.json

    {
  "bin": {
    "yourCommand": "bin/index.js"}}Copy the code

  4. Configure Leo /core in bin/index.js and start

    #! /usr/bin/env node

const LeoCore = require('@jdfed/leo-core').default;

const customConfig = {
  // Template repository group
  gitTemplateGroupURL: ' '.// The configuration file name in the project, default is leorc.js
  rcFileName: 'xxx-rc.js'};const customCore = new LeoCore({
  config: customConfig,
  hooks: {
    beforeStart() {
      console.log(this.leoRC);
    },
    afterCommandExecute() {
      console.log(this); ,}}}); customCore.start();Copy the code

    View more configuration items

More documentation

  • Rc Configuration description

  • Meta Configuration Description

Open source and flowers

Leo scaffolding as a scaffold framework (slightly different from internal use) has been open source to Github for more developers to provide convenience, github address, welcome star~