Talk by Martin Muzatko
Tools for dealing with common roadblocks
What else on a non-tech level?
We want to get away from this:
Definition of newcomers: People that are fed up with structureless jQuery spaghetti but are too afraid of getting into something highly structurized and complex suchs as Angular, Ember, Backbone, React... you name it!
As a newcomer
As an intermediate
Riot spent a lot of time on creating tools for exactly these very common problems.
Commonly, experienced devs refer to them as
Whats the problem with these words?
They are not vivid or concrete enough to help somone to become a better dev
To decipher these buzzwords into real-world problems
Solving all these problems? Impossible!
Riot is against the current trend of boilerplate and unneeded complexity
We think that a small, powerful API and concise syntax are extremely important things on a client-side library.
Riot does not identify as framework. Rather, they live the philosophy of offering generic minimal tools.
RiotJs is a library. (8.56kb in total as of now)
Concise syntax
<sample>
<h3>{ message }</h3>
<ul>
<li onclick={select} each={ techs }>{ name }</li>
</ul>
{selection}
<script>
this.message = 'Hello, Riot!'
this.techs = [
{ name: 'HTML' },
{ name: 'JavaScript' },
{ name: 'CSS' }
]
this.selection = ''
select(event) {
this.selection = event.item.name
}
</script>
</sample>
Templates separate technologies, not concerns.
ES6 JS templating here we come!
Any syntax
@template("elements/timer.html")
class Timer extends Riot.Element
{
time: number;
mylist = ["one", "two", "three"];
private timerHandle: number;
constructor(opts) {
super();
this.time=opts.time||0;
this.timerHandle=setInterval(() => this.ticks(),1000);
this.on("unmount",() => {
clearInterval(this.timerHandle);
});
}
ticks() {
this.time++;
this.update();
}
<kids>
<h3 each={ kids[1 .. 2] }>{ name }</h3>
# Here are the kids
this.kids = [
{ name: "Max" }
{ name: "Ida" }
{ name: "Joe" }
]
</kids>
Typescript
Coffeescript
Don't relearn what you already know
Events are not wrapped in a special object like jQuery.
Only useful information is added.
If you already know how to write HTML/CSS/JS you are already capable of writing large-scale web apps with webcomponents.
Simplicity is a great virtue, but it requires hard work to achieve it and education to appreciate. And to make matters worse: complexity sells better.
Presentation carefully prepared by
Martin Muzatko
@martinmuzatko
More about RiotJs and other dev stuff by Martin?
Looking for an awesome company to work with?