How working on Riot.js has changed me forever

Frontend Conference Zürich 2016

Transcript

1. Riot.js How working on Riot.js has 
 changed me forever Gianluca Guarini @gianlucaguarini Frontend Conference 2016
2. 2 var categoryProperties = _.omit(this.activeCategory.attributes, "types"); var productsArray = this.activeCategory.get("types"); var rowModelSelected = App.Views.FurnituresView.RowModelSelectedl var currentSection = App.Views.MainView.currentStatus; var newProductsArray = []; this.idProductsToAdd = []; this.$subMenu.find("li.product input").each(function () { var $input = $(this); var productId = $input.closest("li input").attr("id"); if ($input.is(":checked")) { var productToAdd; var isProductAlreadyThere = rowModelSelected.containsProduct(productId, currentSection); self.idProductsToAdd.push(productId); if (!isProductAlreadyThere) { productToAdd = _.clone(self.collections[currentSection].getProductById(productId)); } else { productToAdd = isProductAlreadyThere; } newProductsArray = _.union(newProductsArray, self.addProductsPack(productToAdd)); } }); My code yesterday
3. 3 My code today <timer> <p>Seconds Elapsed: { time }</p> <script> this.time = opts.start || 0 tick() { this.update({ time: ++this.time }) } var timer = setInterval(this.tick, 1000) this.on('unmount', function() { clearInterval(timer) }) </script> </timer>
4. 4 What’s the problem?
5. 5 It occurs when the amount of input to a system exceeds its processing capacity. Information overload
6. 6 Some everyday examples
7. 7 {{diagnostic}} <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </div> <div class="form-group"> <label for="alterEgo">Alter Ego</label> <input type="text" class="form-control" id="alterEgo" [(ngModel)]="model.alterEgo" name="alterEgo"> </div> <div class="form-group"> <label for="power">Hero Power</label> <select class="form-control" id="power" required [(ngModel)]="model.power" name="power"> <option *ngFor="let p of powers" [value]="p">{{p}}</option> </select> </div>
8. 8 todo.view = function() { return [ m("input", { onchange: m.withAttr("value", todo.vm.description), value: todo.vm.description() }), m("button", {onclick: todo.vm.add}, "Add"), m("table", [ todo.vm.list.map(function(task, index) { return m("tr", [ m("td", [ m("input[type=checkbox]", { onclick: m.withAttr("checked", task.done), checked: task.done() }) ]), m("td", { style: { textDecoration: task.done() ? "line-through" : "none"} }, task.description()), ]) }) ]) ]; };
9. 9 var Profile = React.createClass({ render: function () { return ( <InlineCss stylesheet={` & .card { cursor: pointer; margin: 15px; padding: 15px; text-align: center; height: 200px; } & img { width: 130px; height: 130px; } & p { margin: 10px; } `}> <div className="card"> <img src="mao.jpg" /> <p>Mao</p> </div> </InlineCss> ); } }); <div id="InlineCss-1"> <div class="card"> <img src="mao.jpg"> <p>Mao</p> </div> <style> #InlineCss-1 .card { cursor: pointer; margin: 15px; padding: 15px; text-align: center; height: 200px; } #InlineCss-1 img { width: 130px; height: 130px; } #InlineCss-1 p { margin: 10px; } </style> </div> WTF
10. 10 before the project Backenders reactions
11. 11 Backenders reactions after the project
12. 12 What’s the solution?
13. 13 Use what you know best and learn the foundation of the technology you are currently using
14. 14 User interface micro-library ( 9kb )
15. 15 Simplicity is everything
16. 16 …yes cool but How?
17. 17 New codestyle • less code • shorter variables names • less API methods • no semicolons • elegant and beauty source code
18. 18 New ideas & approaches • thinking in components • automating everything • building by myself for myself • experimenting with other programming languages
19. 19 Always share your knowledge doing Open Source
20. 20 Conf Greeting: bit.ly/2bxU7di Other cool examples: bit.ly/2bxTErJ It’s demo time
21. 21 Think with your mind code with your heart
22. 22 @gianlucaguarini github.com/GianlucaGuarini dreipol.ch riotjs.com Thanks !