# Elm-pages website and e-commerce SPA released

**URL:** <https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562>\
**Category:** Show and Tell\
**Created:** [November 24, 2020, 10:21pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562 "2020-11-24T22:21:29Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 24, 2020, 10:21pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/1 "2020-11-24T22:21:29Z")

</div>

Last week, we at Special-Elektronik released a new website and retailer e-commerce called “Partnerzone” which we have been working on for about 2 years. The website uses Elm for everything thanks to Elm Pages and the e-commerce site is a “single page application” all using Elm. It’s my first real large project in Elm that reaches a production stage.

The experience of Elm as the only front end tool has been nothing short of amazing. I’m confident that these projects would not be live today without Elm.

Some numbers:

- 3 Elm projects
- 2 packages (An [Autocomplete “component”](https://package.elm-lang.org/packages/specialelektronik/elm-autocomplete/latest/) and a private UI Framework)
- 6 third party packages in the largest project
  - NoRedInk/elm-json-decode-pipeline
  - cuducos/elm-format-number
  - dillonkearns/elm-markdown
  - jinjor/elm-debounce
  - rtfeldman/elm-css
  - zwilias/elm-rosetree

27571 lines of Elm code (not counting third party packages)  
Compiled Gzipped size: 110 KB for the largest project

**Note:** The compiled js includes not only business logic but also all styles (via elm-css), 46 svg icons and several svg logotypes. It blows my mind that all that fits in 110 KB.

I intend to write more about the experience and a few things I learned on the way. But I just wanted to send this out together with a big thank you to Evan and the entire elm community!

You find the website at [http://www.specialelektronik.se](http://www.specialelektronik.se) and [https://partnerzon.specialelektronik.se](https://partnerzon.specialelektronik.se). Unfortunately it’s only in swedish.

---

<div class="post-metadata">

**Author:** ![ymtszw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ymtszw/32/2360_2.png) [@ymtszw](https://discourse.elm-lang.org/u/ymtszw)\
**Post date:** [November 25, 2020, 6:36am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/2 "2020-11-25T06:36:08Z")

</div>

The website and application both looks great and works snappy.  
It’s a very encouraging feat! Congratz on the release!

---

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 25, 2020, 10:09am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/3 "2020-11-25T10:09:49Z")

</div>

Thank you! Speed was one of the core requirements and when it comes to the website, Elm Pages excels! Hats off to @dillonkearns!

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [November 25, 2020, 10:55am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/4 "2020-11-25T10:55:50Z")

</div>

Beautiful website - 110 KB !! - Nice job.

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [November 25, 2020, 2:18pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/5 "2020-11-25T14:18:11Z")

</div>

Well done!

One little thing I noticed: The newsletter form in the bottom-right of the footer unexpectedly has scrolling.

 ![Screenshot 2020-11-25 at 15.16.38](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/4f9b5f4e9950f7b6f96028ea96d0d4a0369f4290.jpeg)

---

<div class="post-metadata">

**Author:** ![artjom](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/artjom/32/2351_2.png) [@artjom](https://discourse.elm-lang.org/u/artjom)\
**Post date:** [November 25, 2020, 7:57pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/6 "2020-11-25T19:57:48Z")

</div>

Curious to learn how you used the `zwilias/elm-rosetree` package in there.

---

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 25, 2020, 9:05pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/7 "2020-11-25T21:05:27Z")

</div>

Thank you @lydell! The fix will go out with the next release.

@artjom: The categories are arranged as “rose trees”, a category can have 0 or more subcategories and the depth of the tree can, in theory, be infinite. This works very well with how I store the categories in the mysql database as a “nested set model”.

As I said earlier, speed is a core requirement, the categories rarely change and the number of products in each category is known. To make navigation between categories snappy, every category and its product count is loaded on the first page load. So when the user navigates to another category, zwilias package makes it really easy to instantly switch active category and display its children.

Richards points about raising the bar for dependencies during his [Oslo Elm Day keynote](https://2019.osloelmday.no) really stuck in my head. But I am very grateful for the rose tree package.

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [November 26, 2020, 5:54am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/8 "2020-11-26T05:54:01Z")

</div>

Thank you for sharing this, @carlfredrikhero and congratulation for the launch, the site looks great!

I am looking forward to read more about it.

Any specific reason you decided not to use elm-ui?

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [November 26, 2020, 10:16am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/9 "2020-11-26T10:16:12Z")

</div>

> [@lucamug](#):
>
> Any specific reason you decided not to use elm-ui?

I am guessing due to server-side rendering and responsiveness. `elm-ui` is responsive, but runs code to do it. In particular when rendering server side you do not know the dimensions of the screen being rendered to. You can guess, and fill in some default size, but when it loads on the real screen, if you got it wrong everything will jank around as it is layed out again once the `elm-pages` code starts running client side.

I took a look at the DOM of this site, and saw quite a few media queries. For example, I saw some to increase font size at a break width of 1024. So it is going deeper on the responsiveness than just choosing what to show/hide. I took this approach on my blog site, also made with `elm-pages`: [blog.thesett.com](http://blog.thesett.com).

If you are just showing/hiding stuff at certain screen widths, you can still use `elm-ui` and combine it with a few simple media queries for that. I think Dillon took this approach on his [‘incremental elm’](https://incrementalelm.com/) site.

I don’t know enough about `elm-ui` to understand whether it is possible or not, but it would be awesome if there was a version of it that only used media queries for responsiveness.

---

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 26, 2020, 10:35am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/10 "2020-11-26T10:35:08Z")

</div>

Thank you @lucamug! I do not know if you recall but I told you about this project during Oslo Elm Day 2019 when it was just an idea and an admin panel that could list categories. 🙂

The main reason why I went with Css is that I’m quite comfortable with Css, it was easier than learning Elm-UI. Also, I wanted to be able to utilize css grid and other newer css features. Much of the css is actually copy-paste from Bulma which I really like.

---

<div class="post-metadata">

**Author:** ![nil](https://avatars.discourse-cdn.com/v4/letter/n/a183cd/32.png) [@nil](https://discourse.elm-lang.org/u/nil)\
**Post date:** [November 26, 2020, 8:39pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/11 "2020-11-26T20:39:20Z")

</div>

Looks great!

A suggestion though: The “Footer” flashes for a frame or two when changing to product page, (since there is no content loaded I presume). I found this distracting while browsing the page.

 ![footer_flash](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/a/a8f99c9e8ecf3ad7d0ac7346a1d140b7e9a331c5.gif)

---

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 26, 2020, 9:03pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/12 "2020-11-26T21:03:58Z")

</div>

Thank you @nil! Good catch! This is because I haven’t paid much attention to the loading screen yet (you can see it as a single “Loading…” string.

I agree that it is a bit annoying.

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [November 27, 2020, 6:55am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/13 "2020-11-27T06:55:27Z")

</div>

@carlfredrikhero, ha! I didn’t made the connection.

Looking at your description, it is very similar to what we build in one of our project at Rakuten. The main difference is `elm-ui`, this is why I was asking.

@rupert, yes, that is one issue using elm-ui: responsiveness together with server side rendering.

Our main app is accessible after login, so it doesn’t require SSO.

I have been doing experiment pre-rendering pages at build time with [https://elm-starter.guupa.com/](https://elm-starter.guupa.com/) and I think in one case I used some trick with `elm-ui`, using classes, to properly generate a layout server side.

The fact is, after using `elm-ui` is hard to go back to regular CSS and we are still supporting IE11, so the latest cool things of CSS are out of reach.

It seems that the next version of `elm-ui` may improve this aspect.

---

<div class="post-metadata">

**Author:** ![carlfredrikhero](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/carlfredrikhero/32/1111_2.png) [@carlfredrikhero](https://discourse.elm-lang.org/u/carlfredrikhero)\
**Post date:** [November 27, 2020, 7:10am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/14 "2020-11-27T07:10:47Z")

</div>

> [@lucamug](#):
>
> The fact is, after using `elm-ui` is hard to go back to regular CSS and we are still supporting IE11, so the latest cool things of CSS are out of reach.

I may need to take another look at Elm-ui when you put it like that.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [November 27, 2020, 9:28am UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/15 "2020-11-27T09:28:21Z")

</div>

> [@lucamug](#):
>
> The fact is, after using `elm-ui` is hard to go back to regular CSS

Yeah. Its actually the reason I have not learned elm-ui, since I knew I wanted to do static rendering. If I learned elm-ui first I would find it hard to motivate myself to come back to CSS afterwards. 🤔

---

<div class="post-metadata">

**Author:** ![ChristophP](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/christophp/32/1528_2.png) [@ChristophP](https://discourse.elm-lang.org/u/ChristophP)\
**Post date:** [November 28, 2020, 7:40pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/16 "2020-11-28T19:40:12Z")

</div>

Awesome, always great to hear about large commercial projects relying on Elm. 😃  
Warms my heart 😃

---

<div class="post-metadata">

**Author:** ![gunnar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/gunnar/32/2358_2.png) [@gunnar](https://discourse.elm-lang.org/u/gunnar)\
**Post date:** [November 30, 2020, 3:15pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/17 "2020-11-30T15:15:45Z")

</div>

Jättefin sajt!  
Very nice site. Meeting high standards. Well done!

---

<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:** [December 10, 2020, 3:15pm UTC](https://discourse.elm-lang.org/t/elm-pages-website-and-e-commerce-spa-released/6562/18 "2020-12-10T15:15:47Z")

</div>

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