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
75
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
Jakarta EE meets AI
ivargrimstad
0
200
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
3
390
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Modular Monolith Monorepo ～シンプルさを保ちながらmonorepoのメリットを最大化する～
yuisakamoto
5
350
Realtime API 入門
riofujimon
0
150
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
RubyLSPのマルチバイト文字対応
notfounds
0
120
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100
ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
RailsConf 2023
tenderlove
29
900
Testing 201, or: Great Expectations
jmmastey
38
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Happy Clients
brianwarren
98
6.7k
Writing Fast Ruby
sferik
627
61k
Designing Experiences People Love
moore
138
23k

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