Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chrisross5/supit-project

College project (Internet technology S3): 6 versions of the same web app - built and compared UX & DX: jQuery, Vue, Vue Full, React, React Full, Svelte. Deployed on Cloudflare Pages.
https://github.com/chrisross5/supit-project

bootstrap headlessui javascript jquery jquery-ui lighthouse pinia postcss react react-redux react-router react-transition-group rendering svelte sveltekit tailwindcss typescript vite vue vue-router

Last synced: about 2 months ago
JSON representation

College project (Internet technology S3): 6 versions of the same web app - built and compared UX & DX: jQuery, Vue, Vue Full, React, React Full, Svelte. Deployed on Cloudflare Pages.

Awesome Lists containing this project

README 

        
# Website hosted on Cloudflare Pages



### https://supit.k1k1.dev



-- OR --



### https://supit.pages.dev



**All versions adhere to the same design and functionality as specified in this video from my lecturer:  

https://www.youtube.com/watch?v=gmr-qoq4eBU.**  

The given specs and the video are available in this repository as well.



## Deployment



Each branch of this repository contains a different version of the website.



Hosted on Cloudflare with automatic `build` per branch on `push` or `merge`.



This branch (supit.k1k1.dev) is built with vanilla JS & custom CSS.



It's using [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/about) to provide the most consistent scores from [Lighthouse](https://developer.chrome.com/docs/lighthouse/) audits.



## Installation



`npm i` before `npm run dev` after switching to a branch with `package.json`.



All versions are configured to `npm run build` in `/dist` folder.



---



# Comparison



## DX (Developer Experience) & UX (User Experience)



### jQuery



Has more functionality at `/o-nama` and `/novost/1`



- because it utilizes `bootstrap.ScrollSpy`, which highlights navbar links based on the most visible section.

- because it utilizes `bootstrap.Carousel`, which supports swiping on touch devices.



Unlike other versions, this one does not use a `Bundler`, `TypeScript`, `PostCSS`, `Tailwind`, or `Google Material Icons`.

Instead, it uses `jQuery` and `jQueryUI`, along with `Bootstrap` and `Bootstrap Icons`.

Hopefully, I won't have to use those ever again.



### Vue



Simply the best, 10/10. The only difference between branches `vue` and `vue-full` is that the former uses lazy routing and async components (Contact.vue).

[Click to compare](https://github.com/ChrisRoss5/supit-projekt/compare/vue-full...vue).



### React



Overcomplicated with too much boilerplate. As with **Vue**, the only difference between branches `react` and `react-full` is that the former uses lazy routing and async components (Contact.tsx). [Click to compare](https://github.com/ChrisRoss5/supit-projekt/compare/react-full...react).



### Svelte



Unlike **Vue** and **React**, there's no support for `HeadlessUI`

so I had to bring functionality to `modal` and `autocomplete` components myself.

Apart from that, all **Vue**, **React** & **Svelte** functionality and design should look 100% identical from a user's perspective.

Overall, it's almost as good as **Vue** in terms of developer experience.



## Performance



Visit [supit.k1k1.dev](https://supit.k1k1.dev/) to run mobile & desktop Lighthouse tests for all projects and URLs.



These scores turn out to be the most common for **landing pages**:



  

    Version

    Mobile

    Desktop

  

  

    Performance

    Accessibility

    Best Practices

    Performance

    Accessibility

    Best Practices

  

  

    jQuery

    95

    100

    100

    99

    100

    100

  

  

    Vue, Vue Full

    87

    100

    100

    99

    100

    100

  

  

    React, React Full

    87

    100

    100

    99

    100

    100

  

  

    Svelte

    89

    100

    100

    99

    100

    100

  



For the landing page, lazy loaded versions of **Vue** and **React** score the same as their fully loaded counterparts. However, they save a significant amount of bytes (~30%).

Because the website isn't large, user experience is in all likelihood better with fully loaded versions. To find `Bytes Usage` from served files, open a report and press the `View Treemap` button below the metrics.



## Todo



- Angular version with Vite or Webpack

- [Make SvelteKit bundle all chunks into a single bundle](https://www.reddit.com/r/sveltejs/comments/rqo5o2/make_sveltekit_bundle_all_ts_files_into_a_single/) (no solution as of Jan 2023)



## Good to know



- [Rendering Glossary](https://kit.svelte.dev/docs/glossary) by SvelteKit

- [Bundler Glossary](https://webpack.js.org/glossary/) by Webpack

- [State of JS 2022](https://2022.stateofjs.com/)

- [State of CSS 2022](https://2022.stateofcss.com/)