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.

– Edsger W. Dijkstra

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