Web Components With Rails
- 1. Web Components and Rails Boris Nadion boris@astrails.com @borisnadion
- 3. awesome web and mobile apps since 2005
- 4. 1997
- 6. bank
- 9. tasks management app vanilla javascript + HTML running in IE4 on a desktop
- 10. innovation
- 11. mostly C/C++ until 2005
- 12. Ruby
- 13. Rails
- 14. bin
- 15. There are only 10 types of people in world: those who understand binary and those who don’t.
- 16. 102 types of people in web development
- 17. backend
- 18. frontend
- 19. html
- 20. html + css
- 21. html + css + javascript
- 22. full stack 112
- 23. test what engineer are you?
- 24. 2 recent memory leaks what did they blow?
- 25. server 2 backend
- 26. server browser 2 backend 2 frontend
- 27. server browser 2 backend 2 frontend 1 1 full stack
- 28. server browser 2 backend 2 frontend 1 1 full stack designer/PM
- 29. 2005
- 31. $(…) with $$(…) $$ lookup is much more expensive than $
- 32. jQuery 2006
- 33. Angular.js
- 34. ember.js
- 36. MVC / MVVM / MV*
- 37. class MyApp.SomeController extends Marionette.Controller show: (id) -‐> App.mainRegion.show new MyApp.SomeView( model: App.request("somemodel:load", id) ) class MyApp.SomeView extends Marionette.ItemView template: "templates/some/show" templateHelpers: -‐> klass: => if @model.has_something() then "some" else "nothing" initialize: => @listenTo @model, "change", @render class Models.SomeModel extends Backbone.Model url: -‐> Routes.somemodel_path(@get("id")) App.reqres.setHandlers "some model:load": (id) -‐> res = new Model.SomeModel(id: id) res.fetch() res
- 39. XFoo = document.registerElement('x-‐foo') document.body.appendChild(new XFoo())
- 40. proto = Object.create(HTMLElement.prototype) document.registerElement(‘x-‐foo’, prototype: proto)
- 42. proto = Object.create(HTMLElement.prototype) proto.createdCallback = -‐> #... proto.attachedCallback = -‐> #... proto.detachedCallback = -‐> #... proto.attributeChangedCallback = (name, from, to) -‐> #... XFoo = document.registerElement('x-‐foo', prototype:proto)
- 44. proto.createdCallback = -‐> @addEventListener 'click', (e) -‐> alert('yeah')
- 45. photo.createdCallback = -‐> @innerHTML = "<b>I'm bold and inside the x-‐foo</b>"
- 46. Shadow Root
- 47. proto.createdCallback = -‐> shadow = @createShadowRoot() shadow.innerHTML = "<b>I'm bold and inside the shadow root</b>"
- 48. Templates
- 49. <template id="mytemplate"> <style> p { color: yellow; } </style> <p>I'm yellow in a shadow root</p> </template> proto.createdCallback = -‐> template = document.querySelector('#mytemplate') clone = document.importNode(template.content, true) @createShadowRoot().appendChild(clone)
- 51. <!-‐-‐ Define element -‐-‐> <polymer-‐element name="my-‐counter" attributes="counter"> <template> <style> /*...*/ </style> <div id="label"><content></content></div> Value: <span id="counterVal">{{counter}}</span><br> <button on-‐tap="{{increment}}">Increment</button> </template> <script> Polymer({ counter: 0, // Default value counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } }); </script> </polymer-‐element> <!-‐-‐ Use element -‐-‐> <my-‐counter counter="10">Points</my-‐counter>
- 53. xtag.register "x-‐accordion", extends: "div" lifecycle: created: -‐> inserted: -‐> removed: -‐> attributeChanged: -‐> events: "click:delegate(x-‐toggler)": -‐> accessors: togglers: get: -‐> set: (value) -‐> methods: nextToggler: -‐> previousToggler: -‐>
- 55. <element name="b-‐hello-‐world"> <style> </style> <template> <h3>Hello, world!</h3> <p>Lorem ipsum</p> </template> <script> ({ createdCallback: function() { var root = this.createShadowRoot(); root.appendChild(this.template.content.cloneNode(true)); } }); </script> </element>
- 59. polyfill support old browsers
- 60. <!-‐-‐ Polyfill Web Components support for older browsers -‐-‐> <script src="components/platform/platform.js"></script> <!-‐-‐ Import element -‐-‐> <link rel="import" href="google-‐map.html"> <!-‐-‐ Use element -‐-‐> <google-‐map lat="37.790" long="-‐122.390"></google-‐map>
- 62. • custom elements • html imports • templates • shadow root
- 65. // application.html //= require polymer/polymer //= require my-‐navigation/my-‐navigation // my-‐navigation.html.erb <polymer-‐element name="my-‐navigation"> <template> <%= stylesheet_link_tag 'my-‐navigation/style'%> <ul class="navigation"> <li><a href="/">Home</a></li> <li><a href="/">Contacts</a></li> <li><a href="/">Blog</a></li> <li><a href="/">Twitter</a></li> <li><a href="/">Facebook</a></li> </ul> </template> <%= javascript_include_tag "my-‐navigation/my-‐navigation"%> </polymer-‐element> // my-‐navigation.coffee Polymer 'my-‐navigation' // style.sass :host display: block .navigation list-‐style: none margin: 0 background: #fff # ...
- 66. Should I use Polymer for my next project? https://news.ycombinator.com/item?id=7970781
- 67. encapsulation
- 68. clean up HTML
- 69. hide everything shadow DOM
- 70. HTML vs. MV*
- 71. frontend is cool again
- 72. thanks! Boris Nadion astrails.com/blog