Post 12 – No-sandbox Element

In the previous example, we saw how Elm Architecture translates the user action event meaning into Message , and responds by creating a new Model record to send to the drawing program. view interface. The view then goes on to create a new HTMl DOM structure wrapped inside the Html Message type and…

Browser.sandbox

The new HTML DOM structure will now be compared by the Browser.sanbox program with the HTML DOM structure being displayed in the HTML document and only updates the HTML Node at the level closest to where the change is. .

Our new story now is that Browser.sanbox is designed to ensure that the code that handles the logic we write will only be able to perform operations that work with the DOM structure. In addition, there is certainly no other type of interaction supported, such as sending an HTTP Request to a certain server to query data to update content.

And so Elm said that the next environment creation program we should learn after Browser.sanbox is…

Browser.element

The Browser.element program is also designed to package the init , view , and update components into an Element , which you can insert into any pre-built website.

The basic difference is that we will also have the ability to send interactive commands to the JavaScript Engine operating environment, to request other types of actions. For example, send an XMLHttpRequest to a web server to query data, query time information from the operating system, generate a random value, etc.

Obviously, as we can see in the overview diagram of an Element ‘s lifecycle encapsulated with Browser.element , we will also have interactive event trackers of the Subscription system. comes with Command interactive command definition as mentioned above.

Basically, we will be able to create Subscription to monitor the system in action and wait for a certain event to happen. Then, each time the appropriate event type is fired by the web browser, the Subscription sends a Message to the Element ‘s main operator and triggers an update to perform the appropriate update logic.

Dependency Packages

In the following examples, we will use additional support package besides elm/core and elm/html which are already installed in the elm environment. To install more support package for the project we are working on, we can run the elm install command in the project ‘s directory.

After each run of the elm install command to install a new package , we will see an installation result message with other package that support the main package we need to use. And choose to automatically update the content of the elm.json file that the elm init initializer created when we started the previous project .

We can then manually check in the project management file to make sure the main package are listed in the dependencies field.

So we have all the necessary support tools to continue learning about Browser.element .

[Declarative Programming + Elm] Lesson 13 – Flags & Cmd/Sub