Hi, I’ve just written an article about how I implemented a custom solution for creating view components in my Middleman site. I thought it might be an interesting read for others and you can find the article here: https://www.jeffreyknox.dev/blog/building-view-components-in-middleman/
Very interesting approach! Never thought about this way of setting things up.
Btw to load all Ruby files in a folder (or any folder) you can simply use this one liner:
Dir['./*/*.rb'].each { |file| load file }
1 Like
Ah yes, that is much better, thank you!
Yeah I wanted to try this out to see how it works because we have a big Middleman site at work and it can be a challenge to update view code across over 7000 pages and not break anything. I’m hoping this approach can clean things up a lot and centralise large chunks of code.
1 Like
How much advantage do you have, speed wise, of this approach vs using partials? Mainly talking about rendering html, not the CSS / JS side of things.
I first started looking at the effect of partials on our overall site build time at work because we had so many pages and some partials were used on almost every page without any locals passed in and some partials only had a few variations because of locals but still were used thousands of times. I knew that the partials would likely be slow and thought that if I could cache them the first time they were called and then fetch from cache then that could be faster. In that case I ended up using a gem called mini_cache to do this and ran some benchmarks to test the difference:
5000 times
user system total real
Regular Partial Call 40.095074 0.564424 40.659498 (58.384067)
Cached Partial Call 0.020169 0.000313 0.020482 (0.032653)
1000 times
user system total real
Regular Partial Call 8.111274 0.115040 8.226314 (11.342575)
Cached Partial Call 0.002563 0.000117 0.002680 (0.006241)
500 times
user system total real
Regular Partial Call 4.130810 0.078133 4.208943 (5.717671)
Cached Partial Call 0.009635 0.000226 0.009861 (0.010963)
100 times
user system total real
Regular Partial Call 0.612392 0.009586 0.621978 (0.697514)
Cached Partial Call 0.008822 0.000213 0.009035 (0.010506)
At the time we were using a fairly high end build machine with 8 cores and 16GB mem and this reduced our build time by around 40 seconds: ~180 seconds to ~140 seconds.
For this experiment on my personal site, with the size of my site I can’t imagine the time savings are going to be noticeable but I thought I’d benchmark the timeline component example I talked about in the blog article to see what the different was:
5000 times
user system total real
Regular Partial Call 6.132742 0.025960 6.158702 (6.191905)
Component Call 0.043828 0.000321 0.044149 (0.044413)
So again it looks like a lot faster although it’s interesting the time for 5000 partial calls on the work site which is a much larger code base. That benchmark was also on an earlier version 4 of Middleman so maybe that combination had an even more detrimental effect of partial rendering.
I should add that I ran the company benchmarks on my work laptop and the benchmarks for the component on my own personal laptop so that will also account for some differences but I think the important finding is the differences between partials and the alternative that were run as direct comparisons.