Our Elm Photo Sharing Application — Tentamen Software Testing Blog

TL;DR

In Elm List Collection, we learned how to use List collection. Today we create our first Web Application for sharing pictures. This post is part of the functional language series, and it is based on a remarkable book Programming Elm Build Safe and Maintainable Front-End Applications by Jeremy Fairbank.

Elm Init

Do steps as in the image above in our elixir-elm folder. This will initialize our PicShare Elm application. Then in folder create file.

We created module that exposes constat that is our application entry point. Then we import module with type and and functions.

HTML Applications

Elm’s main purpose is to create applications that run in the Browser. To understand our first basic Elm application, you need to understand what is:

  • HTML
  • DOM
  • DOM element
  • element attribute

If you examine page source of this blog post (right-click and select Inspect), you will see a lot of HTML elements that could have attributes ( is one example). Each string, like word Remember, is HTML element. For now, try to picture DOM as a list of HTML elements that could also have a list of child elements.

Main Constant

Here we defined constant and its Type annotation. is our application that is DOM element. function creates It takes two , first is a list of attributes, the second one is of child elements. That second have only one element, the result of function that is element.

In type annotation part, you can conclude that is of type the type that is defined in module. is type variable. This is Virtual DOM type.

Compile To Javascript

Index And CSS

Our javascript needs an HTML file so Browser could execute it. Download from repository to your folder and . CSS is what makes your web application beautiful.

is Elm function generated in the javascript file. It connects Elm Virtual DOM (Html type) with Html DOM. In this example, the connection point is element with attribute main. Open in Browser, you should see text Picshare. Inspect this text Picshare by right-clicking and selecting Inspect. You will see that with is replaced with that has text .

Remember

  • how to initialize Elm application
  • Elm module must have the same name as module filename
  • Html Elm module and div and text functions
  • what is Virtual DOM
  • how to compile to javascript
  • how to connect Elm Virtual DOM and HTML DOM.

Originally published at https://blog.tentamen.eu on July 28, 2020.

Founder of Tentamen, software testing agency.