Skip to content

Commit 08b3b16

Browse files
easafeeasafe
authored
Set up benchmarks (#42)
1 parent 45eec96 commit 08b3b16

18 files changed

+72
-42
lines changed

‎.gitignore

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
/bower_components/
2-
/node_modules/
3-
/.pulp-cache/
4-
/output/
5-
/generated-docs/
6-
/.psc-package/
7-
/.psc*
1+
bower_components/
2+
node_modules/
3+
.pulp-cache/
4+
output/
5+
generated-docs/
6+
.psc-package/
7+
.psc*
88
/.purs*
9-
/.psa*
9+
.psa*
1010
dist/
1111
todo
12+
dce-output
1213

1314
npm-debug.log
1415

‎.travis.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,9 @@ script:
99
- spago test
1010
- spago -x examples.dhall build
1111
- npm run build-examples
12+
- cd benchmarks/js-framework-benchmark/keyed
13+
- npm install
14+
- npm run build
15+
- cd ../non-keyed
16+
- npm install
17+
- npm run build

‎benchmarks/js-framework-benchmark/keyed/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Flame v0.9.0</title>
5+
<title>Flame v1.0.0</title>
66
<link href="/css/currentStyle.css" rel="stylesheet" />
77
</head>
88
<body>

‎benchmarks/js-framework-benchmark/keyed/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"description": "Purescript Flame JS Benchmark",
66
"main": "index.js",
77
"js-framework-benchmark": {
8-
"frameworkVersion": "0.9.0"
8+
"frameworkVersion": "1.0.0"
99
},
1010
"scripts": {
1111
"postinstall": "spago install",
@@ -26,8 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"purescript": "0.13.8",
29-
"snabbdom-to-html": "^5.1.1",
30-
"spago": "0.16.0",
29+
"spago": "0.18.0",
3130
"webpack": "^4.44.1",
3231
"webpack-cli": "^3.3.12"
3332
}

‎benchmarks/js-framework-benchmark/keyed/packages.dhall

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,13 @@ let additions = {
1414
"web-html",
1515
"nullable",
1616
"aff",
17-
"signal",
1817
"foreign-object",
1918
"argonaut-generic"
2019
]
2120
, repo =
2221
"https://github.com/easafe/purescript-flame.git"
2322
, version =
24-
"e04514f4a03d492896f01b93c2d6e403e39d354e"
23+
"v1.0.0"
2524
}
2625
}
2726

‎benchmarks/js-framework-benchmark/keyed/src/Main.purs

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import Flame (Html, ListUpdate, QuerySelector(..), (:>))
1414
import Flame as F
1515
import Flame.Html.Attribute as HA
1616
import Flame.Html.Element as HE
17-
import Flame.Renderer.Lazy as FRL
18-
import Flame.Renderer.Key as FRK
1917

2018
import Flame.Types(NodeData)
2119

@@ -55,13 +53,16 @@ createRandomNRows n lastID = liftEffect (EU.runEffectFn2 createRandomNRows_ n la
5553
main :: Effect Unit
5654
main = F.mount_ (QuerySelector "body") {
5755
init: model :> [],
56+
subscribe: [],
5857
view,
5958
update
6059
}
61-
where model = {
62-
rows: [],
63-
lastID: 0
64-
}
60+
61+
model :: Model
62+
model = {
63+
rows: [],
64+
lastID: 0
65+
}
6566

6667
view :: Model -> Html Message
6768
view model = HE.div [HA.class' "container"] [
@@ -76,7 +77,7 @@ jumbotron :: Html Message
7677
jumbotron = HE.div [ HA.class' "jumbotron" ] [
7778
HE.div [ HA.class' "row" ] [
7879
HE.div [ HA.class' "col-md-6" ] [
79-
HE.h1_ [ HE.text "Flame 0.9.0 (keyed)" ]
80+
HE.h1_ [ HE.text "Flame 1.0.0 (keyed)" ]
8081
],
8182
HE.div [ HA.class' "col-md-6" ] [
8283
map renderActionButton buttons
@@ -105,10 +106,10 @@ buttons = [
105106
]
106107

107108
renderLazyRow :: Row -> Html Message
108-
renderLazyRow row = FRL.lazy (Just (show row.id)) renderRow row
109+
renderLazyRow row = HE.lazy (Just (show row.id)) renderRow row
109110

110111
renderRow :: Row -> Html Message
111-
renderRow row = HE.tr [ HA.class' { "danger": row.selected }, FRK.key (show row.id)] [
112+
renderRow row = HE.tr [ HA.class' { "danger": row.selected }, HA.key (show row.id)] [
112113
HE.td colMd1 [ HE.text (show row.id) ],
113114
HE.td colMd4 [ HE.a [ HA.onClick (Select row.id) ] [ HE.text row.label ] ],
114115
HE.td colMd1 [ HE.a [ HA.onClick (Remove row.id) ] removeIcon ],

‎benchmarks/js-framework-benchmark/keyed/webpack.flame.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ module.exports = {
1515
path: path.resolve(__dirname, 'dist'),
1616
filename: 'bundle.js'
1717
}
18-
};
18+
};

‎benchmarks/js-framework-benchmark/non-keyed/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>Flame v0.9.0 (non-keyed)</title>
6+
<title>Flame v1.0.0 (non-keyed)</title>
77
<link href="/css/currentStyle.css" rel="stylesheet" />
88
</head>
99

‎benchmarks/js-framework-benchmark/non-keyed/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"description": "Purescript Flame JS Benchmark",
66
"main": "index.js",
77
"js-framework-benchmark": {
8-
"frameworkVersion": "0.9.0"
8+
"frameworkVersion": "1.0.0"
99
},
1010
"scripts": {
1111
"postinstall": "spago install",
@@ -26,7 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"purescript": "0.13.8",
29-
"spago": "0.16.0",
29+
"spago": "0.18.0",
3030
"webpack": "^4.44.1",
3131
"webpack-cli": "^3.3.12"
3232
}

‎benchmarks/js-framework-benchmark/non-keyed/packages.dhall

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ let additions = {
1414
"web-html",
1515
"nullable",
1616
"aff",
17-
"signal",
1817
"foreign-object",
1918
"argonaut-generic"
2019
]
2120
, repo =
2221
"https://github.com/easafe/purescript-flame.git"
2322
, version =
24-
"e04514f4a03d492896f01b93c2d6e403e39d354e"
23+
"v1.0.0"
2524
}
2625
}
2726

2827
in upstream // overrides // additions
28+

‎benchmarks/js-framework-benchmark/non-keyed/src/Main.purs

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import Web.DOM.ParentNode(QuerySelector(..))
1616
import Flame.Application.EffectList as F
1717
import Flame.Html.Attribute as HA
1818
import Flame.Html.Element as HE
19-
import Flame.Renderer.Lazy as FRL
2019

2120
data Message =
2221
Create Int |
@@ -52,15 +51,18 @@ createRandomNRows :: Int -> Int -> Aff (Array Row)
5251
createRandomNRows n lastID = liftEffect (EU.runEffectFn2 createRandomNRows_ n lastID)
5352

5453
main :: Effect Unit
55-
main = F.mount_ (QuerySelector "body") {
54+
main = F.mount_ (QuerySelector "main") {
5655
init: model :> [],
5756
view,
57+
subscribe: [],
5858
update
5959
}
60-
where model = {
61-
rows: [],
62-
lastID: 0
63-
}
60+
61+
model :: Model
62+
model = {
63+
rows: [],
64+
lastID: 0
65+
}
6466

6567
view :: Model -> Html Message
6668
view model = HE.div [HA.class' "container"] [
@@ -75,7 +77,7 @@ jumbotron :: Html Message
7577
jumbotron = HE.div [ HA.class' "jumbotron" ] [
7678
HE.div [ HA.class' "row" ] [
7779
HE.div [ HA.class' "col-md-6" ] [
78-
HE.h1_ [ HE.text "Flame 0.9.0 (non-keyed)" ]
80+
HE.h1_ [ HE.text "Flame 1.0.0 (non-keyed)" ]
7981
],
8082
HE.div [ HA.class' "col-md-6" ] [
8183
map renderActionButton buttons
@@ -104,7 +106,7 @@ renderActionButton button = HE.div [ HA.class' "col-sm-6 smallpad" ] [
104106
]
105107

106108
renderLazyRow :: Row -> Html Message
107-
renderLazyRow row = FRL.lazy Nothing renderRow row
109+
renderLazyRow row = HE.lazy Nothing renderRow row
108110

109111
renderRow :: Row -> Html Message
110112
renderRow row = HE.tr [ HA.class' { "danger": row.selected }] [

‎docs/assets/css/site.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ h1, h2, h3, h4 {
2828
font-family: "Catamaran";
2929
}
3030

31+
3132
a {
3233
text-decoration: none;
3334
font-weight: bold;
@@ -116,17 +117,24 @@ a.direction, .menu a:not(.project-name) {
116117

117118
@media (max-width:600px) {
118119
.menu, .content {
119-
width: 100%;
120-
padding: 5px;
120+
max-width: 100%;
121+
padding: 5px 10px;
121122
}
122123
body {
123124
display: block;
124125
}
125126
div {
126127
width: 100%;
127128
display: block;
128-
position: static;
129129
}
130+
131+
p {
132+
display: block;
133+
word-wrap: break-word;
134+
max-width: 97vw;
135+
136+
}
137+
130138
}
131139

132140
.highlight .c {

‎docs/assets/img/benchmark-keyed-1.png

182 KB
Loading

‎docs/assets/img/benchmark-keyed-2.png

142 KB
Loading

‎docs/assets/img/benchmark-non-keyed-1.png

167 KB
Loading

‎docs/assets/img/benchmark-non-keyed-2.png

128 KB
Loading

‎docs/benchmarks.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,18 @@
22
layout: default
33
title: Benchmarks
44
permalink: /benchmarks
5-
---
5+
---
6+
7+
## Benchmarks
8+
9+
Flame performs comparatively to similar JavaScript or PureScript libraries in usual metrics like bundle size, initialization speed, memory usage, etc. For what it is worth, here is how it stacks against a few popular frameworks (on an old Linux Core i5 with 16GB of ram):
10+
11+
![benchmark-keyed-1](assets/img/benchmark-keyed-1.png)
12+
![benchmark-keyed-2](assets/img/benchmark-keyed-2.png)
13+
14+
![benchmark-non-keyed-1](assets/img/benchmark-non-keyed-1.png)
15+
![benchmark-non-keyed-2](assets/img/benchmark-non-keyed-2.png)
16+
17+
See also the official results at the [js web frameworks benchmark](https://krausest.github.io/js-framework-benchmark/index.html).
18+
19+
These figures should be taken with a grain of salt, however. For most applications, virtually any front-end framework is "fast" enough. Techniques like server-side rendering, caching, lazy rendering, etc go a long before we actually have to think about DOM manipulation performance.

‎docs/events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ main = do
330330

331331
* Broadcasting
332332

333-
Flame also provides a way to "broadcast" `CustomEvent`s for any listeners. `Flame.Subscription.Unsafe.CustomEvent` provides the following function
333+
Flame also provides a way to "broadcast" `CustomEvent`s for all listeners. `Flame.Subscription.Unsafe.CustomEvent` provides the following function
334334

335335
```haskell
336336
broadcast :: forall arg. SerializeState arg => EventType -> arg -> Effect Unit

0 commit comments

Comments
 (0)