WEBSCAF

Abstract

This is a project that mainly concerns web developers\' areas of interest. While creating a project developers face the problem of scaffolding and especially doing it the right way is another major task that needs to be accomplished. It is a NodeJS-based project through which a fresh project structure can be created with the help of the Command Line Interface. Setting up a new project may require setting up various folders which might get hectic hence this project is a perfect solution as it performs scaffolding with the help of a few CLI commands. The idea of creating such a project hit the minds of our team while building other web projects during our bachelor\'s in technology. This project is an operating system independent product that can be used on any machine with any operating system like Windows, Linux, Mac, etc. The pre-requisite of this project is that Node.JS should be installed in the device on which the product has to be used. NodeJS is an open-source server environment that helps to run JavaScript on the server.

Introduction

I. INTRODUCTION

The project focuses on making the project structuring part easier with the help of CLI (Command Line Interface) commands. The project can be used in any operating system. The machine needs to have Node.JS installed on the device.

Webscaf is a command-line tool to create scaffolding/boilerplate for web projects and the name is inspired by the words Web and Scaffold. With the help of webscaf, scaffolding will become an easier task. Folders are autogenerated with the project name and type provided. It contains all the necessary files required in the project for instance a JavaScript file will be created for React JavaScript project. The help of boilerplate webscaf provides the developer the advantage of autosuggestions in a situation when someone types some incorrect or incomplete command. With the combination of scaffolding feature and boilerplate, webscaf gives primary goals since it helps the developer to put more focus on developing the product rather than investing much of his time in the project setup. The language that is used for building webscaf is JavaScript and Typescript. Javascript is an interpreted programming language which is a backbone of world wide web. Whereas  Typescript is a superset of JavaScript in terms of syntax and adds optional static typing to the language. The efficiency of the project has been remarkable yet. The time taken by webscaf command execution depends on the configuration of the project.

II. FEATURES

1. Open Source
2. OS independent, Node.js is the only required dependency.
3. Highly customizable
4. User friendly with features like autocomplete, auto-suggestions and auto-updates.

III. METHODOLOGY

This CLI tool aims to make development workflows and developer experience better when a developer starts on a new Web project. Leveraging development workflow with the latest tools and modular technologies is the prime focus of **Webscaf** and we can achieve it. While modern frameworks and libraries provide a way to set up their projects they were never efficient to measure a developer's need. To keep remerging such points we start this project which revolves around a methodology of:

1. Provide a single tool to rule them all i.e., the developer should be able to handle primary tasks with one tool itself.
2. Automate things as much as possible.
3. Provide a UI/UX which can keep developers productive.

Above mentioned points just dictate our motivation and values which we want to drive in the project. With such technologies, our goal will be to provide such productivity tools and techniques to developers and that's why we made this project open-source so that community can pitch their ideas, contribute and make developers' life easy.

IV. CLI USAGE

By keeping simplicity in mind CLI commands are defined in such a way so that a user can keep them in mind easily.

1. When the user wants to generate a project’s scaffold

      Syntax:

webscaf generate <project-name> [params] [--flags]

Example:

webscaf generate wordpress theme –type=fse

webscaf generate wordpress theme –type=classic

The above commands will generate a WordPress theme in FSE and classic themes format.

2. When the user wants to check the CLI version

Syntax:

webscaf –version

3 When the user wants to see all available commands or the CLI help section

Syntax:

webscaf help

4. Enable CLI autocomplete

Syntax:

webscaf autocomplete

5. To see the list of available plugins in CLI

Syntax:

webscaf plugins

6. To update the CLI

Syntax:

webscaf update

From bullet points, 2 to 6 all commands fall under the utility commands which help the user to configure the CLI for best use cases. As shown in (1) webscaf generate is the entry point to create scaffolds.

V. SCOPE AND ADVANTAGES

Webscaf aim is to improve the development workflow so that developers can focus on the main tasks instead of setting up everything from scratch.

Conclusion

With the use of webscaf, the project setup has become much easier for developers. The time taken by webscaf to execute the tasks through the commands depends upon the configuration of the project. As of now after performing various rounds of performance testing, it has been concluded that scaffolding with the help of webscaf does not take time more than a minute. However, the time taken for setting up the project is highly dependent on the project configuration.

References

[1] NodeJS - https://nodejs.org/en/about/ [2] Oclif - https://github.com/oclif/oclif [3] CRA Template - https://github.com/facebook/create-react-app

Copyright

Copyright © 2022 Lovekesh Kumar, Sana Bisht, Prof. Bipin Pandey. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.