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.
1 2 3 | cd Documents && cd learn-elm elm install elm/http |
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
.
1 2 3 4 5 6 7 8 9 10 11 | $ elm install elm/http Here is my plan: Add: elm/bytes 1.0.8 elm/file 1.0.5 elm/http 2.0.0 Would you like me to update your elm.json accordingly? [Y/n]: Y Success! |
We can then manually check in the project
management file to make sure the main package
are listed in the dependencies
field.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token property">"dependencies"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"direct"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"elm/browser"</span> <span class="token operator">:</span> <span class="token string">"1.0.2"</span> <span class="token punctuation">,</span> <span class="token property">"elm/core"</span> <span class="token operator">:</span> <span class="token string">"1.0.5"</span> <span class="token punctuation">,</span> <span class="token property">"elm/html"</span> <span class="token operator">:</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">,</span> <span class="token property">"elm/http"</span> <span class="token operator">:</span> <span class="token string">"2.0.0"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token property">"indirect"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"elm/json"</span> <span class="token operator">:</span> <span class="token string">"1.1.3"</span> <span class="token punctuation">,</span> <span class="token property">"elm/bytes"</span> <span class="token operator">:</span> <span class="token string">"1.0.8"</span> <span class="token punctuation">,</span> <span class="token property">"elm/file"</span> <span class="token operator">:</span> <span class="token string">"1.0.5"</span> <span class="token punctuation">,</span> <span class="token property">"elm/time"</span> <span class="token operator">:</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">,</span> <span class="token property">"elm/url"</span> <span class="token operator">:</span> <span class="token string">"1.0.0"</span> <span class="token punctuation">,</span> <span class="token property">"elm/virtual-dom"</span> <span class="token operator">:</span> <span class="token string">"1.0.3"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> |
So we have all the necessary support tools to continue learning about Browser.element
.