RIOT Tutorial 01: OVERVIEW

--- tags: mstu5013, tutorial, js, riot --- # RIOT Tutorial 01: OVERVIEW ## What is RIOT.JS? - RIOT is a JS framework. It combines `HTML`, `CSS` and of course, `JS`. - By using `HTML` custom tags, it allows you to create components that can be used more than once. The markup of RIOT **components** resemble the structural form of `HTML` tags. As you will remember from **MSTU 5003**, `HTML` tags are element names surrounded by `< >`. ```htmlmixed <tag-name> Content, Logic, Styles go here... </tag-name> ``` - As with `HTML`, it needs an opening and closing tags. Self-closing tags are not used with RIOT. ## Why use components? - Imagine having the same code repeated throughout your Webpage (e.g. a _Navbar_, a _Tweet_ on a Twitter Feed). With **RIOT** you can recycle your components and use them whenever needed. ```htmlmixed=  <div> <div> <p>Tweet<p> <div>Author</div> <div>Content</div> </div> <div> <p>Tweet<p> <div>Author</div> <div>Content</div> </div> <div> <p>Tweet<p> <div>Author</div> <div>Content</div> </div>  </div> ``` vs. ```htmlmixed=  <tweet> <p>Tweet<p> <div>Author</div> <div>Content</div> </tweet>  <div> <tweet></tweet> <tweet></tweet> <tweet></tweet>  </div> ``` - Indeed, the `index.html` page will look a lot different if using **RIOT**. Instead of having long lines of code, it will have **components**. Your code, therefore, will be cleaner and easier to read. - In Riot, a component is also referred to as a **tag**. - Each **tag/component** will contain the `HTML`, `style` and `js` code specific to that component. In that way, you can wrap up the `JS` and `style` specific to each `HTML` tag under a single component. In Software design, this is referred as ENCAPSULATION. - These **tag/components** can be nested, creating parent-child relationships. E.g. Nested Components ```htmlmixed=  <author> <p>Author</p> <button>Email Me!</button> </author>  <tweet> <p>Tweet<p> <div>Content</div> <author></author> </tweet>  <div> <tweet></tweet> <tweet></tweet> <tweet></tweet> </div> ``` ## How are components structured? - Each **component** will start with the `opening tag` and needs to be closed with its corresponding `closing tag`. - Both must be kept in a separate line, with no indents or spaces. - Everything in between the opening and closing tags is the `tag content` and should be indented. - Depending on the use of the component, you may want to create a separate `style` tag with the `css code` and `script` tag with the `js code`. ```jsx= <component1> <h1>Hello {user || 'unknown'}!</h1> <script> // `this` refers to an instance of an element "component1" this.user = "Steven Universe"; </script> <style> /* :scope refers to CSS rules applied to <component1> element */ :scope { display: block; padding: 10px 10px; text-transform: uppercase; text-align: center; } </style> </component1> ``` ## Where and how to save your tag files? - For each custom tag you should have its corresponding file. - The file name needs to match the `tag name`, and the extension need to be `.tag`. - It's recommended that these files are kept in a separate folder named **tags**. E.g. RIOT Project Structure ``` - PROJECT - JS - main.js - CSS - styles.css - TAGS - tweet.tag - author.tag - index.html - README.md ``` ## How to set up RIOT? You will need 3 important parts in your `HTML` document to have RIOT up and running. You can place them at the end of you page, just before the `body` closing tag. E.g. index.html with RIOT ```htmlmixed= <html> <head> ... </head> <body>  <component1></component1>  <script src="tags/component1.tag" type="riot/tag"></script> <script src="tags/component2.tag" type="riot/tag"></script> <script src="tags/tweet.tag" type="riot/tag"></script> <script src="tags/author.tag" type="riot/tag"></script>  <script src="https://cdn.jsdelivr.net/npm/riot@3.10.3/riot+compiler.min.js"></script>  <script> riot.mount('*'); </script> </body> </html> ``` 1. **A reference to the _tag_ files in the `HTML` document:** ```htmlmixed <script src="tags/component1.tag" type="riot/tag"></script> <script src="tags/component2.tag" type="riot/tag"></script> ``` - As you may notice: - They have the structural form of importing `JS` scripts but the `type="riot/tag"` - You need to create a **script reference** per **component/tag**. In this case we are referencing 2 components. 2. **Importing Riot with CDN (latest 3.10.X)** ```htmlmixed <script src="https://cdn.jsdelivr.net/npm/riot@3.10.3/riot+compiler.min.js"></script> ``` - Instead of using a **CDN**, you can also download the RIOT library using `npm install riot`. If that's the case, you can locally reference the RIOT library. 3. **Finally, you need to *mount* the tags.** ```htmlmixed <script> riot.mount('*'); </script> ``` - The `'*'` argument allows you to mount all the tags at once. Otherwise, you will be required to mount tag by tag. - So in the section example, `component1` will be mounted at the `<component1></component1>` mounting point. - Nested tags (children tags inside parent tags) are automatically initialized as soon as the parent tag is mounted and initialized. ## How to view RIOT project? Unlike regular HTML/CSS/JS, in order for Riot projects to be _viewed_ in the browser, we need to have a web-server _HOST_ the project. Opening your Riot project `index.html` will generally show nothing. In order to view Riot projects - you can use the package you have added to Atom, `atom-live-server`. 1. Open the root folder of your Riot project in Atom. - Your `index.html` should be in the root. 2. Do `Packages > atom-live-server > Start server` 3. This should open up your default browser (strongly recommend Chrome) and give you an address that looks something like this: `http://127.0.0.1:3000` - `127.0.0.1` is the IP address, `3000` is the port number. You might have different numbers. That's okay. Whatever gets opened up, is the _address_ that your server is serving on. 4. You can access your server manually by going to `http://localhost:3000` while your server is running. :::info **AUTHORS** By Anabel Bugallo; Edited by Jin Kuwata :::