A React-like user interface micro-library
Talk by Martin Muzatko
- Event handling
- DOM selections
- Passing data from component to component
- Template rendering
- Interactive/reactive views
- Ajax
- Animations
Which problems do frameworks try to solve?
Tools for dealing with common roadblocks
What else on a non-tech level?
- Creating the mindset of components
- Teaching best practice
- Having an organized structure but still the freedom to do anything
We want to get away from this:
How do you feel after wrapping your mind around frameworks for the first time?
What problems do newcomers have?
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
- Bloated functionality
- Huge API
- Grasping concepts (DI, components, etc...)
- Reading documentation
- Boilerplate - lots of code to get only little functionality
Which problems do frameworks cause?
As an intermediate
- Limits due to specific biases
- Complexity (maintainability)
- Testing
Why yet another framework?
Riot spent a lot of time on creating tools for exactly these very common problems.
Commonly, experienced devs refer to them as
- Dependency Injection
- DRY Code
- Comprehensibility
- Freedom
- Scalability
- Extendibility
- Modularity
- Decoupling
Whats the problem with these words?
They are not vivid or concrete enough to help somone to become a better dev
What problems are we solving?
To decipher these buzzwords into real-world problems
- Quick learning curve to create powerful apps
- Easily manageable component networks (Architecture)
- Freedom to implement features the way you want to
- No boilerplate: minimum effort - maximum result
- Generic tools and powerful API to create anything
Solving all these problems? Impossible!
Pick two or three
How does RiotJS solve these problems?
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.
How does RiotJS solve these problems?
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)
- Observable - Event streaming for components - lifecycle control
- Compiler - Freedom to choose any preprocessor for HTML/CSS/JS
- Expressions - {} expressions are pure JS (or whatever preprocessor you choose)
- Router - Changing and observing URL / #
- Mixins - Your own tools to share between components
- Tag - A component of any size that has access to all of the above tools and its parent this.parent and children this.tags components
Lets have a look
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!
Lets have a look
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
Nothing new
Don't relearn what you already know
Events are not wrapped in a special object like jQuery.
Only useful information is added.
DEMO TIME
Conclusion
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.
Thank you
Presentation carefully prepared by
Martin Muzatko
@martinmuzatko
More about RiotJs and other dev stuff by Martin?
Looking for an awesome company to work with?
RiotJS - Introduction
By Martin Muzatko
RiotJS - Introduction
This presentation will give you an insight why we keep running into the same problems with every new framework, no matter which technology.
- 2,312