Clean UI5

Project Setup

This section provides a step-by-step guide for setting up a new SAP UI5 project, including essential tools like Git, Node.js, and initializing your first UI5 project.

Git Installation

1. Download Git: Navigate to the official Git website to download the latest version for your OS.
2. Install Git: Execute the downloaded installer and follow the prompts. Default options are typically sufficient.
3. Verify Installation: Open a terminal and enter git --version to ensure Git is correctly installed.

Cloning a Project from GitHub

1. Access the GitHub Repository: Log in to your GitHub account and locate the UI5 project repository.
2. Copy the Clone URL: Click the "Clone or download" button and copy the provided URL.
3. Clone the Repository: Open a terminal, navigate to your desired directory, and run git clone <repository-url>, replacing <repository-url> with your copied URL.

Node.js Installation

1. Download Node.js: Visit the official Node.js website and download the LTS version for your system.
2. Install Node.js: Execute the downloaded file, following the installation prompts. Accept the default options to include npm.
3. Verify Installation: In a terminal, run node --version and npm --version to confirm the installations.

Setting Up a UI5 Project

1. Install UI5 CLI: Use npm to install the UI5 Command Line Interface globally with npm install --global @ui5/cli.
2. Initialize a New Project: Create a project directory, navigate into it, and run ui5 init to generate a UI5 project configuration.
3. Run a Sample Application:
   • Generate a new UI5 application with ui5 create --type application.
   • Start the UI5 server with ui5 serve.
   • Access your application at http://localhost:8080.

Coding Conventions

These conventions promote clarity, maintainability, and best practices in SAP UI5 development.

Meaningful Naming and Function Usage

• Intuitive Naming: Select names that clearly communicate the variable's or function's purpose.

  // Avoid
  let n = new Date().getTime();
  
  // Prefer
  let currentTime = new Date().getTime();
  

• Concise, Single-Purpose Functions: Ensure functions are small and focused on a single task.

  // Avoid
  function handleUserData(user) {
    let age = getAge(user.birthdate);
    if (age > 18) {
      // adult logic
    } else {
      // minor logic
    }
  }
  
  // Prefer
  function isAdult(user) {
    return getAge(user.birthdate) > 18;
  }
  

Effective Commenting and Error Handling

• Purposeful Comments: Aim for comments that explain why, not what. The code itself should be self-explanatory.

  // Avoid: Obvious comment
  // Set age to 20
  let age = 20;
  
  // Prefer: Clarifies the rationale
  // Default age set due to XYZ reason
  let age = 20;
  

• Exception Handling: Favor throwing exceptions over returning error codes, making error handling transparent and predictable.

  // Avoid
  function getUser(id) {
    if (id <= 0) return null;
  }
  
  // Prefer
  function getUserOrThrow(id) {
    if (id <= 0) throw new Error('Invalid ID');
  }
  

Argument Simplification and Function Purity

• Limit Arguments: Reduce the number of function arguments to enhance readability and maintainability.

  // Avoid
  function createUser(firstName, lastName, email, birthDate, address) {
    // Implementation
  }
  
  // Prefer
  function createUser({firstName, lastName, email, birthDate, address}) {
    // Implementation
  }
  

• Pure Functions: Strive for functions without side effects, enhancing predictability and testability.

  // Avoid
  let userAge = 25;
  
  function incrementAge() {
    userAge++; // Impure due to external state modification
  }
  
  // Prefer
  function incrementAge(age) {
    return age + 1; // Pure function
  }
  

DRY Principle and Code Structuring

• Avoid Code Duplication: Utilize functions, classes, or UI5 fragments to encapsulate reusable logic, reducing redundancy.

  // Avoid
  let daysSinceCreation = calculateDays(user.createdAt);
  let daysSinceUpdate = calculateDays(user.updatedAt);
  
  // Prefer
  function daysSince(date) {
    return calculateDays(date);
  }
  

• Logical Structure: Organize code logically (e.g., models, views, controllers in MVC) and use consistent naming conventions across your project.

Tools

Familiarize yourself with tools and libraries that enhance development efficiency, such as:

• ESLint: A static code analysis tool for identifying problematic patterns in JavaScript code.
• SAP Web IDE: An integrated development environment tailored for SAP development, offering tools and features specific to SAP applications.
• UI5 Tooling: A collection of tools facilitating UI5 application development, from project setup to optimization and deployment.

By adhering to these conventions and utilizing the outlined tools, developers can ensure their SAP UI5 projects are maintainable, scalable, and aligned with best practices.