# A PROD ready website developed in 100% elm

**URL:** <https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925>\
**Category:** Show and Tell\
**Created:** [January 10, 2019, 10:34pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925 "2019-01-10T22:34:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![yadalis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/yadalis/32/1706_2.png) [@yadalis](https://discourse.elm-lang.org/u/yadalis)\
**Post date:** [January 10, 2019, 10:34pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/1 "2019-01-10T22:34:49Z")

</div>

```auto
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

```

```auto
You can try it @:

```

[https://mhctrucksmartsearch.azurewebsites.net/](https://mhctrucksmartsearch.azurewebsites.net/)

```auto
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

```

---

<div class="post-metadata">

**Author:** ![G4BB3R](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/g4bb3r/32/4544_2.png) [@G4BB3R](https://discourse.elm-lang.org/u/G4BB3R)\
**Post date:** [January 11, 2019, 2:50pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/2 "2019-01-11T14:50:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yadalis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/yadalis/32/1706_2.png) [@yadalis](https://discourse.elm-lang.org/u/yadalis)\
**Post date:** [January 11, 2019, 2:54pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/3 "2019-01-11T14:54:50Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![G4BB3R](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/g4bb3r/32/4544_2.png) [@G4BB3R](https://discourse.elm-lang.org/u/G4BB3R)\
**Post date:** [January 11, 2019, 3:05pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/4 "2019-01-11T15:05:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yadalis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/yadalis/32/1706_2.png) [@yadalis](https://discourse.elm-lang.org/u/yadalis)\
**Post date:** [January 11, 2019, 3:40pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/5 "2019-01-11T15:40:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [January 14, 2019, 8:58am UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/6 "2019-01-14T08:58:32Z")

</div>

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](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#inFront)

---

<div class="post-metadata">

**Author:** ![kalutheo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/kalutheo/32/1557_2.png) [@kalutheo](https://discourse.elm-lang.org/u/kalutheo)\
**Post date:** [January 14, 2019, 9:36am UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/7 "2019-01-14T09:36:23Z")

</div>

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/](https://developers.google.com/web/fundamentals/performance/rendering/)

---

<div class="post-metadata">

**Author:** ![yadalis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/yadalis/32/1706_2.png) [@yadalis](https://discourse.elm-lang.org/u/yadalis)\
**Post date:** [January 14, 2019, 2:29pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/8 "2019-01-14T14:29:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![yadalis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/yadalis/32/1706_2.png) [@yadalis](https://discourse.elm-lang.org/u/yadalis)\
**Post date:** [January 14, 2019, 2:34pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/9 "2019-01-14T14:34:12Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [January 24, 2019, 2:34pm UTC](https://discourse.elm-lang.org/t/a-prod-ready-website-developed-in-100-elm/2925/10 "2019-01-24T14:34:16Z")

</div>

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