Skip to main content

Papplica Application Structure

tip

Papplica is designed to be highly customizable with independent, loosely connected parts, so none of the details on this page are strictly neccessary.

If needed, parts of your application structure can be easily replaced to meet your business needs or to integrate with your existing systems.

Overview​

Typically, a production-ready application consists of the following parts:

  • Front-end: The user interface of the application, which is displayed in the user's browser. This application is hosted on a CDN or a static file server, and will perform API requests to the back-end.
  • Back-end: The server-side code that powers the application, which is executed on a server.
  • Deployment: The process of deploying the application to a server or cloud provider, making it accessible to users.
  • Database: The storage system for the application's data, which is accessed by the back-end.
  • External Services: Additional services that the application may depend on, such as payment gateways, email services, or analytics services.
  • Monitoring: Tools and services that monitor the application's performance and health, via logging, metrics, and alerts.
  • CI/CD Pipelines: Automated workflows that build, test, and deploy the application, ensuring that changes are safely and quickly deployed to production.

Papplica provides prototype applications with solutions for each of these parts, each designed to be replaced or customized as needed.

Front-end​

The front-end of a typical Papplica application is a single-page application (SPA) built with React and TypeScript, built using Vite, a modern build tool that provides rapid development and build times.

This front-end application can itself be broken down into multiple parts:

Application Template​

Nodeblocks provides a standardized template format for specifying a front-end application, consisting of a range of common settings and components that can be defined as needed for your application. This includes:

  • Application name and description
  • Page and navigation component configuration
  • API client configuration
  • Logging
  • Internationalization
  • Other external services configuration

These are injected into the front-end application at startup, using a method similar to Dependency Injection. Because the template only requires configurations to follow the interfaces we provide, by extending or implementing the interfaces, you can easily replace or customize any part of the internal logic of the application.

Front-end Framework​

The Front-end Framework is a collection of reusable components and design patterns that are shared between applications. It is provided as a NPM package that can be installed and used in any React application: @basaldev/blocks-frontend-framework.

This includes:

  • Blocks: Reusable components that can be used to build applications.
  • Design System: A set of design guidelines and components that ensure a consistent look and feel across applications.

Blocks are the building blocks of the front-end application, and are typically used by developers to build new features or pages. For example, Login is a block that provides a login form, while SideMenuUserInfo is a block that displays user information for use in the side menu.

To be specific, a Block is a React component with a set of standard props that can be placed in a number of standard locations within the template. These props include methods for changing the title of the page, fetching info about other blocks, and navigation. By using this standard interface, blocks can be easily swapped out or replaced with custom components.

Blocks receive data from the back-end via API clients, which are injected into the block at application startup. This eliminates hardcoding of API endpoints and allows for easy switching between different back-end services.

Design System is a set of design guidelines and components that ensure a consistent look and feel across applications. This includes:

  • Styles for typography, colors, and spacing. These are defined as css variables, allowing them to be customized at runtime.
  • Basic components like buttons, inputs, and cards.
  • Composite components like forms, modals, and tables.
  • Business Logic components, such as a login form or a user profile page.

Generally, Design system components are fully controlled by the framework, and all state is managed by Blocks in the framework. This allows these components to be swapped out as well. To put it another way, in an MVC architecture, the Design System is the View, and the Blocks are the Controller. (The Model is handled by the Front-end SDK's API clients, which are injected into the Blocks. See below.)

Front-end SDK​

The Front-end SDK is a set of front-end utilities and classes provided by Basal for building applications independent of front-end technology being used.Unlike the Framework, which is specific to React, the SDK is designed to be used with any technology or stack that communicates with Nodeblocks services.

It is provided as a NPM package that can be installed and used in any javascript application: @basaldev/blocks-frontend-sdk.

API Clients are a set of classes that handle communication with the back-end services provided by Nodeblocks. These provide a simple interface for making requests, and handle things like authentication and error handling. These clients are injected with a session management class, allowing the underlying session logic to be replaced.

File Upload Handling is a set of classes that handle file uploads and downloads, primarily to Google Cloud Storage.

Session Management is a set of classes that handle user sessions, including both cookies and local storage. These are used by the API clients to manage authentication tokens and other session data.

Back-end​

The back-end of a typical Papplica application is a set of Node.js microservices that provide the business logic and data access for the application. These services are built using Nodeblocks, which provides a set of prefabricated libraries for common use cases, such as user authentication, product management, and so on.

These are provided as NPM packages that can be installed and used in Node.js applications: @basaldev/blocks-xxx-service.

For more details, see both the Back-end SDK and the list of Microservices provided by Nodeblocks.

Deployment​

The deployment of back-end services for a Papplica application is handled by Nodeblocks Cloud, which provides a set of tools and services for deploying, scaling, and monitoring Node.js applications. For more details, see the Nodeblocks Cloud documentation.

The front-end of a Papplica application is typically deployed to a CDN or static file server, such as Google Cloud Storage, AWS S3, or similar service.

Database​

The database for a Papplica application is typically a NoSQL database, such as MongoDB. For Papplica, we use MongoDB Atlas as our recommended database service, which provides a fully managed MongoDB database with automatic scaling and backups. This service also provides methods of text search, geospatial queries, and other advanced features, which Nodeblocks services can take advantage of.

External Services​

Depending upon the application, other external services may be required, such as payment gateways, upload buckets, email services, and so on. These services can be integrated with the application using the Back-end SDK provided by Nodeblocks, along with customizations on Back-end and Front-end services.

As an example, the payment system in Geekle is integrated with Stripe, with customized logic for handling subscriptions and payments, locking users out of the system if payment fails, and so on.

Monitoring​

Monitoring for a Papplica application can be achieved using a combination of tools and services, such as:

  • Google Cloud Monitoring: For monitoring the performance of the application, including response times, error rates, and so on.
  • Sentry: For monitoring errors and exceptions in the application, and providing alerts and notifications when issues occur. These are implemented using customized code where needed in Papplica's prototypes, and can be used as reference or removed as desired.

CI/CD Pipelines​

CI/CD Pipelines for a Papplica application are provided by Github Actions, which automates the build, test, and deployment process for the application. This includes running tests, building the application, and deploying it an environment.

warning

As the current point in time, CI/CD is not supported for backend applications deployed via Nodeblocks Cloud. This is a feature that is planned for the future.