git.iko.soy/typeable/elm-ui
on master help sign in
add inline styles and html exampels to basic benchmark
2f910a8Matthew Griffith
benchmarks/elm.json+3−3
compare with master
unifiedsplit
@@ -11,11 +11,11 @@
11 "elm/core": "1.0.2",
11 "elm/core": "1.0.2",
12 "elm/html": "1.0.0",
12 "elm/html": "1.0.0",
13 "elm/json": "1.1.3",
13 "elm/json": "1.1.3",
14− "elm/time": "1.0.0"
14+ "elm/time": "1.0.0",
15+ "elm/virtual-dom": "1.0.2"
15 },
16 },
16 "indirect": {
17 "indirect": {
17− "elm/url": "1.0.0",
18+ "elm/url": "1.0.0"
18− "elm/virtual-dom": "1.0.2"
19 }
19 }
20 },
20 },
21 "test-dependencies": {
21 "test-dependencies": {
benchmarks/src/Bench.elm → benchmarks/src/Baseline.elmrenamed+3−3
@@ -1,9 +1,9 @@
1−module Bench exposing (bench)
1+module Baseline exposing (bench)
2
2
3{-| -}
3{-| -}
4
4
5+import Benchmark.Render
5import Html
6import Html
6−import Render
7
7
8
8
9type Msg
9type Msg
@@ -11,7 +11,7 @@ type Msg
11 | Tick Float
11 | Tick Float
12
12
13
13
14−bench : Render.Benchmark Int Msg
14+bench : Benchmark.Render.Benchmark Int Msg
15bench =
15bench =
16 { name = "Baseline"
16 { name = "Baseline"
17 , init = 0
17 , init = 0
benchmarks/src/Render.elm → benchmarks/src/Benchmark/Render.elmrenamed+3−2
@@ -1,6 +1,7 @@
1−port module Render exposing (Benchmark, toProgram)
1+port module Benchmark.Render exposing (Benchmark, toProgram)
2
2
3+{-| This is the rendering harness. The actual cases are in `src`.
3−{-| -}
4+-}
4
5
5import Browser
6import Browser
6import Browser.Events
7import Browser.Events
benchmarks/src/ManyElements.elmnew file+371
@@ -0,0 +1,371 @@
1+module ManyElements exposing
2+ ( elmUI1024
3+ , elmUI128
4+ , elmUI2048
5+ , elmUI24
6+ , elmUI256
7+ , elmUI4096
8+ , elmUI512
9+ , elmUI64
10+ , elmUI8192
11+ , viewHtml1024
12+ , viewHtml128
13+ , viewHtml2048
14+ , viewHtml24
15+ , viewHtml256
16+ , viewHtml4096
17+ , viewHtml512
18+ , viewHtml64
19+ , viewHtml8192
20+ , viewInline1024
21+ , viewInline128
22+ , viewInline2048
23+ , viewInline24
24+ , viewInline256
25+ , viewInline4096
26+ , viewInline512
27+ , viewInline64
28+ , viewInline8192
29+ )
30+
31+{-| -}
32+
33+import Benchmark.Render
34+import Element exposing (..)
35+import Element.Background as Background
36+import Element.Font as Font
37+import Html
38+import Html.Attributes
39+
40+
41+
42+{- START BENCHMARKS -}
43+
44+
45+elmUI24 : Benchmark.Render.Benchmark Model Msg
46+elmUI24 =
47+ elmUI "elmUI24" 24
48+
49+
50+elmUI64 : Benchmark.Render.Benchmark Model Msg
51+elmUI64 =
52+ elmUI "elmUI64" 64
53+
54+
55+elmUI128 : Benchmark.Render.Benchmark Model Msg
56+elmUI128 =
57+ elmUI "elmUI128" 128
58+
59+
60+elmUI256 : Benchmark.Render.Benchmark Model Msg
61+elmUI256 =
62+ elmUI "elmUI256" 256
63+
64+
65+elmUI512 : Benchmark.Render.Benchmark Model Msg
66+elmUI512 =
67+ elmUI "elmUI512" 512
68+
69+
70+elmUI1024 : Benchmark.Render.Benchmark Model Msg
71+elmUI1024 =
72+ elmUI "elmUI1024" 1024
73+
74+
75+elmUI2048 : Benchmark.Render.Benchmark Model Msg
76+elmUI2048 =
77+ elmUI "elmUI2048" 2048
78+
79+
80+elmUI4096 : Benchmark.Render.Benchmark Model Msg
81+elmUI4096 =
82+ elmUI "elmUI4096" 4096
83+
84+
85+elmUI8192 : Benchmark.Render.Benchmark Model Msg
86+elmUI8192 =
87+ elmUI "elmUI8192" 8192
88+
89+
90+
91+{- Normal Html -}
92+
93+
94+viewHtml24 : Benchmark.Render.Benchmark Model Msg
95+viewHtml24 =
96+ viewHtml "viewHtml24" 24
97+
98+
99+viewHtml64 : Benchmark.Render.Benchmark Model Msg
100+viewHtml64 =
101+ viewHtml "viewHtml64" 64
102+
103+
104+viewHtml128 : Benchmark.Render.Benchmark Model Msg
105+viewHtml128 =
106+ viewHtml "viewHtml128" 128
107+
108+
109+viewHtml256 : Benchmark.Render.Benchmark Model Msg
110+viewHtml256 =
111+ viewHtml "viewHtml256" 256
112+
113+
114+viewHtml512 : Benchmark.Render.Benchmark Model Msg
115+viewHtml512 =
116+ viewHtml "viewHtml512" 512
117+
118+
119+viewHtml1024 : Benchmark.Render.Benchmark Model Msg
120+viewHtml1024 =
121+ viewHtml "viewHtml1024" 1024
122+
123+
124+viewHtml2048 : Benchmark.Render.Benchmark Model Msg
125+viewHtml2048 =
126+ viewHtml "viewHtml2048" 2048
127+
128+
129+viewHtml4096 : Benchmark.Render.Benchmark Model Msg
130+viewHtml4096 =
131+ viewHtml "viewHtml4096" 4096
132+
133+
134+viewHtml8192 : Benchmark.Render.Benchmark Model Msg
135+viewHtml8192 =
136+ viewHtml "viewHtml8192" 8192
137+
138+
139+
140+{- Inline Html -}
141+
142+
143+viewInline24 : Benchmark.Render.Benchmark Model Msg
144+viewInline24 =
145+ viewInline "viewInline24" 24
146+
147+
148+viewInline64 : Benchmark.Render.Benchmark Model Msg
149+viewInline64 =
150+ viewInline "viewInline64" 64
151+
152+
153+viewInline128 : Benchmark.Render.Benchmark Model Msg
154+viewInline128 =
155+ viewInline "viewInline128" 128
156+
157+
158+viewInline256 : Benchmark.Render.Benchmark Model Msg
159+viewInline256 =
160+ viewInline "viewInline256" 256
161+
162+
163+viewInline512 : Benchmark.Render.Benchmark Model Msg
164+viewInline512 =
165+ viewInline "viewInline512" 512
166+
167+
168+viewInline1024 : Benchmark.Render.Benchmark Model Msg
169+viewInline1024 =
170+ viewInline "viewInline1024" 1024
171+
172+
173+viewInline2048 : Benchmark.Render.Benchmark Model Msg
174+viewInline2048 =
175+ viewInline "viewInline2048" 2048
176+
177+
178+viewInline4096 : Benchmark.Render.Benchmark Model Msg
179+viewInline4096 =
180+ viewInline "viewInline4096" 4096
181+
182+
183+viewInline8192 : Benchmark.Render.Benchmark Model Msg
184+viewInline8192 =
185+ viewInline "viewInline8192" 8192
186+
187+
188+
189+{- END BENCHMARKS -}
190+
191+
192+type alias Model =
193+ { index : Int
194+ , numberOfElements : Int
195+ , elements : List Int
196+ }
197+
198+
199+type Msg
200+ = Refresh
201+ | Tick Float
202+
203+
204+{-| -}
205+elmUI : String -> Int -> Benchmark.Render.Benchmark Model Msg
206+elmUI name count =
207+ { name = name
208+ , init =
209+ { index = 0
210+ , numberOfElements = count
211+ , elements = List.range 0 (count - 1)
212+ }
213+ , view =
214+ view
215+ , update =
216+ \msg model ->
217+ case msg of
218+ Refresh ->
219+ if model.index > model.numberOfElements then
220+ { model | index = 0 }
221+
222+ else
223+ { model | index = model.index + 1 }
224+
225+ Tick i ->
226+ if model.index > model.numberOfElements then
227+ { model | index = 0 }
228+
229+ else
230+ { model | index = model.index + 1 }
231+ , tick = Tick
232+ , refresh = Refresh
233+ }
234+
235+
236+view model =
237+ Element.layout []
238+ (Element.column [ spacing 8, centerX ]
239+ (List.map (viewEl model.index) model.elements)
240+ )
241+
242+
243+viewEl selectedIndex index =
244+ el
245+ [ Background.color
246+ (if selectedIndex == index then
247+ pink
248+
249+ else
250+ white
251+ )
252+ , Font.color
253+ (if selectedIndex /= index then
254+ pink
255+
256+ else
257+ white
258+ )
259+ , padding 24
260+ ]
261+ (text "Hello!")
262+
263+
264+white =
265+ rgb 1 1 1
266+
267+
268+pink =
269+ rgb255 240 0 245
270+
271+
272+{-| -}
273+viewHtml : String -> Int -> Benchmark.Render.Benchmark Model Msg
274+viewHtml name count =
275+ { name = name
276+ , init =
277+ { index = 0
278+ , numberOfElements = count
279+ , elements = List.range 0 (count - 1)
280+ }
281+ , view =
282+ \model ->
283+ Html.div []
284+ [ Html.div []
285+ (List.map (viewHtmlElement model.index) model.elements)
286+ ]
287+ , update =
288+ \msg model ->
289+ case msg of
290+ Refresh ->
291+ if model.index > model.numberOfElements then
292+ { model | index = 0 }
293+
294+ else
295+ { model | index = model.index + 1 }
296+
297+ Tick i ->
298+ if model.index > model.numberOfElements then
299+ { model | index = 0 }
300+
301+ else
302+ { model | index = model.index + 1 }
303+ , tick = Tick
304+ , refresh = Refresh
305+ }
306+
307+
308+viewHtmlElement selectedIndex index =
309+ Html.div
310+ [ Html.Attributes.class
311+ (if selectedIndex == index then
312+ "white"
313+
314+ else
315+ "pink"
316+ )
317+ ]
318+ [ Html.text "Hello!" ]
319+
320+
321+{-| -}
322+viewInline : String -> Int -> Benchmark.Render.Benchmark Model Msg
323+viewInline name count =
324+ { name = name
325+ , init =
326+ { index = 0
327+ , numberOfElements = count
328+ , elements = List.range 0 (count - 1)
329+ }
330+ , view =
331+ \model ->
332+ Html.div []
333+ [ Html.div []
334+ (List.map (viewInlineHtmlElement model.index) model.elements)
335+ ]
336+ , update =
337+ \msg model ->
338+ case msg of
339+ Refresh ->
340+ if model.index > model.numberOfElements then
341+ { model | index = 0 }
342+
343+ else
344+ { model | index = model.index + 1 }
345+
346+ Tick i ->
347+ if model.index > model.numberOfElements then
348+ { model | index = 0 }
349+
350+ else
351+ { model | index = model.index + 1 }
352+ , tick = Tick
353+ , refresh = Refresh
354+ }
355+
356+
357+viewInlineHtmlElement selectedIndex index =
358+ Html.div
359+ (if selectedIndex == index then
360+ [ Html.Attributes.style "background-color" "rgb(240, 0, 245)"
361+ , Html.Attributes.style "color" "white"
362+ , Html.Attributes.style "padding" "24"
363+ ]
364+
365+ else
366+ [ Html.Attributes.style "background-color" "white"
367+ , Html.Attributes.style "color" "rgb(240, 0, 245)"
368+ , Html.Attributes.style "padding" "24"
369+ ]
370+ )
371+ [ Html.text "Hello!" ]