Milwaukee JS - Live binding with CanJS
- 1. Conquering the DOM with live binding MilwaukeeJS Stan Carrico, JS Engineer
- 2. What is live binding?
- 3. definition a tool that produces a direct HTML representation of the current state of an underlying data structure also referred to as “data binding”
- 4. why you want to use it more solid separation of view manipulation logic from data and control logic reduce complexity of implementation reduce or eliminate boilerplate DOM manipulation code offload DOM creation to an optimized library ** ** not always faster than manual updates, but reduced complexity outweighs the potential speed decreases in most cases.
- 6. common characteristics of live binding solutions computed properties template view model DOM/custom event handler patterns to update data structures one way (data —> UI) and two-way (ui <—> data) binding
- 7. how does live binding work?
- 8. for most live binding solutions… template is "compiled" into a set of function hooks template engine subscribes to observable object events trigger calls to function hooks, which updates a specific part of output. custom bindings allowed through use of helper functions in templates
- 10. can.view wrapper for templating solutions that hooks up bindings to "compiled" template output accomplishes template acquisition if necessary can be used with or without other parts of the framework
- 12. can.compute observable data object, emits events when it changes the basis of can.Map and can.List
- 13. simple example (one more time) http://codepen.io/shcarrico/pen/gvjpi
- 14. can.Control A lightweight wrapper around a DOM element that provides a pattern for memory safe event handlers and element content lifecycle. element the root element for your control all event handlers are auto delegated to the control’s element options scoped properties provided during instantiation can emit events, which will be routed to internal handlers
- 16. can.Component A web component polyfill providing a pattern and utility methods to implement live bound page controls represented by a custom HTML tag. wait, what’s a web component?
- 17. the web components spec http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ shadow dom
- 18. can.Component tag the custom tag that represents the external interface to the component
- 19. can.Component scope an instance of can.Map, or the component's "view model"
- 20. can.Component template a string template in can.Mustache or can.Stache syntax. Used to create the markup for this component.
- 21. can.Component helpers helper functions that can perform logic to produce string output for your template.
- 22. can.Component events a list of event handlers. these are delegated to the custom tag for the component.
- 23. all those parts again.. can.Component tag scope template helpers events
- 24. a different large scale pattern define but do not instantiate controls or more traditional constructs require a ‘bootstrap’ script components (and web components) instantiate themselves when their custom tag is encountered to “init” your component, you just put it in the template rendering pipeline in future, you will be able to include custom tags directly in your HTML
- 25. can.Component two way binding http://codepen.io/shcarrico/pen/zHmuk
- 27. Thank you for coming! http://bithub.com/ https://github.com/shcarrico http://codepen.io/shcarrico/
Editor's Notes
- #25: data can be passed in via element attributes for scoping reasons, we require a root template to be injected into the actual DOM we prefer a small manual step to a large automated scanner.. w/o full browser support, scanning would be required.