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 src folder create Picshare.elm file.

We created module Picshare that exposes constat main that is our application entry point. Then we import Elm Html module with Html type and div and text 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 div elements that could have attributes (class is one example). Each string, like word Remember, is text 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 main constant and its Type annotation. main is our application that is HTML.div DOM element. div function creates HTML.div. It takes two Elm.List, first is a list of div attributes, the second one is Elm.List of div child elements. That second Elm.List have only one element, the result of HTML.text function that is HTML.text element.

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

Compile To Javascript

Index And CSS

Our javascript needs an HTML file so Browser could execute it. Download from elixir-elm repository to your picshare folder index.html and main.css. CSS is what makes your web application beautiful.

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karlo Smid

Karlo Smid

Founder of Tentamen, software testing agency.