filmov
tv
Vanilla JavaScript VS JS frameworks

Показать описание
1. Load speed - Static is faster, especially for a single page app
2. Upgrading - Static wins - No version compatibility issues
3. Environment - Static wins - No Specific environment required
4. SEO - Pre-render is required for compiled app
5. Installation - Static wins - No installation necessary
6. Readability - JS Frameworks win with documentation as well
7. Standards - JS Frameworks win with everyone onBoard with the app architecture
Would You Use Vanilla JavaScript (No Framework) On a Project? - @htmlallthethings
RV Park website loading comparison results:
- Home page
React Version:
28 requests
4.1 kB transferred
2.2 MB resources
Finish: 5.64 s
DOMContentLoaded: 691 ms
Load: 704 ms
VS
Vanilla JavaScript:
15 requests
3.8 kB transferred
1.3 MB resources
Finish: 842 ms
DOMContentLoaded: 345 ms
Load: 352 ms
----------------------------------------------------------------------
- Properties page (Includes Google Map iFrame)
React Version:
62 requests
637 kB transferred
7.2 MB resources
Finish: 5.90 s
DOMContentLoaded: 634 ms
Load: 2.51 s
VS
Vanilla JavaScript:
50 requests
737 kB transferred
6.1 MB resources
Finish: 4.48 s
DOMContentLoaded: 667 ms
Load: 2.86 s
----------------------------------------------------------------------
- Information Page (OnLoad 2 GET methods: "Weather API" & "RSS Feed API")
React Version:
41 requests
43.5 kB transferred
2.3 MB resources
Finish: 6.06 s
DOMContentLoaded: 939 ms
Load: 2.37 s
VS
Vanilla JavaScript:
32 requests
26.3 kB transferred
1.4 MB resources
Finish: 2.45 s
DOMContentLoaded: 565 ms
Load: 1.97 s
----------------------------------------------------------------------
- Reservation page (OnLoad 1 GET method: "Message API" )
React Version:
24 requests
4.6 kB transferred
1.3 MB resources
Finish: 1.27 s
DOMContentLoaded: 594 ms
Load: 747 ms
VS
Vanilla JavaScript:
19 requests
50.7 kB transferred
708 kB resources
Finish: 950 ms
DOMContentLoaded: 421 ms
Load: 430 ms
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Online portfolio website loading comparison results:
(The Vanilla JavaScript version is only one page, called a Single Page Application or SPA)
- Landing page
React Version:
23 requests
206 kB transferred
3.2 MB resources
Finish: 2.08 s
DOMContentLoaded: 1.05 s
Load: 1.55 s
VS
Vanilla JavaScript:
78 requests
168 kB transferred
8.9 MB resources
Finish: 6.11 s
DOMContentLoaded: 1.05 s
Load: 4.11 s
----------------------------------------------------------------------
- Application page (YouTube iFrame included)
React Version:
37 requests
665 kB transferred
4.4 MB resources
VS
Vanilla JavaScript:
7 requests
160 kB transferred
185 kB resources
----------------------------------------------------------------------
- Blog page (YouTube iFrame included, typically.)
React Version:
6 requests
156 kB transferred
572 kB resources
VS
Vanilla JavaScript:
4 requests
32.3 kB transferred
37.3 kB resources
----------------------------------------------------------------------
- Contact page (Basic HTML Contact form)
React Version:NO DATA TRANSFERRED
Vanilla JavaScript:NO DATA TRANSFERRED