Riot.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with Riot.js including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the Riot.js community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

Introduction

Please see here about Riot.js. Recently I often see what is called the frontend framework. This library is useful for HTML componentization and reusability. Although Riot.js can be used in a wide variety of ways, please be aware that the usage for this example is as follows.

• Aware of large-scale development
• Incorporates iOS Application development methods

These will be explained later. Perhaps there is a big difference from the coding of other samples out there. I currently please feedback on the coding of this project on the discord channel of Riot.js. It follows the standard expected API usage and guarantees that it is not tricky.

[toc]

How it works

On local

Same to v3.

Clone project

$ cd << your working directory >>
$ git clone https://github.com/iq3addLi/riot_realworld_example_app.git

Install packages

$ cd riot_realworld_example_app
$ npm install

Launch server

$ gulp connect

Open in browser

$ open http://localhost:8080

How to build

Build with gulp and rollup

$ gulp

For details, please read gulpfile.

Getting started

Entrance

src/main.ts is entrance of code. Follow import. Enjoy the contents of the code!

Change API Server

hjson/settings.hjson contains the API server host. Let's change to the API you built.

    // endpoint of Conduit API ( '/' suffix is unneed )
    //"endpoint": "https://conduit.productionready.io/api"
    "endpoint": "http://127.0.0.1:8080"

It changes when you build.

Design policy

Same completely to v3.

How this project uses Riot.js

Pre-compile with npm packages

Riot.js can compile .riot files on browser side. This is very convenient for getting started quickly. However, I chose to precompile with npm for this project. This is because TypeScript can be used for most of the implementation code. When developing applications as large as RealWorld, type checking with TypeScript greatly contributes to work efficiency.

After a few trials, I concluded that the compilation task is rollup and other tasks are reliable to do with gulp. See gulpfile.js and rollup.config.js. I hope it will help those who are considering taking a configuration like this project.

.riot is the interface definition

I treated the .riot file as an interface definition. Information to be displayed on the .riot side and functions called from event handlers are not coded in this, but are coded in *ViewController.ts.

The reason is next

I wanted to use TypeScript as much as possible.

There is a way to write TypeScript in <script> in .riot, but even so, it is difficult to get editor support, and the benefits of writing in TypeScript are not as expected. So I tried to code the implementation on the .ts side, and the .riot side only coded the connection to the implementation.

It has almost the same structure as iOS development

I will explain the second reason. I'm usually an iOS Developer. In iOS, the UI layout is described in a file called .storyboard or .xib. Both are XML. Normally, editing is not done directly by hand, but can be done on the GUI using the Xcode SDK InterfaceBuilder function. After all, the information displayed on the UI and the action by event firing are described in the .swift implementation file. This relationship is very similar to the relationship between the .riot and the .ts implementation code. This meant that the usual strategy could be put directly into web development. Isn't this great?

I was delighted to see that the power of Riot.js removed the barriers to web development. ✊

Use riot-route for routing

I used riot-route for routing following v3. riot-route is an independent and well-designed component that can be used without modification in v4. Major updates have not been made to match Riot.js, but there is no problem.

Designed for large-scale development

Pre-compiling and bundling with npm, adopting TypeScript, all of this means thinking in advance to handle even larger requirements. Adding i18next to this structure will facilitate internationalization. If you need UI animation, you can borrow the power of anime.js and Three.js. If the UI becomes complicated, you can adopt a reactive libraries.

I often witness that riot is worried that it is not suitable for large-scale development because of its simplicity. But it ’s a complete misunderstanding. There is nothing to sacrifice for the simplicity of Riot.js. Riotjs makes it possible to implement RealWorld, and even more complex applications can be written. My assumption is that it would be easy to implement facebook. Who wants more than that?

Points to migrate from v3 to v4

The import instruction has changed

Necessary when precompiling.

v3

import riot from "riot"

v4

import { component } from "riot"

In v4, it is now possible to import only the functions you want to use.

You can also create and call a namespace like this

import * as riot from 'riot'

Mounted explicitly required unmount

From v4 you have to call unmount explicitly. Otherwise your UI will look like BOSS in part 5 of JOJO's bizarre adventure 😈. Don't forget to put true in the second argument of unmount. The root tag will also disappear.

ex v3, v4

Measures against access to childview being deleted

This was the most difficult part of migrating to v4.

Access to parent and child views from v4 has been removed. I able understand Riot.js remove access to parent view. But, I skeptical about remove access to child views.

I tried using the riot-ref-plugin.js described in the official migration guide, but this didn't work 😢.

After trying a lot, I realized that I got a mounted RiotComponent with the component() function. I kept this reference in the implementation code of .ts. Just like IBOutlet in iOS development.

ex. Article table view mounted in articles scene

    onMounted(_,state){
        let owner = state.owner
      	...(Omitted)...
        // Mount child components and Connect action
        let articlesTableView = component(ArticlesTableView)( this.$("#articlesTableView"), {
            didSelectProfile: owner.didSelectProfile,
            didSelectArticle: owner.didSelectArticle,
            didFavoriteArticle: owner.didFavoriteArticle
        })
      	...(Omitted)...
        // Connect outlet
        owner.articlesTableView = articlesTableView
      	...(Omitted)...
    }

ex. Property on the implementation code side

export default class ArticlesViewController {

    // Outlets
    ...(Omitted)...
    articlesTableView: RiotCoreComponent|any
    ...(Omitted)...

ArticlesTableView is a view that lists article title and description. owner is the implementation code written in .ts. When the parent view onMounted () is executed, it explicitly indicates the mount of the child view. (It was done implicitly in v3. I think it was smarter with less boilerplate code, but it can't be helped 🙃) The | any is used to suppress TypeScript warnings. Even in iOS development, there is no checking mechanism for IBOutlet connection, so it may cause problems by connecting an unexpected view at the beginning. I didn't think this was a problem because the mechanism was almost the same.

When the child view is mounted, the handler of the event issued from the child view is passed as initialProps. This is very similar to the IBAction connection in iOS development.

I was able to use the same design as v3 to restore access to child views in the above way.

It's a my boring idea, Child view has a relationship shared life and death with the parent view from the beginning in the screen transition. Using that relationship to allow access to the child is the least wasteful way. I think that using the Observable or Reactive libraries and trying to add another relationship is the last method to consider. In many cases (even as large as RealWorld), it can be implemented without relying on them.

If there are only alternatives written in the official migration guide, It will be difficult to try Riot.js casually. In the next major version, I expect Riot.js to get back access to child views. parent is not required. If the reference is unidirectional, in many cases the problem should not occur.

Writing event handlers with arguments

In v3 you had to use bind(), but in v4 you can now do more appropriate writing.

ex. v3, v4

Other things (officially guided)

• Change extension from .tag to .riot
• Rewrite .riot script to export default
• Move local variable to state
• virtual to template tag There was no trouble just by rewriting :)

Migrated impressions

The adoption of Layered Archtecture made the migration to v4 very smooth. The effect is limited to the presentation layer only. Look at the commit log after August 8th. You can see that the important fixes are concentrated under src/Presentation. The most time-consuming process was to find out how to implement my design with v4. If I know it in advance, I can migrate in a day. (Please note that I do not spend all my time developing this project because I'm doing part-time work remotely). Thanks to Riot.js for making this structure easier.

Since the access method to childView was cut off from riot, I had to push the idea of iOS Development more than v3 in order to organize thoughts. However, this allowed the idea of .riot files to be advanced to .xib without InterfaceBuilder. This has the disadvantage of not being able to get InterfaceBuilder support, but it also has the advantage of being able to define a UI that is smarter than .xib.

🗒 This is an aside, Somewhere a syntax suger that can easily unescape HTML has been proposed. It seems that riot 4.3.7 was not included. This is a very fun feature :).

For guys interested in Riot.js

I've been using Riot.js since 2016 to develop our services. Riot.js is very simple as declared. Since Riot.js does not have many functions by itself, there is not much discussion about itself. That's why you don't see many names on the web. This is because you can spend more time learning how to use CSS frameworks such as tailwindcss, or useful libraries such as Luxon, i18next, inversity, and marked.

I would like to list two important facts here

• Riot.js made iOS Developer possible for web development.
• Riot.js development also leads to learning iOS development.

I wish you the best choice without being bound by numbers like Google Trend or Github star 😉.