Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Harnessing the Power of UI Components

Phil Cockfield
October 20, 2014
Programming
2
160

Harnessing the Power of UI Components

Delivered at HTML5DevConf in SF, 20 Oct 2014.
Synopsis:

HTML5 apps are trending towards most (or all) of the behavioral logic running on the client. Because of this, we now need to think about architecting these UI's more like "native apps" than “pages”. While this dramatically increases the complexity on the client, it also opens new opportunities to tame that complexity through modern, modular UI component design.

Phil Cockfield will talk about practical approaches to writing clean, modular, reusable HTML5 UI components, and introduce a new concept of a "UI Harness" which brings together the flexibility of manual UI testing with the power of automatable unit tests.

Audience members will get an historical view of UI development on the web, showing how we got to where we are today, highlighting what is different in this new world of "native like," fully client-side UI development. The talk will illustrate this by delving into real-world examples of "UI Harnessing" in HTML5 for radically speeding up modular UI development using the Meteor framework.

http://uiharness.com
https://respond.ly

Phil Cockfield

October 20, 2014
Tweet

More Decks by Phil Cockfield

See All by Phil Cockfield
Getting Started with Respondly
philcockfield
0
74
Harnessing the Power of UI Components (HTML5 Dev Conf)
philcockfield
0
170
Respondly and the UI Harness (Meteor Devshop)
philcockfield
2
300

Other Decks in Programming

See All in Programming
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
200
The grand strategy of Ruby Parser
yui_knk
4
220
Apache Hive 4 on Treasure Data
ryukobayashi
1
480
Direct Style Effect Systems The Print[A] Example A Comprehension Aid
philipschwarz
PRO
0
400
WinActorの勉強を継続する方法
tamai_63
0
130
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
110
酒飲んでたらテックリードになった話
spbaya0141
0
200
Namespace, What and Why
tagomoris
3
610
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
Docker_OSS_ホスティング入門
satokoki645
0
140
SIMD Parallel Programming with the Vector API
josepaumard
0
250

Featured

See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Designing the Hi-DPI Web
ddemaree
276
33k
The Language of Interfaces
destraynor
151
23k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Music & Morning Musume
bryan
41
5.6k
Navigating Team Friction
lara
179
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
A Modern Web Designer's Workflow
chriscoyier
689
190k
How GitHub Uses GitHub to Build GitHub
holman
468
290k

Transcript

  1. hello @philcockfield Delivered to: HTML5 Dev Conf, Oct 2014, Moscone

    Center, San Francisco

  2. Harnessing the power of UI components. Using

  3. h1 h2 p Lorem ipsum dolor sit amet, consectetur adipisicing

    elit, sed do eiusmod tempor incididunt ut labore et. “page” “app” Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ip sit amet conse adipisi sed do eiusmod t. Lorem ipsum dolor Stateful Client Stateless Client

  4. ui the new way.

  5. ui the new (old) way.

  6. history a brief (and highly partial) of user interface.

  7. 1950/60’s Mainframes http://users.monash.edu.au/~ralphk/electronics-nostalgic-adds.html “Dumb” Terminal “Smart” Server (Mainframe)

  8. 1970’s Alan Kay with an “Alto” at Xerox PARC SmallTalk,

    Objects, GUI, Overlapping Windows. http://cyborganthropology.com/File:Alan-kay.jpg

  9. 1970’s Model View Controller. http://cyborganthropology.com/File:Alan-kay.jpg Controller View Model Updates Manipulates

    Sees Uses User

  10. 1984 ... Desktop apps: • Mac • Windows (Forms) •

    Java (Swing) Work done on the client.

  11. 1993 (c) Paul Clark - http://commons.wikimedia.org/wiki/File:Tim_Berners-Lee_at_data.gov.uk_launch.jpg The Web Browser.

  12. 1993 The Rails Logo - Copyright, MIT 2009 - http://commons.wikimedia.org/wiki/File:Ruby_on_Rails-logo.png

    “Page” paradigm. GET <html> <html> “Smart” Server “Dumb” Terminal HTTP

  13. 1993 The Rails Logo - Copyright, MIT 2009 - http://commons.wikimedia.org/wiki/File:Ruby_on_Rails-logo.png

    Mainframe GET <html> <html> “Smart” Server “Dumb” Terminal HTTP

  14. 2000... Basecamp - 37signals (initial release Feb 2004) Web “Apps”

    circa

  15. 2004 Dumb Client MVC The Rails Logo - Copyright, MIT

    2009 - http://commons.wikimedia.org/wiki/File:Ruby_on_Rails-logo.png The “smarts” are on the server. Model View <html> Controller GET/POST Page Redraw

  16. 2005 View AJAX REST End Point XMLHttpRequest <html> JS Some

    of the “smarts” move to the client. GET/POST Model Controller

  17. 2007 Booom! This happens. Interlude Stateful Client

  18. ~2012 Back to full MVC on the client. Controller View

    Model Updates Manipulates Sees Uses User HTML5 Thin Server

  19. 2014 <tmpl> JS <tmpl> JS Isomorphic Javascript Today: Realtime //

    Everywhere The “smarts” are everywhere. “Smart” Client JS DDP Real-time JS DDP Real-time MVC MVC

  20. Alto/Mac/Win Web 1.0/2.0 HTML5: RealTimeWeb Smarts on the client Smarts

    on the server Smarts on the client Mainframe Smarts on the server the new (old) way.

  21. What does this mean for us web developers?

  22. h1 h2 p Lorem ipsum dolor sit amet, consectetur adipisicing

    elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ip sit amet conse adipisi sed do eiusmod t. Lorem ipsum dolor What we now do looks a lot like native app development. Stateful Client

  23. Client/Server Client/Server + AJAX ! ! A ton of JS

    No JS Getting HARD! Complexity Difficulty Cloud Client Apps Hard Easy

  24. Client Complexity Client/Server Client/Server + AJAX ! ! A ton

    of JS No JS Opportunity! Cloud Client Apps Less Hard

  25. How so?

  26. ©2007 L Hoffheins, some rights reserved.

  27. None

  28. ©2007 L Hoffheins, some rights reserved. Isolation and encapsulation.

  29. Hard when UI/MVC is split between client and server. Isolation

    and encapsulation. Model View <html> Controller GET/POST Page Redraw Server

  30. ©2007 L Hoffheins, some rights reserved. Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ip sit amet conse adipisi sed do eiusmod t Lorem ipsum dolor Stateful Client App Isolation and encapsulation.

  31. ©2007 L Hoffheins, some rights reserved. Lorem ipsum dolor sit

    amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ip sit amet conse adipisi sed do eiusmod t Lorem ipsum dolor Isolation and encapsulation. Easier on a stateful client.

  32. ©2007 L Hoffheins, some rights reserved. Isolation and encapsulation. Cell

    image: ©2013 BruceBlaus - http://bit.ly/1sSAEPO, Biological Cell

  33. ©2007 L Hoffheins, some rights reserved. Isolation and encapsulation. Cell

    image: ©2013 BruceBlaus - http://bit.ly/1sSAEPO, API • isPlaying • elapsedTime • trackLength • + play() • + stop() • ! changed Properties, methods, events. Internal implementation encapsulated and shielded from the world via an API.

  34. ©2007 L Hoffheins, some rights reserved. I, Curran Kelleher [GFDL

    (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/) or CC-BY-SA-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/2.5-2.0-1.0)], via Wikimedia Commons

  35. ©2007 L Hoffheins, some rights reserved. Real world example. An

    application. https://respond.ly

  36. ©2007 L Hoffheins, some rights reserved. An application. There’s quite

    a lot going on here. https://respond.ly

  37. ©2007 L Hoffheins, some rights reserved. Isolated components.

  38. ©2007 L Hoffheins, some rights reserved. Isolated components. Complete mini-applications

  39. ©2007 L Hoffheins, some rights reserved. A tiny universe unto

    itself.

  40. ©2007 L Hoffheins, some rights reserved. About eight complete mini

    “applications”. PopupPrompt (OK/Cancel) TextInput UserSelect UserSelectList UserSelectListItem Popup

  41. ©2007 L Hoffheins, some rights reserved. UserSelectList

  42. ©2007 L Hoffheins, some rights reserved. • focus() • clear()

    • caretToEnd() • isEnabled • isValid • isSpinning • multiLine • required • hoverEdit • selectOnFocus • maxLength • prefix • labelPosition • text • label • placeholder API Properties Methods • changed • focus • blur • keyDown • keyUp Events TextInput

  43. ©2007 L Hoffheins, some rights reserved. Why is this good?

    When we isolate our UI modules, we isolate our “problems.” I, Curran Kelleher [GFDL (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/) or CC-BY-SA-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/2.5-2.0-1.0)], via Wikimedia Commons

  44. ©2007 L Hoffheins, some rights reserved. HTML5 Components API Component

    JS <tmpl> CSS Example using: Meteor/Blaze Bower, Component, Ender, Jam, Volo, Meteor, Angular, Ember…Shadow Dom - Polymer, X-Tag etc.

  45. ©2007 L Hoffheins, some rights reserved. Typically we throw together

    some kind of ad hoc web page. Ctrl How do we build/test these?

  46. ©2007 L Hoffheins, some rights reserved. For example... TextInput

  47. ©2007 L Hoffheins, some rights reserved. TextInput Ad hoc buttons

    with event handlers to exercise the API. The component under test. Simple HTML page.

  48. ©2007 L Hoffheins, some rights reserved. AD HOC SCAFFOLDING Highly

    flexible Manual manipulation of UI Programmatic manipulation of API Ad Hoc Scaffolding

  49. ©2007 L Hoffheins, some rights reserved. AD HOC SCAFFOLDING UNIT

    TESTS Describe behavior (design) Assertions (correctness) Automation (CI) Highly flexible Manual manipulation of UI Programmatic manipulation of API

  50. ©2007 L Hoffheins, some rights reserved. UNIT TESTS AD HOC

    SCAFFOLDING Highly flexible Manual manipulation of UI Programmatic manipulation of API UI Harness Describe behavior Assertions Automation

  51. ©2007 L Hoffheins, some rights reserved. UI Harness A principled

    way to isolate, test and document modular UI. www.uiharness.com Made for

  52. TextInput • focus() • clear() • caretToEnd() • isEnabled •

    isValid • isSpinning • multiLine • required • hoverEdit • selectOnFocus • maxLength • prefix • labelPosition • text • label • placeholder API Properties Methods • changed • focus • blur • keyDown • keyUp Events Demo
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None

  61. www.uiharness.com I, Curran Kelleher [GFDL (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/) or CC-BY-SA-2.5-2.0-1.0

    (http://creativecommons.org/licenses/by-sa/2.5-2.0-1.0)], via Wikimedia Commons When we isolate our UI modules, we isolate our “problems.”

  62. More complex, less hard. Client Client/Server Client/Server + AJAX !

    ! A ton of JS No JS Cloud Client Apps Through clever architecture Hard Less Hard

  63. www.uiharness.com UI Harness A pattern to design, build and test

    isolated UI. https://respond.ly