Vite, typescript, alias and legacy browser support

traccar / traccar-web

Traccar GPS Tracking System

https://www.traccar.org

Apache License 2.0

787 stars 1.09k forks source link

Vite, typescript, alias and legacy browser support #1161

Closed gpproton closed 11 months ago

gpproton commented 11 months ago

Recently i noticed Traccar SPA stopped working for some older browsers after extended testing i decided to take the opportunity to introduce typescript compatibility, better legacy browser support and bundle size improvements. While i'm not sure how much of these changes are desired for traccar, i would like to commit these changes upstream.

[x] Vite support
[x] Typescript support
[x] Legacy browsers
[x] Modern polyfils
[x] Alias support

Performance: Minor or no noticeable differences.
Issues: No noticeable issue so far after testing.

Improvements in bundle size

react-scripts

---------------------------------
7.3M    build

vite reactjs

---------------------------------
3.1M    build

vite reactjs - legacy with modern polifills

---------------------------------
5.2M    build

tananaev commented 11 months ago

We would need a better description and trade-off comparison before we can consider such a drastic changes.

It also seems like you have multiple changes that could be done separate. Those need to be broken down into different pull requests.

gpproton commented 11 months ago

Ok i will seperate Vite, typescript, alias and legacy browser support changes into different pull request.

On the reasons for the changes, below are some of the reasons.

To allow future typescript contributions and gradually switching all javascript code to typescript
To fix current issues with older browsers, especially for organizations or individuals with older devices.
Improving/simplify path declaration using tsconfig alias e.g (@/reactHelper) instead of ../.../reactHelper
Vite usage is allows smaller build size and to work with older browsers

I'm sure there will be other benefit in future, due to using vite and typescript. I personally wanted this for myself but the changes can be beneficial for all so i refer to submit a pull request.

tananaev commented 11 months ago

OK, but I would recommend discussing every change separately before actually making the change. For example, I'm not sure that we want to move to typescript. It's unclear how Vite helps with supporting older browsers. etc

gpproton commented 11 months ago

On the issue of trade off, there's no noticeable tradeoff at least from my perspective as there's no additional feature only build changes and error can be fixed.

tananaev commented 11 months ago

That's not really a serious attitude to a fair comparison. For example, I read that there are some known issues in Vite that have not been fixed for years.

gpproton commented 11 months ago

OK, but I would recommend discussing every change separately before actually making the change. For example, I'm not sure that we want to move to typescript. It's unclear how Vite helps with supporting older browsers. etc

Sure after breaking down the pull request better discussion can proceed.

Typescript compatibility is what's being added, code don't need to be changed to typescript immediately as I'm enabling support for JS and JSX.
For older browsers since Vite is used to add typescript support we can as well take advantage of @vitejs/plugin-legacy which is a simplified to use Browserslist with modern poly-fills. All to avoid complex Webpack setup.

gpproton commented 11 months ago

That's not really a serious attitude to a fair comparison. For example, I read that there are some known issues in Vite that have not been fixed for years.

I am not sure about this point, but i can look more into the potential issues if there any doubt from your end before moving forward with this.

tananaev commented 11 months ago

Perfect, thanks.