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.
Comments are closed.