alba (moon flower) is a frontend repo that integrate the build tools and frontend stacks
- install node and npm
- install yarn (optional)
Snowpack is a fast frontend build tool, designed for the modern web. JavaScript's native ES Module (ESM [1]) syntax is the magic behind Snowpack's unbundled development.
Webpack and Parcel are other option for build/packaging tool, we may still need webpack to help do some packaging work.
run npm install --save-dev snowpack to install snowpack
A Monorepository is an architectural concept, which means, instead of managing multiple repositories, keep all isolated code parts inside one repository. Keep in mind the word isolated means that monorepo has nothing in common with monolithic apps. You can keep many kinds of logical apps inside one repo; for example, a website and its iOS app.
There are lots of monorepo tools in JS world which is not surprizing, lerna is the one we chose. Lerna (named after the home of Hydra, the multi-headed beast) is a “tool for managing JavaScript projects with multiple packages”.
Other tools like nx, rush can also support monorepo development and more can refer to this article [2].
Unit test tool Jest is a JavaScript Testing Framework with a focus on simplicity. For e2e test, cypress.io is the one we chose.
Mocking backend REST API is part of testability that frontend development will need, mocker-api can help here. (previously called webpack-api-mocker)
When mocking data, Faker can be used to simulat dummy data.
js lint are well sovled problems, eslint is the one.
As a best practic, we prefer all frontend code is written in typescript. this article [3] provides a good explaination about why and there are lots of others for sure.
There are lots of debating in the community about which JS framework is the best, react, vue, and angular are the most popular and there are some new players like Svelte which has been used more and more in frontend development. Some articles about comparison of these options can be found: [4] [5] [6]
These are all good choice for building frontend application, considering the maturity of community, we choise react, and due to the high cost to switch between UI framework, we should make this serious.
Based on react, we woiuld like to have a thin, flexible layer that support the quick, efficient development, Chakra is a good choice based on our past experience. Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. With Chakara, we can easily develop new customized component, no need to include CSS to support style and theme.
State management is the most challenging work in react world. There are lots of solutions as well. Redux, Recoil and React hooks are most poluar. You can find the article [7] to explain the difference among these tools.
We choice Recoil as our state management solution. As for data application, the state related to components are flexible and will be added/removed at run time.
Routing is the ability to move between different parts of an application when a user enters a URL or clicks an element (link, button, icon, image etc) within the application. reactrouter is used to support flexible routing in web application.
micro-frontend are designed to works in micro-service architecture where the frontend app doesn't need to be physically bundled together and can dynamically load from remote site. It will increase the overall complexity. we dont prefer to introduce this at the initial phase of application deveopment, we may introduce it once the application has grown big enough. single spa is the tool we want to use to support micro-frontend.
In a simple web application, component can communicate with each other through state, while, after introducing micro-frontend, some more sophisticated mechanisim should be invovled such as in rxjs, we can use observable pattern to support communication between different remote comonents.
RxJS can help to build data streaming and responsive programming.
With Chakra, there is no need to include CSS anymore. tailwind is another option. (we dont need it in case Chakra is used.)
The most poluar frontend open source charting libraries are echarts, highcharts, ant g2.
we prefer ant g2 (bizcharts is a react encapsulation building on ant g2) due to this rich functionality and flexible grammar driven rendering technology. While, g2/bizcharts has it's own problem, the code splitting and chart update are issues we found, we may consider wrap our own chart component based on g2 or using some low level tools such as airbnb vizx to build our charting components.
Vizx is a collection of expressive, low-level visualization primitives for React, you can think it as d3 for react.
we may need to build our own data table to meet the complex requirement for data analytic applications.
Dashboard is the key feature to build a low code/no code data platform. React-Grid-Layout can help to build flexible react based layout.
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. Antoher option is react-intl provided by formatjs
With react, we usually use Axios, jQeury Ajax or window.fetch to send http request to backend, we prefer vanilla API over Axios [8].
Web API does have web socket support, while some other libraires are available as well, such as sockio, sockjs, react-use-websocket. we prefer to use vanilla API provided by most of the morden browser.
to run the project, node and yarn are required. make sure install both to run the demo.
to run the demo, you need run following commands
# at root directory of alba
yarn
# enter demo package where the demo code lives
cd packages/demo/
# prodction/development build or start server
yarn prod
yarn dev
yarn start
# start websocket
yarn websocketand you can run the same for dashboard.