App Demo - App Bundles' Analysis Report - App Documentation
A Spreadsheet Application built with Angular v11 using ngLibrary as a starting code template, for its Enterprise Reactive architecture.
Have fun!
Pure mathematics is, in its way, the poetry of logical ideas. - Albert Einstein
Spreadsheet
= (A1 + B1)*10
=
, no spaces before= Math.round(a1 + b2)
The data module is done with redux, so if you have the Redux devtools installed in your browser, you can play around. Otherwise, open the Chrome/Safari/What have you Devtools for the Console. Every action is logged there with pretty style.
This project is based on ngLibrary therefore it uses ngLibrary's core programming values:
To learn more about the ground floor architectural patterns used in this application, check out ngLibrary's Readme. This project follows its Enterprise programming patterns. The readme explains the rudimentary patterns and their corresponding programming values.
The Spreadsheet is designed to minimize memory consumption both in the JS heap and in the rendered UI's HTML. It uses CSS Grid and saves spreadsheet's rows and columns, not a value for every spreadsheet cell. As you enter data into the Spreadsheet, the cell values are then created and stored in the application state.
Never the less, there is plenty of room for improvement. A "cache" hash-map of 1:1 look-up can improve the rendering of the spreadsheet (ie expression evaluation). Could stop lazily loading the SpreadsheetViewModule, and just import it directly into AppModule. Also, can delete cells from app state as the values are cleared. And more! With its current design, additional pipes can be added to "format" the cells look. The formatting could be kept separate from the cell values stored, then applied at the end of the binded UI pipe.
This project's documentation is generated with Compodoc. You can view any time, online, right here.
When working locally, you can watch/serve the files with this command:
$ npm run serve-docs
In not re-inventing the wheel, ngLibrary uses these libraries in building its foundation:
@angular/cdk
@angular/flex-layout
@angular/material
@ngrx/store
@ngrx/effects
@ngrx/entity
This project uses CSS Grid via Angular Flex-layout directives.
Continuous Deployment is setup with Netlify. It automatically deploys the latest PROD build from the master
branch. See the live Demo. It uses the build-demo
script which will build the production distribution, analyze the bundles, setup the bundles report and generate documentation.
After cloning or downloading the repo's code into a folder on your computer, install the dependencies with npm i
:
$ npm i
If you haven't already, install Angular's CLI:
$ npm i -g @angular/cli
You'll need it to run the Angular Development server and build the Production version with AoT.
To run a development server locally (so you can see the app running), run:
$ ng serve
Then navigate to http://localhost:4200/
in your browser. The app will automatically reload if you change any of the source files.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
The frontend project's initial commit was generated with ngLibrary as the repository template.