search

krausest / js-framework-benchmark

A comparison of the performance of a few popular javascript frameworks
https://krausest.github.io/js-framework-benchmark/
Apache License 2.0
6.58k stars 814 forks source link

Add OpenUI5 #1467

Closed albertlast closed 7 months ago

albertlast commented 7 months ago

I'm not sure if it a keyed or non-keyed framework, also it generate some error while running but the test are succeding --> so it's fine?

krausest commented 7 months ago

I get the following error in the browser console when I try to run you framework:

Failed to load resource: the server responded with a status of 404 (Not Found)
library.css:1 

       Failed to load resource: the server responded with a status of 404 (Not Found)
ui5loader-dbg.js:1391 

       Failed to load resource: the server responded with a status of 404 (Not Found)
je @ ui5loader-dbg.js:1391
index.html:1 Uncaught (in promise) ModuleError: Failed to resolve dependencies of 'ui5/benchmark/element/MyTable.js'
 -> 'sap/m/table.js': failed to load 'sap/m/table.js' from ./dist/resources/sap/m/table.js: 404 - Not Found
    at we (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:6645)
    at ge.failWith (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:4709)
    at http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:16843
    at Oe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:15309)
    at De (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:16797)
    at Object.Me [as define] (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:17870)
    at ui5/benchmark/element/MyTable.js (http://localhost:8080/frameworks/non-keyed/openui5/dist/Component-preload.js:32:8)
    at Ie (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:13965)
    at qe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:11945)
    at Object.Se [as requireSync] (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:19223)
Caused by: ModuleError: failed to load 'sap/m/table.js' from ./dist/resources/sap/m/table.js: 404 - Not Found
    at we (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:6645)
    at ge.failWith (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:4709)
    at qe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:13203)
    at Oe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:15205)
    at De (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:16797)
    at Object.Me [as define] (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:17870)
    at ui5/benchmark/element/MyTable.js (http://localhost:8080/frameworks/non-keyed/openui5/dist/Component-preload.js:32:8)
    at Ie (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:13965)
    at qe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:11945)
    at Object.Se [as requireSync] (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:19223)
Caused by: XHRLoadError: 404 - Not Found
    at n (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:9222)
    at XMLHttpRequest.<anonymous> (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:9475)
    at je (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:9567)
    at qe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:13178)
    at Oe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:15205)
    at De (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:16797)
    at Object.Me [as define] (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:17870)
    at ui5/benchmark/element/MyTable.js (http://localhost:8080/frameworks/non-keyed/openui5/dist/Component-preload.js:32:8)
    at Ie (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:13965)
    at qe (http://localhost:8080/frameworks/non-keyed/openui5/dist/resources/sap-ui-core.js:10:11945)

It fails to load table.js and layout.css according to the network tab.

albertlast commented 7 months ago

after running "npm run build-prod" is the ./dist/resources/sap/m/table.js the file existing on your side?

krausest commented 7 months ago

No, the file is not present, but there's a directory /dist/resources/sap/m/table/

albertlast commented 7 months ago

yea the directory is normal, is the app runnin when run "npm run build-dev"? grafik

js-framework-benchmark-openui5@1.0.0 build-dev
> ui5 serve -o index.html

info graph:helpers:ui5Framework Using OpenUI5 version: 1.119.1
Server started
URL: http://localhost:8081
albertlast commented 7 months ago

@krausest i hope the last commit fix the issue.

krausest commented 7 months ago

Good news is that I can open it in the browser. The bad news is that the html structure of the table isn't what the benchmark requires. Currently the following check fails:

npm run isKeyed -- --headless true non-keyed/openui5
ERROR in html structure for tr
  expected: [
  'td', 'td',
  'a',  'td',
  'a',  'span',
  'td'
]
  actual  : [
  'TD',   'DIV', 'DIV',
  'DIV',  'DIV', 'DIV',
  'SPAN', 'TD',  'A',
  'TD',   'A',   'SPAN'
]

Can you fix the markup? (There are some other minor markups errors like the "Abmelden" link, the table headline "Product", "Supplier", "delete" and "Keine Daten" that should be removed too).

albertlast commented 7 months ago

isKeyed script is not part of the projects file? i try to get structre near to it, but got now three test not running:

================================
The following benchmarks failed:
================================
Executing frameworks/non-keyed/openui5 and benchmark 02_replace1k failed: checkElementContainsText pierce/tbody>tr:nth-of-type(1)>td:nth-of-type(1) failed. expected 1001, but was 1
Executing frameworks/non-keyed/openui5 and benchmark 05_swap1k failed: checkElementContainsText pierce/tbody>tr:nth-of-type(999)>td:nth-of-type(1) failed. expected 2, but was 999
Executing frameworks/non-keyed/openui5 and benchmark 24_run5-memory failed: checkElementContainsText pierce/tbody>tr:nth-of-type(1000)>td:nth-of-type(1) failed. expected 2000, but was 1000
run was not completely sucessful Benchmarking failed with errors

maybe when i look tomorrow into the code i see the problems

albertlast commented 7 months ago

Okay fixed based on this, it's look like this a keyed approache -> changed the directory

krausest commented 7 months ago

Better, but not done yet :) The following errors are reported:

css class not correct. Expected for first td to be col-md-1 but was sapMListTblCell,sapMTblCellFocusable
ERROR: Framework openui5-vERROR: Not found in package-lock-keyed html is not correct
Keyed test for swap failed. Expected at least 1 added and 1 removed TR, but there were 0 added and 0 removed
Keyed test for create rows failed. Expected that 1000 TRs should be removed and added, but there were 0 added TRs and 0 were removed
Keyed test for remove failed. Expected that the dom node for the 2nd row would be removed, but it wasn't
openui5-vERROR: Not found in package-lock-keyed is non-keyed for 'run benchmark' and non-keyed for 'remove row benchmark' and non-keyed for 'swap rows benchmark' . It'll appear as non-keyed in the results
ERROR: Framework openui5-vERROR: Not found in package-lock-keyed is not correctly categorized
rebuild-check-single failed for keyed/openui5
ERROR: Rebuilding  keyed/openui5 was not successful

The first line shows that the CSS classes of the table isn't yet correct (the benchmark requires that all html and styles are comparable). The implementation isn't keyed, such that it should be moved back to the non-keyed directory (https://github.com/krausest/js-framework-benchmark#keyed-vs-non-keyed-frameworks). The frameworkVersionFromPackage isn't correct. If must reference a npm package such that its version is display. Would it be @ui5/cli then?

albertlast commented 7 months ago

The version of framework is standing here; https://github.com/krausest/js-framework-benchmark/pull/1467/files#diff-76043f0172125963ff8029cfb703ab5d06f8248fcebb35b69d5ede726f8d6cfa -> 1.119.1 so it's got his own way to do his things.

krausest commented 7 months ago

No problem: Just replace frameworkVersionFromPackage with "frameworkVersion": "1.119.1" in package.json.

albertlast commented 7 months ago

i guess you mean td and not table tag? since the error mention classes are in the td so i changed it

krausest commented 7 months ago

We're getting closer. The version is fine now. The table still doesn't look right. Please add the following css classes to the table element "table table-hover table-striped test-data"

For a tr, please make sure that the elements correspond to the following structure and use (at least) those classes. The aria-hidden attribute must be present (it's currently missing in openui5) Screenshot 2023-10-31 at 8 09 09 PM

albertlast commented 7 months ago

well the framework suprised me, since i already added the table classes, but they got placed not in the table tag... so hardcoded the stuff and also added the classes/aria to the other elements.

The test page looks now like the same as the others: grafik

krausest commented 7 months ago

That worked. I ran it with chrome 119 (all other results are still from chrome 118 until I find the time to run all frameworks on chrome 119). The performance doesn't look too bright: