A PROD ready website developed in 100% elm

Show and Tell
1 
The purpose of this website is to provide MHC's Truck Sales
team with a  super fast search/filter trucks tool that 
gives the results instantly and this is done 100% in elm 
and other elm packages like elm-ui

Notice how all of the filters gets recounted upon
applying different filters and checkout how sorting options works

You can try it @:

https://mhctrucksmartsearch.azurewebsites.net/

Packages used:
      Elm-UI (100% elm-ui , no CSS other than just 
                    in-line style for sticky hearder)
     List-Extra
     Maybe-Extra
     elm-money
     json-extra
     unique-list
10 Likes
2

It’s great to see elm-ui in production! Is the entire site in Elm, like the view truck and login? And what is the backend technology used?

I am accessing from a very old computer right now, on Google Chrome. When I expand/collapse any filter from the home page, I notice a ~250ms delay, and I am not sure if it can optimized or if its my computer that is slow.

3

Thanks for the feedback, yes, the entire site is done in 100% elm-ui, data endpoints are done in C# REST apis. As far as the slowness, you are right, if you use older browsers, it is slow when you exp/col or even clicking on filter check boxes, I am on Version 71.0.3578.98 (Official Build) (64-bit) and I don’t see any delay at all, just curious how did you get the ~250 ms number ? did you use any tools to measure the delay ?

4

Nice! Sorry, I should have said, I haven’t used any tool to measure, it was just a number from my head, maybe it’s a little less or a little more, but it’s nothing that would compromise the experience.

5

Thanks, also quick question, do you know if there is any way to show spinner/loader to show the delay during exp/col, especially on check/uncheck on search filters which filters and loads the trucks on the right side ? Also, another point, what I noticed is, the less the data that browser has to deal with, the faster the clicks responses are, so if you apply more filters and get the trucks under may be 100, then exp/col should be faster.

6

What’s the reason for the css for sticky header? I thought this could be used to do such things
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#inFront

7

great job @yadalis !
i also noticed some delay when using the menu on the left and/or filters. You should use the chrome devtools to measure performance. (When using animations) Fps should not drop under 60fps otherwise it will look slow for end users. https://developers.google.com/web/fundamentals/performance/rendering/

8

I tried using inFront at first and it worked until I introduced “below” func to show the SORT dialog and it is acting weirdly, basically, when I scroll down by keeping the sort dialog open, the dialog is covering/going over the sticky-header, so I had use CSS to push the dialog under the sticky-header, otherwise inFront would work.

9

All code is done in 100% elm (exp/col and filters/recounts etc) no JS/CSS and yes, absolutely, I did noticed the delay and struggled to solve this, but I figured that, it is purely due to the amount of the data that I load, around 1500 trucks with about 35 fields of data, so when you apply some filters and get the total count down to say about 100 trucks, I dont see any delay at all, so not sure I how I would solve this, any suggestions other than using chrome devtools ?

10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.