{"id":13451960,"url":"https://github.com/nordfjord/mithrilexamples","last_synced_at":"2025-04-10T17:06:24.566Z","repository":{"id":85835924,"uuid":"42967487","full_name":"nordfjord/mithrilexamples","owner":"nordfjord","description":"A collection of examples used in my mithril talk","archived":false,"fork":false,"pushed_at":"2015-10-27T16:40:00.000Z","size":168,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-24T14:46:29.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nordfjord.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-22T23:49:32.000Z","updated_at":"2021-09-01T01:15:05.000Z","dependencies_parsed_at":"2023-03-13T06:58:03.773Z","dependency_job_id":null,"html_url":"https://github.com/nordfjord/mithrilexamples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordfjord%2Fmithrilexamples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordfjord%2Fmithrilexamples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordfjord%2Fmithrilexamples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nordfjord%2Fmithrilexamples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nordfjord","download_url":"https://codeload.github.com/nordfjord/mithrilexamples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248260477,"owners_count":21074210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:01:08.389Z","updated_at":"2025-04-10T17:06:24.537Z","avatar_url":"https://github.com/nordfjord.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Talk\n\nThe slides can be found at: https://slides.com/einarnordfjord/deck\n\nThe actual talk is located here: https://www.youtube.com/watch?v=J-zTZtFdjFw\n\n# What is mithril\n\nMithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.\n\nLight-weight  |  Robust | Fast\n--------------|---------|----------\n12kb gzipped | Safe-by-default templates | Virtual DOM diffing and compilable templates\nSmall API | Hierarchical MVC via components | Intelligent auto-redrawing system\nSmall learning curve ||\n\nMithrils developer @lhorie stated in a blog post that he had worked with Angular prior to making mithril.\n\nMithril is based on a fundamentally different approach to Angular. Whereas Angular decided to map Javascript functionality onto HTML, mithril goes the other way around and maps HTML onto Javascript.\n\nThis has some immediate benefits such as\n\n1. Error lines in console lead to actual source of error, not an error in an HTML parser\n2. Better performance since there's no need to write an HTML parser.\n\n# How it compares\nFramework | Loading | Rendering\n----------|---------|-----------\nmithril   | 0.28ms  | 9.44ms\njQuery    | 13.11ms | 40.27ms\nBackbone  | 18.53ms | 23.05ms\nAngular   | 7.49ms  | 118.63ms\nReact     | 24.99ms | 79.65ms\n\n# differences from other frameworks\n\nSee Leo's excellent piece on just that [here](http://lhorie.github.io/mithril/comparison.html)\n\n# The examples\n\nThe examples go from a `Hello World!` example and end with integrating Select2 into mithril.\n\nexample 4 is one of my favourites since it shows how powerful the redrawing system is (try selecting a few rows of the table as they are changin, and be amazed that the selection holds through redraw).\n\nin the components directory you can see my components based version of todoMVC.\n# Regarding Flux\n\nSince flux is all the rage right now it might be good to talk about mithril and flux.\n\nI should probably point to @barneycarrol who had this answer in the flux debate\n\n\u003e One of the big differences between Mithril and other MVC libraries is that Mithril aims to make events / dispatching automatic. The idea is that if you write self-validating models (ie models shouldn't depend upon external logic to keep their internal state coherent), Mithril will infer when a change might have occurred and go through all your views, modifying the parts in the DOM that have changed.\n\n\u003eMithril does automatic checks after:\n\n\u003eAn AJAX call completes (via m.request)\nA DOM event is fired with a DOM-dependent data point (via m.withAttr)\nThe front-end route changes (via m.route)\nIf you know a change in one of your model has occurred through some other means, you can always force the check with m.redraw (although experience should show you that this is rarely if at all necessary).\n\n\u003eThe beauty of this approach is you can forget all about setting up complex eventing system and let these things happen automatically. In other words, the Mithril philosophy is that you shouldn't need Flux in the first place.\n\n\u003eFor a lot of people, this seems too good to be true. The truth is, the work you would be spending on wiring up a Flux architecture to bind to your MVC correctly is offset by:\n\n\u003eMithril's blazing fast DOM diffing engine: all views are recomputed on any possible change, so they will all automatically be up to date with your latest model state. Mithril has a very light touch so even if you're comparing tens of thousands of elements and only a few data points may have changed, this is still faster than anything else in most situations. Plus, Mithril has all sorts of clever ways to change only the parts of the DOM that need to.\nThe fact the model will be queried continuously means you can't allow it to fall into invalid states. So rather than writing a model that can easily fall into states you wouldn't want the user to see, and then writing complex dispatchers to try and compensate for these failings, you make the models self-validating in the first instance, and you loose a layer of complexity.\nIf you think you really need some kind of eventing system like Flux, I'd be happy to advise you on how to accomplish given scenarios with Mithril.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordfjord%2Fmithrilexamples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnordfjord%2Fmithrilexamples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnordfjord%2Fmithrilexamples/lists"}