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

Harnessing the Power of UI Components (HTML5 De...

Phil Cockfield
October 20, 2014
Programming
0
170

Harnessing the Power of UI Components (HTML5 Dev Conf)

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
philcockfield
2
160
Respondly and the UI Harness (Meteor Devshop)
philcockfield
2
300

Other Decks in Programming

See All in Programming
Click-free releases & the making of a CLI app
oheyadam
2
120
Jakarta EE meets AI
ivargrimstad
0
740
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
260
色々なIaCツールを実際に触って比較してみる
iriikeita
0
340
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Outline View in SwiftUI
1024jp
1
340
C++でシェーダを書く
fadis
6
4.1k
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
280
イベント駆動で成長して委員会
happymana
1
340
カンファレンスの「アレ」Webでなんとかしませんか？ / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
110
Ethereum_.pdf
nekomatu
0
470
Flutterを言い訳にしない！アプリの使い心地改善テクニック5選🔥
kno3a87
1
210

Featured

See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
BBQ
matthewcrist
85
9.3k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Rails Girls Zürich Keynote
gr2m
94
13k
A designer walks into a library…
pauljervisheath
204
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k

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