Today I would like to do some advertising. Do you know
Flems.io ?
Flems.io is a simple, but very smart prototyping platform ideal for testing oder demonstration of HTML/CSS/Javascript or even Typescript. Ok, simple might not be the right wording, it´s just super simple to use. Under the hood, it provides quite a lot:
Flems supports TypeScript, LiveScript and Babel (standalone) compilation too. You can add CSS & JS dependencies by specifying a full URL pointing to the desired file, or by giving a reference to an NPM package (and optional path) - these will be taken from unpkg.com (See thedocumentation for more info.)
Flems.io is similar to online editors likeCodePen orJSFiddle, but has one unique selling point. You do not need an account or any external memory:Flems.io stores all data in the URL!. This is ideal for short tests and demos provided on dev.to or other online media.
Flems-URL´s can get quite long as they store all information + page settings, so you might push the limits using windows desktop links, which are limited to 256 characters. But using Flems-URL´s on online platforms like dev.to is usually not a problem. Unlike other platforms Flems.io does not require any initialization, so it is up and running in no time. It´s best usable for short demos or just for a quick test of some lines of code.
Here is an example, i alredy providedhere
Happy coding!
Top comments(7)
- LocationGermany
- WorkNumerical simulation specialist, IoT developer
- Joined
Oh, didn´t know this.
Mithril is nice and it has some very interesting features. It just features pretty much the same approach like VanJS. They compose the DOM by composing functions manually, which is very similar to composing the DOM by composing HTML.
I prefer an approach where you can control DOM composition using Javascript. Think of elements that are built differently depending on current conditions like screen width, day time or whatever.
But I should definitively dig a bit deeper into Mithril.
It is my first beloved library :-)
Here is an example I posted 4 years ago :
- LocationGermany
- WorkNumerical simulation specialist, IoT developer
- Joined
Thank you for the example. Currently my time is a limited, but I´ll try to rebuild this page in DML to see, if it is really an advantage to have some kind of view controller. In my oppinion it is not, but I´m always curious to learnnew things.
You are right, sadly time is limited.
Mithril does not impose to return view method in every component .
Look at this very simplified example
constState=()=>({mithril:0,apprun:0,hyperapp:0,svelte:0,stencil:0,global:0});constActions=state=>({increment:(lib)=>{state[lib]+=1;state[global]+=1},});constglobal="global",div="div",h1="h1",button="button",h2="h2"conststate=State(),actions=Actions(state),report=count=>m("div.report",`like(s) :${count} (${(count&&100*count/state[global]).toFixed(2)} %)`),incer=(item)=>actions.increment(item)constCard=(state,actions,item)=>{returnm(div,m(h1,item),m(button,{onclick:()=>incer(item)},m("span","Vote\u2192\ud83d\udc4d")),m(div,report(state[item])));}constlibs=["mithril","apprun"]m.mount(document.body,{view:()=>m(div,[libs.map(lib=>Card(state,actions,lib)),m(h2,"Number votes :",state[global])])})- LocationGermany
- WorkNumerical simulation specialist, IoT developer
- Joined
Is there any reason you used an external function for increment?
onclick:()=>incer(item)// could beonclick:(item)=>actions.increment(item)It feels more convenient to me to use functions instead of string constants, ending with the same syntax like VanJS or DML (For sure it would be easy to use some kind of "generator" to simplify the creation).
constbutton=(...args)=>m("button",...args)Building DOM elements as nested object is a pretty common approach, but it feels a bit limiting to me, as you cannot use advanced programming methods to build your objects. I would tend to create UI-Elements using generator functions or class methods, that implement some common behavior.
No there is abolutely no reason, just a personal choice.
constState=()=>({count:0});constActions=state=>({increment:()=>state.count+=1,decrement:()=>state.count-=1});conststate=State();constactions=Actions(state);constCounter=(state,actions)=>m('div',m('h1','Counter'),m('p',state.count),m('button',{onclick:actions.increment},'+'),m('button',{onclick:actions.decrement},'-'),Child(state,actions));constChild=(state,actions)=>m('div',m('h2','Child'),m('p',state.count*2),m('button',{onclick:actions.increment},'+'),m('button',{onclick:actions.decrement},'-'),);m.mount(document.body,()=>{return{view:()=>Counter(state,actions)};});Of course, "generator" are also py preferred choice.
Mithril, is a very nice and mature framework :-)
For further actions, you may consider blocking this person and/orreporting abuse
