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.
Do steps as in the image above in our elixir-elm folder. This will initialize our PicShare Elm application. Then in
src folder create
We created module
Picshare that exposes constat
main that is our application entry point. Then we import
Elm Html module with
Html type and
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:
- 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.
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
div child elements. That second
Elm.List have only one element, the result of
HTML.text function that is
main type annotation part, you can conclude that
main is of type
Html the type that is defined in
Html type variable. This is
Elm Virtual DOM type.
Index And CSS
elixir-elm repository to your
main.css. CSS is what makes your web application beautiful.
Elm.Picshare.init is Elm function generated in
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
id=main is replaced with
div that has text
- 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 connect Elm Virtual DOM and HTML DOM.