Por que Riot.js?

Transcript

2. Frameworks JavaScript
3. Vamos falar dos frameworks • Backbone.js • AngularJS • React • Riot.js
4. Mas antes alguns conceitos • SPA • MV* • WebComponents
5. SPA
6. SPA “JavaScript wasn't designed for software engineering. It's a dynamically typed language with forgiving syntax, oddball prototypical inheritance, and no official means of packaging code. What started out as a scripting language for decorating HTML pages is now being used more than ever by large teams of developers and cut-and-pasters alike. The result is a lot of opportunities for broken websites.” http://paislee.io/evolution-of-the-single-page-application-2-of-2
7. MV* http://www.andyfrench.info/2010/07/comparing-mvc-mvp-and- mvvm-patterns.html
8. WebComponents “Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.” https://www.webcomponents.org/introd uction
9. WebComponents https://www.webcomponents.org/introduction
10. WebComponents vs. iframes “Is it just me or anyone else is also wondering why these guys are still being used even though the 90s are long gone? Well, believe it or not - no one has come up with a better alternative for embedding another HTML document into your page since Microsoft first introduced the <iframe> tag in 1997. ” http://webagility.com/posts/web-compon ents-vs-iframes
11. WebComponents vs. iframes “(...) accessing values in a given DOM element in an iframe from the parent document is a hassle by design. The DOM elements are in a completely separate context, so you need to traverse the iframe’s DOM to access the values you’re looking for. Contrast this with web components which offer an elegant way to expose a clean API for accessing the values of custom elements.” https://stackoverflow.com/a/25608953/ 1316620
12. Backbone.js “When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.” http://backbonejs.org/#Getting-started
13. Backbone.js “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.” http://backbonejs.org http://todomvc.com/examples/backbone
14. Backbone.js “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.” http://backbonejs.org http://todomvc.com/examples/backbone
15. Backbone.js “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.” http://backbonejs.org http://todomvc.com/examples/backbone
16. AngularJS “AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!” https://angularjs.org
17. AngularJS “We wanted to see if we could make it easier for Web designers, not necessarily Web developers, but Web designers, to sprinkle a little bit of extra HTML into their code so that they could turn a static form to something they could actually send in an email. The idea would be that you could [for example] have a mom-and-pop shop that sells pizza or something, maybe you could [have] a simple ordering system just by adding a bunch of these tags and they could send an email to the server.” https://www.infoworld.com/article/261280 1/javascript/what-s-so-special-about-googl e-s-angularjs.html
18. AngularJS • HTML complexo • JavaScript complexo • Dirty checking • Two way data binding
19. HTML complexo https://docs.angularjs.org/api/ng/directive/ngRepeat
20. HTML complexo https://blog.dantup.com/2014/08/you-have-ruined-html
21. HTML complexo https://docs.angularjs.org/api/ng/directive/ngPluralize
22. HTML complexo https://docs.angularjs.org/api/ng/directive/ngClassEven
23. JavaScript complexo “An AngularJS service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function. When you request a service, the $injector is responsible for finding the correct service provider, instantiating it and then calling its $get service factory function to get the instance of the service.” https://docs.angularjs.org/api/auto/service/ $provide
24. JavaScript complexo https://stackoverflow.com/q/15666048
25. JavaScript complexo http://www.simplygoodcode.com/2015/1 1/the-difference-between-service-provide r-and-factory-in-angularjs/
26. JavaScript complexo https://stackoverflow.com/a/23683176
27. Two way data binding http://johndepippo.com/2017/05/23/two- way_data_binding_vs_one-way_data_fl ow
28. Two way data binding “Also two way data-binding means that changing anything in your application will trigger hundreds of functions that monitor changes. It’s slow, and it is especially all turns bad on mobile platforms and when you write something something complex. And it is a fundamental part of the framework. Angular even imposes restrictions on how rich UI you can write. And what is most interesting is that this is not some ephemeral or distant limit you will never experience. It’s only 2000 watchers, and if you develop more or less large application, you will undoubtedly run into this limitation.” https://medium.com/@mnemon1ck/why-yo u-should-not-use-angularjs-1df5ddf6fc99
29. Dirty checking https://stackoverflow.com/q/1187362 7
30. Dirty checking https://stackoverflow.com/questions/11873627#comm ent63710282_11873627
31. Dirty checking https://stackoverflow.com/a/1187383 9
32. React “React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.” https://reactjs.org
33. React • Mutação • One way data binding • Virtual DOM • JSX
34. Mutação “(...) a few years ago, starting with our chat rewrite, we tried to start structuring our application a little bit differently, we wanted to minimize the amount of mutation that developers had to deal with. Mutation is a necessary evil, you have to deal with it, but we want to minimize the amount of mutation that developers have to code themselves” https://www.youtube.com/watch?v=GW 0rj4sNH2w
35. One way data binding http://johndepippo.com/2017/05/23/two- way_data_binding_vs_one-way_data_fl ow
36. Virtual DOM “(...) in the simplest way that we have found conceptually to structure and render our views is to just try and avoid mutation altogether, so what I mean by that is, anytime any of your data changes, just blow away your view completely and re-render it from scratch.” https://www.youtube.com/watch?v=GW 0rj4sNH2w
37. Virtual DOM https://www.slideshare.net/floydop hone/react-preso-v2
38. Virtual DOM https://www.slideshare.net/floydop hone/react-preso-v2
39. Virtual DOM https://www.slideshare.net/floydop hone/react-preso-v2
40. Virtual DOM https://www.youtube.com/watch?v=BYb gopx44vo
41. Virtual DOM https://www.youtube.com/watch?v=BYb gopx44vo
42. JSX
43. JSX
44. Riot.js “Riot lets you build user interfaces with custom tags using simple and enjoyable syntax. It uses a virtual DOM similar to React but faster. Riot is very tiny compared to industry standards. We think there is a clear need for another UI library.” http://riotjs.com
45. Riot.js • v1 • v2 • v3 • Sintaxe agradável • Pequeno • Próximo aos padrões • Inspirado por React • DOM expressions binding
46. v1 “Models can be plain old JavaScript, and views can be plain old HTML. A framework should not burden the development and dictate how things should go. No "Backbone way", "Angular way" or "Ember way". Frameworks come and go but classic programming skills are forever. Riot is a manifesto for vanilla JavaScript and jQuery.” https://muut.com/blog/technology/riotjs- the-1kb-mvp-framework.html
47. v2 “We borrowed ideas from Riot 1.0 (minimalism), React (virtual dom, components) and HTML5 components (custom tags). We wanted a tiny API. Just HTML and JavaScript without riot- data attributes or other personal flavors.” https://muut.com/blog/technology/riot-2. 0
48. v3 “We have resolved many problems and they required a major release bump because they couldn’t be fixed with the previous codebase. Migration from Riot 2 shouldn’t be very difficult. Refer to the list of breaking changes below.” http://riotjs.com/guide/migration-from-ri ot2
49. Sintaxe agradável
50. Sintaxe agradável
51. Pequeno
52. Pequeno
53. Próximo aos padrões
54. Próximo aos padrões
55. Inspirado por React
56. Inspirado por React
57. Inspirado por React
58. DOM expressions binding
59. DOM expressions binding
60. DOM expressions binding
61. Riot.js • Por que Riot.js?
62. Por que Riot.js? https://news.ycombinator.com/item?id=14146669
63. Por que Riot.js? “I still firmly believe riot.js is the best "react-like" tool even though it's almost entirely unknown (sadly) and its website/PR/general presentation is a bit janky.” https://news.ycombinator.com/item?id=1 4146669
64. Por que Riot.js? “It's essentially a very very tiny, minimally opinionated structural layer that lets you build html components (called "tags") using almost entirely vanilla JS.” https://news.ycombinator.com/item?id=1 4146669
65. Por que Riot.js? “It inverts the JSX paradigm: where JSX is "html in the middle of your code", in riot the markup is primary and the code is a supplement to it (expressions in the markup via templates/mustaches, additional tag-specific script added outside of the markup if desired, tag-specific scoped css) so there's no JSX insanity.” https://news.ycombinator.com/item?id=1 4146669
66. Por que Riot.js? “It's like a much leaner react/vue, and frankly I love it. It's entirely minimal and you can bring in any library you want to use along with it (e.g. jquery for ajax, redux if you want...).” https://news.ycombinator.com/item?id=1 4146669
67. Por que Riot.js? “It has virtually no cognitive load (just looking at a sample "tag" file for 2 minutes gives you ~80% of what you need to know), you just pick it up and work with it and just occasionally peek at the docs if needed.” https://news.ycombinator.com/item?id=1 4146669
68. Por que Riot.js? “I'm a huge fan of the "minimally opinionated" approach. The fewer idiosyncrasies and custom abstractions in tools, the more productive you are (I'm looking at you, angular!).” https://news.ycombinator.com/item?id=1 4146669
69. Por que Riot.js? “Riot has its own technique, it's similar to VDOM but strictly speaking it isn't VDOM. What riot simply does is noticing when the value of an {expression} has changed and when that happens it re-renders the related tag(s). So the check does not involve the whole DOM, but only the template expressions. This is simpler and sometimes faster.” https://muut.com/riot-js#!/riot-js/using:vi rtual-dom-and-diffing