First Frui.ts application v0

Install

For quick start use ours Frui.ts template for CRA

npx create-react-app my-app --template @frui.ts

# or

yarn create react-app my-app --template @frui.ts

Run dev server

After install you can goes to app folder cd my-app and run yarn start command for start development server.

At this point, the App home page should be up and running. Let's test it by opening the browser at the following URL:

http://localhost:3000

Project structure

├── src                   <-   directory with source files
│   ├── assets            <-   static assets, like icons, images, styles
│   └── repositories      <-   repositories classes -> layer for API calls
│   └── services          <-   singleton classes -> common logic for application as authorization and authentication
│   └── viewModels        <-   viewModels classes for app strcture and business logic
│   └── views             <-   react components creating app visual for users 
├── public
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── node_modules
├── package.json 
└── README.md

Meaning of parts

Repositories

In Frui.ts applications we use to Repository pattern. The idea with this pattern is to have a generic abstract way to work with data layer without being bother to specific API.

Repository for Frontend application is typically represented as set of API calls which are common for specific domain. The domain could be single entity or business case.

Repository has data connector which ensures connection to specific API or other data sources like local storage etc.

If you are familiar with REST API. You can use ours package @frui.ts/apiclient which helps us with abstraction for REST API calls.

Services

The idea of services is separete the responsibilities into small pieces, where every has only one task to do. In Frui.ts we represented thems as classes instancied as singletons. We then use these pieces inside ViewModels to share common logic.

In this example you can see InitializationService whichs only responsibility is to startup of application. Another example could be Authentication service which deal with user login, or EnumerationService to be responsible to work with system enums.

ViewModels

Since the Frui.ts applications should be ViewModel-driven, we need to properly design the application structure within VMs. You need to change your thinking about application structure from View first approach to ViewModels first.

You were probably used to start create app structure with React components. For example if you used React router library you create app structure by immersing the Route components into each other.

In Frui.ts we do it similar, but different. App structure is created by special type of ViewModels which we called Screens.

Screens you can find out inside @frui.ts/screens package. This package provides you four basics parents for your own Screens. From this four parents you can create every app structure which you could imagine.

Views

Finally the most known part of frontend applications. Views layer in Frui.ts is represented by React functional components. The only think which makes difference between basic React component and View component is the connection with ViewModel. This connection is created by registerView function which comes from @frui.ts/views package. You can specify which View belongs to which ViewModel. Please remember that most ViewModels have only one view, but this is not the rule. Every ViewModel could have any number of Views and from the opposite, every View could have any number of ViewModels which has same interfaces.