class: center, middle  ### 10k GitHub Stars<br>10k Bytes # http://riotjs.com ### What I learnt from it --- # About me ## Christian Niederreiter Work for .netx-logo[]  in Wels http://www.netxautomation.com --- # Agenda 1. **Intro**  RIOT, the "Mini React" 2. **Ease of Use**  Functions 3. **Compatibility**  jQuery, LESS/SASS, Typescript, Webpack 4. **Example App**  "Visual Recipe" 5. **Learnings** --- # 1.  Introduction ## RiotJS, the "Mini React"   --- ## 1.  Introduction RIOT is... * **component-based**<br>(like Facebook's React) * **small** (10 Kilobytes) * extremely **intuitive** & **concise** https://facebook.github.io/react ---  --- ## 1.  Introduction ```html <my-component> <p>Hello World</p> <script> console.log('Hello World') </script> <style scoped> :scope { display: block; } </style> </my-component> ``` See? It fits on one slide! --- # 2.  Ease of Use ## Functions/Objects * `this` ← access the Tag object * `this.update()` ←<br>call this after async changes * `this.opts` ← tag attributes * `this.tags` ← all children --- ```html <recipe> <ul if={ ingredients }> <li each={ ingredients }>{ name }</li> </ul> <script> let restApi = require('rest-api') let me = this restApi.getIngredients() .then((ingredients) => { // async me.ingredients = ingredients me.udpate() }) </script> </recipe> ``` * Yogurt * Raspberries * Bilberries --- # 2.  Ease of Use ## Condition & Loop ```html <ul if={ ingredients }> <li each={ ingredients }>{ name }</li> </ul> ``` ---  --- # 3.  Compatibility * **+++ jQuery** (best friends) * **+++ LESS** and SASS (SASS untested) * **+++ Bootstrap** * **++ Webpack** ← "riotjs-loader" * **+ Typescript** (ootb only<br>"typescript-simple") * **Testing?** (build a library and test it) ---  --- # 4.  Example App * https://github.com/cntech/visualrecipe * Runs **instantly*** on every computer with Node.js installed. *) instantly = ```bash $ npm install $ npm install -g typings $ typings install $ npm run serve ``` --- ## 4.  Example App: Webpack .webpack-image[] --- # 4.  Learnings (myself) * mixing HTML+JS+CSS is **good** * Get to know **Webpack** * Get to know **TypeScript** (+ its API) * **Write Webpack Loaders** (it's easy) * **Separation of Concerns** (unlike Angular 1) * Put as much code as possible<br>into **→ libraries** (testability) --- # 4.  Learnings If you decide to write a framework... * **Do not force** sth on the developer * Design it **straightforward** * Provide **short syntax & semantics** * **Separate Concerns** * Never do what jQuery already does<br>(unless you know a good reason) ---  # is far from perfect ## but its API+Documentation are exemplary* *) vorbildlich ---  # teaches us how to do things right ### as a developer ### and as a framework designer --- # Try RIOT ## Enjoy its docs ### improve it ### and finally use it in production ### or use other frameworks like RIOT --- ## Thank You for Listening ### You are a great audience ### Now I would like to answer your Questions. **Email me: christian@niederreiter.tech** **Slack me: cntech|Stahlstadt.js**