# Html tools in Elixir

**URL:** <https://forum.elixirforum.com/t/html-tools-in-elixir/12905>\
**Category:** Discussions\
**Tags:** html-tools\
**Created:** [March 5, 2018, 11:03am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905 "2018-03-05T11:03:10Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 5, 2018, 11:03am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/1 "2018-03-05T11:03:11Z")

</div>

The landscape of available Elixir packages for html tooling is overseeable but in that sense also very focused. Each library is there for a distinct use case.

For that reason I compiled a quick [overview of the available html tools](https://github.com/f34nk/elixir_html_tools) in Elixir.  
Right now I only covered: [Floki](https://github.com/philss/floki), [HtmlSanitizeEx](https://github.com/rrrene/html_sanitize_ex), [Meeseeks](https://github.com/mischov/meeseeks), [Myhtmlex](https://github.com/Overbryd/myhtmlex), [ModestEx](https://github.com/f34nk/modest_ex)

In my humble conclusion, I state that benchmarking is not very useful since the goal and main strength of each library is different. Also the tested methods are not really comparable, since the implemented overhead is very different between each library. It is safe to say that all libraries perform **very very** fast.

All in all, I would say, the focused nature of the tools makes it **easy for the user to pick the right tool** for the job.

However, the ecosystem of tools is still quite young. There is room for improvement.

Please feel invited to discuss missing features or differences to other libraries in other languages.

Best, f34nk

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [March 5, 2018, 2:44pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/2 "2018-03-05T14:44:19Z")

</div>

I think it might be worthwhile to indicate whether a parser is HTML5 compliant (so Floki with html5ever parser but not default parser, Meeseeks, Myhtmlex, and ModestEx).

Also, Floki arguably has facilities for manipulating nodes: [Floki — Floki v0.38.4](https://hexdocs.pm/floki/Floki.html#map/2).

Edit: Also, it’s probably beyond the scope of an overview of HTML tools, but I kind of wish there was an explicit indicator of whether a library is intended to be used with XML- I see a fair amount of people reaching for Floki to work with XML when it just doesn’t have parsers intended for it.

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 5, 2018, 7:01pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/3 "2018-03-05T19:01:40Z")

</div>

> [@mischov](#):
>
> indicate whether a parser is HTML5 compliant

Good point. I will add a column to the [table](https://github.com/f34nk/elixir_html_tools#available-elixir-html-tools).

> [@mischov](#):
>
> Also, Floki arguably has facilities for manipulating nodes: [Floki — Floki v0.38.4](https://hexdocs.pm/floki/Floki.html#map/2).

Also true. I forgot. It is a feature that is easy to oversee however. I will also add this info to the [table](https://github.com/f34nk/elixir_html_tools#available-elixir-html-tools). Is `Floki.map/2` only limited to changing attributes?

> [@mischov](#):
>
> I kind of wish there was an explicit indicator of whether a library is intended to be used with XML

Yes I also agree here. But how would you like to see this information represented?

> [@mischov](#):
>
> I see a fair amount of people reaching for Floki to work with XML when it just doesn’t have parsers intended for it.

Really? That seems odd. Xml and html are completely different languages. Maybe they use the default parser and hope for the best.

Also popular resources like **awesome-elixir** only have a section for [“XML”](https://github.com/h4cc/awesome-elixir#xml) but not explicitly “HTML”. I think this is misleading!

I opened up an issue on awesome-elixir to [add a new section “HTML”](https://github.com/h4cc/awesome-elixir/issues/4419). 🕶

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [March 5, 2018, 8:00pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/4 "2018-03-05T20:00:21Z")

</div>

> [@f34nk](#):
>
> Is `Floki.map/2` only limited to changing attributes?

As far as I can tell it only works for changing an element’s tag or its attributes.

> [@f34nk](#):
>
> Really? That seems odd. Xml and html are completely different languages. Maybe they use the default parser and hope for the best.

Yeah, a lot of people use the mochiweb\_html parser, which does an ok job with XML, but I’ve even seen people using the html5ever parser and that’s just a bad idea.

People using html5ever for parsing XML was one of the main motivations I had for adding an XML parser to Meeseeks- if they were going to try to do it anyway I wanted to provide a good parser for them to use.

> [@f34nk](#):
>
> I opened up an issue on awesome-elixir to [add a new section “HTML”](https://github.com/h4cc/awesome-elixir/issues/4419). 🕶

👍

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [March 5, 2018, 8:10pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/5 "2018-03-05T20:10:33Z")

</div>

Also it might be worth adding some kind of footnote for the [Meeseeks/Floki benchmark](https://github.com/mischov/meeseeks_floki_bench).

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 5, 2018, 8:35pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/6 "2018-03-05T20:35:37Z")

</div>

Do you plan to add functions that let you manipulate nodes to Meeseeks?

Actually that was the motivation for me to start ModestEx, because I missed those features in other libraries. Or is it just me and people only need to parse HTML and not change it?

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [March 5, 2018, 8:45pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/7 "2018-03-05T20:45:24Z")

</div>

> [@f34nk](#):
>
> Do you plan to add functions that let you manipulate nodes to Meeseeks?
> 
> Actually that was the motivation for me to start ModestEx, because I missed those features in other libraries. Or is it just me and people only need to parse HTML and not change it?

I’m pretty hesitant to at the moment- adding nodes in the right place as per the HTML5 spec, etc, is a pretty complicated topic, as is figuring out efficient ways to update what I currently treat as an immutable structure (the Document).

Meeseeks has from the first been designed as a tool to search for and extract data from HTML (and now XML), which is the purpose I use it for, and for the foreseeable future I plan to limit it to that.

---

<div class="post-metadata">

**Author:** ![mbenatti](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mbenatti/32/9575_2.png) [@mbenatti](https://forum.elixirforum.com/u/mbenatti)\
**Post date:** [March 5, 2018, 11:33pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/8 "2018-03-05T23:33:43Z")

</div>

Hey @f34nk, I only used `floki` in my projects and it suits for my needs.  
I’m taking a look at your project `https://github.com/f34nk/modest_ex` and it seems awesome!

Good work dude, if I found something useful or missing about html tools I’ll post here!

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 6, 2018, 8:37am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/9 "2018-03-06T08:37:44Z")

</div>

Thanks man.  
But what about [drab](https://github.com/grych/drab), [EEx](https://hexdocs.pm/eex/EEx.html) and [Phoenix.HTML](https://hexdocs.pm/phoenix_html/Phoenix.HTML.html)?  
Strictly speaking these are also “html tools”.

I would love to see more html processing on the backend side, rather then pushing half backed data to the client and let them figure out the rest.  
I mean, website performance (and with that user experience) has gotten so worse since everything is being done “on load” or “async”.

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 6, 2018, 5:26pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/10 "2018-03-06T17:26:41Z")

</div>

[https://github.com/h4cc/awesome-elixir#html](https://github.com/h4cc/awesome-elixir#html)🕶

---

<div class="post-metadata">

**Author:** ![mbenatti](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mbenatti/32/9575_2.png) [@mbenatti](https://forum.elixirforum.com/u/mbenatti)\
**Post date:** [March 6, 2018, 11:36pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/11 "2018-03-06T23:36:56Z")

</div>

You’r right, I agree with you!  
I used both in my projects, including drab!  
I miss more activity by the community for tools like Drab and for components like [Phoenix Awesomplete form helper](https://nico-amsterdam.github.io/awesomplete-util/phoenix.html)…

I like Drab and its powerful however I can’t see companies/projects showcases using it yet.

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [March 7, 2018, 8:31am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/12 "2018-03-07T08:31:28Z")

</div>

[PhoenixFormAwesomplete](https://github.com/nico-amsterdam/phoenix_form_awesomplete/#installation) looks interesting. How is it different to [drab](https://github.com/grych/drab)?

IMO those projects are born out of the unique connection of phoenix and websockets. It just makes it much more obvious that you can do something like that. Or do I miss something? I am not a UI or even frontend guy, so maybe I don’t see the full picture here.

---

<div class="post-metadata">

**Author:** ![mbenatti](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mbenatti/32/9575_2.png) [@mbenatti](https://forum.elixirforum.com/u/mbenatti)\
**Post date:** [March 7, 2018, 6:53pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/13 "2018-03-07T18:53:36Z")

</div>

Drab is a framework, it handle with dom using websockets, he has your “own” controller caled “commander” and it uses Phoenix as a base, so is a complement.

[GitHub - nico-amsterdam/phoenix\_form\_awesomplete: Phoenix text\_input autocomplete (autosuggest) with on-demand Ajax calls, utilizing Lea Verou's Awesomplete widget. · GitHub](https://github.com/nico-amsterdam/phoenix_form_awesomplete/#installation), is like an “html component” to create (autosuggest) with on-demand Ajax calls, utilizing Lea Verou’s Awesomplete widget, he uses this lib [GitHub - LeaVerou/awesomplete: Ultra lightweight, usable, beautiful autocomplete with zero dependencies. · GitHub](https://github.com/LeaVerou/awesomplete) behind the scenes!

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [April 25, 2018, 8:24am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/14 "2018-04-25T08:24:54Z")

</div>

Hello!  
I updated the parsing benchmarks on the [elixir\_html\_tools](https://github.com/f34nk/elixir_html_tools) repo and added some test cases with small filesizes - which was missing before.

To my surprise [Floki and Meeseeks](https://github.com/f34nk/elixir_html_tools#benchmark) are incredibly fast for data sizes **smaller 1kB**. You can check out the runtime distribution [here](https://github.com/f34nk/elixir_html_tools#and-the-runtime-distriubution).

So, packages like Myhtmlex or ModestEx, that are using [**C Nodes**](http://erlang.org/doc/tutorial/cnode.html), come with additional latency.

> **[Latency of Native Functions for Erlang and Elixir](https://potatosalad.io/2017/08/05/latency-of-native-functions-for-erlang-and-elixir)**
>
> Erlang and C first appeared within 14 years\* of one another.

> Use this potentially helpful and fairly unscientific table to help you decide:

| Type | Isolation | Complexity | Latency |
| --- | --- | --- | --- |
| Node | Network | Highest | Highest |
| Port | Process | High | High |
| Port Driver | Shared | Low | Low |
| NIF | Shared | Lowest | Lowest |

When there is time I will setup a [**dirty-NIF**](https://github.com/Overbryd/myhtmlex#call-into-nif) test, too.

Cheers 🍻

---

<div class="post-metadata">

**Author:** ![dimitarvp](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/dimitarvp/32/38664_2.png) [@dimitarvp](https://forum.elixirforum.com/u/dimitarvp)\
**Post date:** [April 25, 2018, 1:14pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/15 "2018-04-25T13:14:53Z")

</div>

> [@f34nk](#):
>
> I mean, website performance (and with that user experience) has gotten so worse since everything is being done “on load” or “async”.

IMO 90% of the JS devs just have no idea how to use them. And have in mind I am a JS hater so I ain’t gonna be one of these guys that tell you “just use it right” – but in this case it’s partially true. I’ve seen some rare JS website gems that are incredibly fast and smooth even on spotty 3G on an iPhone 5c.

That being said, I fully agree with you. 🙂 And I am going back to server-side rendering more and more with time.

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [April 25, 2018, 1:28pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/16 "2018-04-25T13:28:31Z")

</div>

@f34nk Feedback for the updated benchmarks.

> All parsers except ModestEx return html encoded into a list of tuples.

Meeseeks returns it as a `Document`, which is a flat map of node id to node struct.

You also appear to be using the `:mochiweb_html` parser for Floki, which is the non-HTML5 compliant one, so you’re comparing apples to the HTML5 compliant oranges of the other parsers. Of course, AFAIK it’s impossible to run Floki’s HTML5 parser on the latest version of OTP, but that’s a different problem all-together.

Also curious if when you’re benchmarking, are you disabling CPU throttling (as mentioned [here](https://github.com/mischov/meeseeks_floki_bench#setup))? I’ve found that can reduce variation in run times when benchmarking.

Finally I’m interested why the averages shown in the text results don’t appear to be reflected in the images: for instance it appears when looking at the images that 50k Floki is faster than 50k Meeseeks, but according to the text 50k Floki averaged 16633.17 µs/op while 50k Meeseeks averaged 12018.79 µs/op.

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [April 25, 2018, 1:37pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/17 "2018-04-25T13:37:44Z")

</div>

> [@mischov](#):
>
> Meeseeks returns it as a Document

Thank you! I will update that.

> [@mischov](#):
>
> you’re comparing apples to the HTML5 compliant oranges of the other parsers

Also true. I will change that, too.

> [@mischov](#):
>
> are you disabling CPU throttling?

Interesting. I will check that out.

> [@mischov](#):
>
> Finally I’m interested why the averages shown in the text results don’t appear to be reflected in the images:

That’s odd.  
One is the output of benchfella, the other benchee.  
Do you have time to clone and repeat the bench yourself?

I actually did some benchmarking in `C` for my package and came out with different results too. I will have to investigate further to be sure what’s going on.

---

<div class="post-metadata">

**Author:** ![mischov](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/32/2489_2.png) [@mischov](https://forum.elixirforum.com/u/mischov)\
**Post date:** [April 25, 2018, 2:38pm UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/18 "2018-04-25T14:38:05Z")

</div>

> [@f34nk](#):
>
> Do you have time to clone and repeat the bench yourself?

Hardware variation aside, it seems like the included graphs might just be a little wonky

The graphs I generated were more in line with the textual output and clearly showed Meeseeks parsing smaller input slower and larger input faster than Floki (which is not surprising when Floki is using the `:mochiweb` parser).

---

<div class="post-metadata">

**Author:** ![f34nk](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/32/41205_2.png) [@f34nk](https://forum.elixirforum.com/u/f34nk)\
**Post date:** [April 26, 2018, 9:07am UTC](https://forum.elixirforum.com/t/html-tools-in-elixir/12905/19 "2018-04-26T09:07:06Z")

</div>

@mischov

I repeated the benchmarks and my benchee and benchfella results are different.

My benchfella shows the same result like you described. But the benchee measurements are somehow different.

I removed the benchee graphs from the repo and did some updates in the README. I hope this is better now.

Thanks for the feedback!
