introduce

Sparrow-js is a scenario-based LowCode building platform, which generates source code through the scenario-based editor. It focuses on improving the efficiency of the development of daily business requirements. The core goal is only “improving the efficiency of r&d”. It has the following functions:

  • Low code development, fast generation of readable, vue Element-UI component library source code.
  • Visual development, through the GUI generated page code source file.
  • Asset market, code resource sharing, including component, block, scene builder editor.

advantage

  • The core goal of Sprarrow is “improving efficiency”, so the function is not just a simple UI visual construction, currently provide functional level construction, provide code assembly with business logic, generate secondary development of the source code;
  • Easy to expand, read component source code through AST, combine, as long as the logic of the page is detachable can be assembled arbitrarily;
  • Can be combined with the project, technically using local running server services, can be deeply combined with the project, to achieve more means of efficiency, more operational space;

The directory structure

.
├ ─ ─ the README, md├── Sparrow // Sparrow core functions, including visual construction, source code generation service│ ├ ─ ─ package. Json│ └ ─ ─ packages├─ Sparrow - Vue-develop //│ ├ ─ ─ Babel. Config. Js│ ├ ─ ─ package. Json│ ├ ─ ─ the public│ ├ ─ ─ the SRC│ └ ─ ─ vue. Config. Js├─ Sparrow - Vue-site //│ ├ ─ ─ the deploy. Sh│ ├ ─ ─ the docs│ └ ─ ─ package. Json├ ─ ├ ─ imp├ ─ ─ blocks├ ─ ─ boxs└ ─ ─ the componentsCopy the code

chart


The working principle of


  1. First, select the scene editor (forms, tables, blocks, etc.). The scene editor renders to the page.
  2. Select materials (components, blocks) through the specific scene editor, select the action to the server side;
  3. The server generates the source code and outputs the source code to the preview project.
  4. Preview projects through webpack hot update real-time display effect;

Quick learning

Global installation

# global install
$ npm install -g sparrow-code

# run
$ sparrow
Copy the code

In-project installation

# In-project installation
$ npm install sparrow-code -D

# package.json adds sparrow
"scripts": {
 "sparrow": "sparrow start -m page" }  Install GUI components in the project $ npm install @sparrow-vue/develop-ui -S  # App.vue is referenced within the project <template>  <div id="app">  <router-view />  <sparrow />  </div> </template>  <script> import Sparrow from '@sparrow-vue/develop-ui'  export default {  components: {  Sparrow  },  name: 'App' } </script>   Copy the code

Installation effect drawing within the project


Project use: vue-admin-template

Function is introduced

interface


Git address

Git open source code, core function address

Asset market

Asset markets produce components, blocks, templates, scene editors and other raw materials for developers to use;

// Vue-market directory structure.
├ ─ ─ the README, md├─ Blocks //│ ├ ─ ─ BasicException│ ├ ─ ─ BasicForm│ ├ ─ ─ BasicTable│ ├ ─ ─ block. Json│ ├ ─ ─ package. Json│ ├ ─ ─ the script│ ├ ─ ─ the SRC│ └ ─ ─ table. Json├─ Boxs // Scene Editor│ ├ ─ ─ the build│ ├ ─ ─ examples│ ├ ─ ─ package. Json│ ├ ─ ─ the SRC│ └ ─ ─ tsconfig. Json└ ─ ─ the components└ ─ ─ the README. MdCopy the code

Asset market Git address

Scene editor

The scenario editor is responsible for gluing assets together, and various business requirements pages can be visualized by using the corresponding scenario editor.

Editor directory

├ ─ ─ the components│ ├ ─ ─ ArrayListBox│ ├ ─ ─ BoxForm│ ├ ─ ─ ComponentBox│ ├ ─ ─ ConfigBox│ ├ ─ ─ ContainerBox│ ├ ─ ─ CustomInline│ ├ ─ ─ InlineToolbar│ ├ ─ ─ LabelBox│ ├ ─ ─ LogicBox│ ├ ─ ─ TableBox│ ├ ─ ─ TableCellBox│ ├ ─ ─ TableHeaderBox│ ├ ─ ─ TabsBox│ ├ ─ ─ block│ ├ ─ ─ box│ ├ ─ ─ layout│ ├ ─ ─ com.lowagie.text.paragraph│ └ ─ ─ the toolbar├ ─ ─ index. JsCopy the code

Editor git address

Github.com/sparrow-js/…

The form

Form editor provides form component construction, component configuration, form container assembly functions;

  1. Select the form editor;
  2. Fill the data into the right configuration area;
  3. Select the left component;

The preview image is as follows:

form

The table provides initialization, deletion, editing, linking, popup and other functions

block

Select the desired block code snippet to insert into the page, preview the effect in real time

tabs


Other scene editors interested can experience their own…

block

Block positioning is a reusable snippet of code that can be changed freely within a project. It is one of the layers of page grading based on atomic design theory. There are many excellent open source projects that deposit materials based on atomic design theory for reference.

Preview the address

Sparrow, js. Making. IO/sparrow – vue…

prompt

The block is from the open source project, and the source has been labeled. If the original author of the open source project has any questions, please contact: [email protected]

Example generated source code:

Below is the source code generated by Sparrow, which continues to improve

Master file

<template>
  <div class="home">
    <div class="block-list">
      <div style="margin-bottom: 20px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
 <el-tab-pane label="User Management" name="first">  <div>  <div class="block-list">  <Form12 />  </div>  </div>  </el-tab-pane>   <el-tab-pane label="Configuration Management" name="second">  <div>  <div class="block-list">  <Table />  </div>  </div>  </el-tab-pane>  </el-tabs>  </div>  </div>   <div class="block-list">  <paragraph  :type="'Container'"  :emit="'client.component.show'"  :params="{ uuid: 'ec6bd3bf' }"  />  </div>  </div> </template>  <script> import Table from "./components/Table"; import Form12 from "./components/Form12"; import generatorMixin from ".. /mixins/generatorMixin"; export default {  data() {  return {  activeName: "first"  };  },   methods: {  handleClick(tab, event) {  console.log(tab, event);  }  },  components: {  Form12,  Table  },  mixins: [generatorMixin] }; </script>  Copy the code

The Form file

<template>
  <div class="root">
    <el-form label-width="100px">
      <el-form-item label="Textbox">
        <el-input placeholder="" v-model="form.name" />
 </el-form-item>   <el-form-item label="Textbox">  <el-autocomplete  :fetch-suggestions="querySearch21b542b3"  @select="handleSelect21b542b3"  placeholder="Please enter"  v-model="form.region"  />  </el-form-item>   <el-form-item label="Checkbox">  <el-radio-group v-model="form.date1">  <el-radio  v-for="item in radionboxOptionsb542b38a"  :key="item.value"  :label="item.label"  />  </el-radio-group>  </el-form-item>  </el-form>  </div> </template>  <script> export default {  methods: {  querySearch21b542b3(queryString, cb) {  var restaurants = this.restaurants;  var results = queryString  ? restaurants.filter(this.createFilter(queryString)) : restaurants; // Call callback to return data for the list of suggestions  cb(results);  },   createFilter(queryString) {  return restaurant => {  return (  restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===  0  );  };  },   handleSelect21b542b3(item) {  console.log(item);  }  },   data() {  return {  form: {  name: "". region: "". date1: "". date2: "". delivery: false. type: []. resource: "". desc: ""  },  restaurants: [  {  value: "Sanquan Fresh Food (Beixinjing Restaurant)". address: 144 Xinyu Road, Changning District  },  {  value: "Hot Honey Seoul Fried Chicken (Seonha Road)". address: No.661 songhong Road, Changning District, Shanghai  },  {  value: "New Mong Kok Tea Restaurant". address: 113, Building 6, Chuangyi Jinshagu, 988 Zhenbei Road, Putuo District, Shanghai  } ]. state1: "". radionboxOptionsb542b38a: [  {  value: "Checkbox 1". label: "Checkbox 1"  },  {  value: "Checkbox 2". label: "Checkbox 2"  },  {  value: "Checkbox 3". label: "Checkbox 3"  }  ]  };  } }; </script> Copy the code

New features continue to be added, interested can follow github.com/sparrow-js/…

This article is formatted using MDNICE