Markup Driven Interaction & Lu

Markup Driven Interaction & Lu

Over the past year web development at LinkedIn has undergone great changes. In this session we’ll discuss the open source javascript library developers from LinkedIn have created as an answer to that changing landscape. Spoilers: It allows HTML authors to create rich interactivity purely through markup.

6a8b7ec1ef34bb995053bc823f106267?s=128

Robert Martone

October 15, 2012
Tweet

Transcript

  1. 3.

    @iheartweb | use.lu/html5 Lu is a javascript library that leverages

    semantics. This allows HTML authors to create rich interfaces. (without writing a lick of javascript)
  2. 5.

    @iheartweb | use.lu/html5 HTML is Awesome ‣ HTML describes the

    composition of components by providing a hierarchal structure through nesting ‣ HTML5 gives us new elements and attributes that describe behavior: <video/>, <audio/>, validation ‣ New tags allow developers to make markup more meaningful: <header/>, <footer/>, <menu/>, <section/>, <article/> ‣ ARIA roles attempt to provide semantic and programatic meaning where elements fail to give enough ‣ Good HTML describes how an interface should behave
  3. 8.

    @iheartweb | use.lu/html5 Meaning in Markup ‣ HTML provides Lu

    with (most of) the information required to apply a layer of interactivity ‣ Lu looks at the nesting of HTML to determine how components should be composed ‣ Lu looks at attributes to determine the configuration of components and the role a component should play in an interface ‣ The attribute data-lu is used to notate how a component behaves
  4. 10.

    @iheartweb | use.lu/html5 Lu comes with a growing set of

    components. Each component represents a discrete building block of interactivity.
  5. 11.

    @iheartweb | use.lu/html5 Button ‣ Takes a native event and

    mutates it into something valuable for other components ‣ Most commonly used with <a> and <button> ‣ Can be described through data-lu=”Button” ‣ Button instances are decorated to augment their behavior ‣ Decorated buttons can be annotated with data- lu=”Button:Decorator”
  6. 13.

    @iheartweb | use.lu/html5 Switch ‣ Useful whenever an interface is

    stateful: expanded/collapsed, open/closed, on/off, shown/hidden, etc... ‣ States are added as a class: lu-state-foo ‣ Has a useful API with methods to add and remove state as well as get and set state ‣ Most components are stateful and therefore extend Switch ‣ Works with Button:State ‣ Looks for stateful ARIA attributes
  7. 15.

    @iheartweb | use.lu/html5 Container ‣ Useful when dealing with dynamic

    content. This component loads content given a URI ‣ Respects degradability by treating URI’s how a browser would ‣ Extends Switch ‣ Has a loaded state, and a loading state ‣ Used with Button:Load
  8. 17.

    @iheartweb | use.lu/html5 List ‣ Manages a collection of stateful

    items where one is selected and the others are not ‣ Works well with Container and Switch ‣ Usually used with <ul> and <ol> ‣ Iterative; the API includes methods like previous/next and first/last ‣ Used in composition with Button:Select, Button:Next, Button:Previous, etc... ‣ Looks for aria-selected
  9. 19.

    @iheartweb | use.lu/html5 More! ‣ Tip - used when a

    component overlays the interface and is programmatically anchored to another component ‣ Placeholder - replicates HTML5’s placeholder attributes ‣ Input Validators - replicate HTML5’s validation ‣ Coming soon: Facet List, Slider, Date Picker, Dialog
  10. 25.
  11. 34.

    @iheartweb | use.lu/html5 Architecture Decorators Components Event Provider $ +

    _ Prototypal Inheritance CommonJS Loader Default Mappings Lu Core
  12. 35.

    @iheartweb | use.lu/html5 CommonJS Loader ‣ CommonJS loaders provide a

    require syntax ‣ Allows scripts to be loaded as needed ‣ Lu uses Inject: https://github.com/linkedin/inject/ ‣ Inject provides localStorage and cross-domain support ‣ Coming Soon: support for other CommonJS loaders and AMD
  13. 36.

    @iheartweb | use.lu/html5 Inheritance ‣ Lu uses Fiber: https://github.com/linkedin/Fiber ‣

    Fiber provides syntactical sugar on top of prototypal inheritance ‣ Really Fast: http://jsperf.com/js-inheritance- performance ‣ Developed by the Lu team
  14. 37.

    @iheartweb | use.lu/html5 Lu Core ‣ Small: ~1.6Kb ‣ Provides

    interface for Mapping & Execution ‣ Provides a jQuery plugin for accessing component interfaces ‣ Follows the jQuery plugin spec ‣ Well documented helper methods
  15. 38.

    @iheartweb | use.lu/html5 Default Mappings ‣ Maps Lu components to

    HTML ‣ Provides access to configuration ‣ Allows the creation of pseudo components ‣ Used heavily in the decoration of buttons ‣ Code: https://github.com/linkedin/Lu/blob/master/ scripts/mappers.js
  16. 39.

    @iheartweb | use.lu/html5 Event Provider ‣ Proxy for jQuery events

    w/a little extra sugar ‣ Familiar interface for jQuery users: on, one, trigger, off ‣ Adds observe and notify ‣ Has an event registry ‣ Code: https://github.com/linkedin/Lu/blob/master/ scripts/components/Abstract.js
  17. 43.

    @iheartweb | use.lu/html5 Components ‣ Stackable and discrete building blocks

    ‣ Highly reusable ‣ Highly Testable: https://github.com/linkedin/Lu/tree/master/test ‣ Rich and well documented APIs ‣ Components: https://github.com/linkedin/Lu/tree/master/scripts/components ‣ Extremely lightweight