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

2019-10-09-SPA_Critique_JS_Days.pdf

Stefan Tilkov
October 09, 2019
950

 2019-10-09-SPA_Critique_JS_Days.pdf

A rant about single-page apps (SPAs), their hostility towards users, their architectural problems, and the “classical” alternative.

Stefan Tilkov

October 09, 2019
Tweet

Transcript

  1. What’s wrong
    with Single-Page
    Apps (and what
    to do about it)
    Stefan Tilkov

    [email protected]
    @stilkov
    JavaScript Days 2019, Berlin
    "Science Museum, ceiling" by Elecé is licensed under CC BY 2.0

    View full-size slide

  2. @stilkov
    Annoying your app users
    in 10 easy steps

    View full-size slide

  3. @stilkov
    1.

    Forbid the use of the back
    and forward buttons

    View full-size slide

  4. @stilkov
    2.

    Send them to the home
    page when they hit
    “refresh” …

    View full-size slide

  5. @stilkov
    3.

    … or at least ensure the
    browser pops up a
    warning window

    View full-size slide

  6. @stilkov
    4.

    Make sure they can’t open
    a second browser window

    View full-size slide

  7. @stilkov
    5.

    Let them see UI decoration
    and ads first, content last

    View full-size slide

  8. @stilkov
    6.

    Make sure they can’t
    bookmark or send a link

    View full-size slide

  9. @stilkov
    7.

    Don’t let Google index
    anything

    View full-size slide

  10. @stilkov
    8.

    Show users a picture of
    your app – it’s surely
    better than nothing

    View full-size slide

  11. @stilkov
    9.

    Disable assistive
    technologies. Who needs a
    screen reader, anyway?

    View full-size slide

  12. @stilkov
    10.

    Ensure non-functioning
    JavaScript gives them a
    blank page

    View full-size slide

  13. @stilkov
    History repeating …
    CORBA
    Web
    WS-*
    REST

    View full-size slide

  14. @stilkov
    What’s the client side analogy?

    View full-size slide

  15. @stilkov
    1) in the SOAP/WSDL sense
    “Web app”2)
    2) built as a careless SPA
    “Web service”1)
    > Uses HTTP as transport
    > Ignores HTTP verbs
    > Ignores URIs
    > Exposes single “endpoint”
    > Fails to embrace the Web
    > Uses browser as runtime
    > Ignores forward, back, refresh
    > Does not support linking
    > Exposes monolithic “app”
    > Fails to embrace the browser

    View full-size slide

  16. @stilkov
    The web-native way of distributing logic
    Process Flow
    Presentation
    Domain Logic
    Data
    Server
    Client > Rendering, layout, styling

    on an unknown client
    > Logic & state machine on
    server
    > Client user-agent
    extensible via

    code on demand

    View full-size slide

  17. @stilkov
    HTML & Hypermedia
    • In REST, servers expose a hypermedia format
    • Option 1: Just invent your own JSON-based, incomplete clone
    • Option 2: Just use HTML
    • Clients need to be RESTful, too
    • Option 1: Invent your own, JS-based, buggy, incomplete
    implementation
    • Option 2: Use the browser

    View full-size slide

  18. @stilkov
    A great REST hypermedia API is very similar to
    a simple, server-sided rendered web application

    View full-size slide

  19. @stilkov
    What does SPA even mean?

    View full-size slide

  20. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    HTML

    View full-size slide

  21. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON

    View full-size slide

  22. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client

    View full-size slide

  23. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client

    View full-size slide

  24. @stilkov
    Single Page Apps – Why Routing?
    Solution:

    Store some app

    state in the URI!
    Bookmarks?
    Deep links?
    Reload?

    View full-size slide

  25. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client

    View full-size slide

  26. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client
    (Pre-)Rendering Logic
    Routing
    HTML

    View full-size slide

  27. @stilkov
    Prerendering

    View full-size slide

  28. @stilkov
    Hydration
    How to simulate
    readiness?
    What about Events
    (Clicks etc)?
    How to match server-side
    HTML to client-side
    DOM?

    View full-size slide

  29. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client
    (Pre-)Rendering Logic
    Routing
    HTML

    View full-size slide

  30. @stilkov
    Special case: Searchability
    No
    Hydration
    needed

    View full-size slide

  31. @stilkov
    State
    Business Logic
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON API
    JSON Client
    (Pre-)Rendering Logic
    Routing
    HTML
    Hydration

    View full-size slide

  32. @stilkov
    State
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON Client
    (Pre-)Rendering Logic
    Routing
    HTML
    Hydration
    Business Logic
    JSON API
    State
    Business Logic
    Same functionality,

    different languages!

    View full-size slide

  33. @stilkov
    State
    Routing
    Rendering Logic
    Look & Presentation Logic
    Server
    Client
    JSON
    JSON Client
    (Pre-)Rendering Logic
    Routing
    HTML
    Hydration
    Business Logic
    JSON API
    State
    Business Logic
    Much, much
    more JavaScript

    View full-size slide

  34. @stilkov
    Everyone has JavaScript, right?
    All your users are non-JS while
    they're downloading your JS
    If they're on a train and their net connection goes
    away before your JavaScript loads, then there's no
    JavaScript.
    Did the HTTP request for the JavaScript complete?
    Does the corporate firewall block
    JavaScript?
    Does their ISP or mobile operator interfere with
    downloaded JavaScript?
    Does their browser support the
    JavaScript you’ve written?
    Do your users get the JavaScript?

    View full-size slide

  35. @stilkov
    The cost of JavaScript in 2019

    View full-size slide

  36. @stilkov
    What’s the alternative?

    View full-size slide

  37. @stilkov
    ROCA: Resource-oriented Client Architecture
    http://roca-style.org

    View full-size slide

  38. @stilkov
    ROCA
    RESTful Server-side HTML (SSR)
    Application logic only on server
    No duplicated logic on client
    +
    No application logic on client!
    Client-side (self contained) JavaScript components
    =

    View full-size slide

  39. @stilkov
    Client Side Logic is generic Presentation logic only. It enhances HTML
    HTML CSS
    Content Layout
    JavaScript
    Presentation logic

    View full-size slide

  40. @stilkov
    Progressive Enhancement
    A web page needs to work without graphical elements, CSS
    and JS
    This ensures our page will even work under unfavorable
    circumstances
    We also lay the foundation for accessibility
    Does not mean that everything needs to work without CSS
    and JavaScript
    It means that the fundamental functionality of our web page
    relies on HTML only
    Every thing that goes beyond that is seen as an enhancement

    View full-size slide

  41. @stilkov
    $('.multiselect', context).each(function() {

    $(this).multiselect({

    selectedList: 2,

    checkAllText: "Alle",

    uncheckAllText: "Keinen"

    }).multiselectfilter({label:"",

    width:"200px"});

    });

    Project

    name="project" size="5" multiple>

    DISCOVER

    IMPROVE

    MAGENTA

    ROCA

    ROCKET



    View full-size slide

  42. @stilkov
    http://rocair.herokuapp.com
    http://roca-airways.herokuapp.com

    View full-size slide

  43. @stilkov
    Components

    View full-size slide

  44. @stilkov
    Browser Platform
    Component
    Application
    JavaScript Framework
    Component Component Component

    View full-size slide

  45. @stilkov


    Browser Platform
    Application
    JavaScript Framework
    Component Component

    View full-size slide

  46. @stilkov
    Browser Platform
    Component
    Component Component Component
    Application
    Component

    View full-size slide

  47. @stilkov
    Component


    Browser Platform
    Component
    Component Component
    Application

    View full-size slide

  48. @stilkov
    Component
    Browser Platform
    Component
    Component Component
    Glue Code
    Application

    View full-size slide

  49. @stilkov

    $("input.date").datepicker();

    View full-size slide

  50. @stilkov


    About

    Discussion

    lorem ipsum dolor sit amet



    $(".tabs").tabs();

    View full-size slide

  51. @stilkov


    About

    Discussion

    lorem ipsum dolor sit amet



    $(".tabs").tabs();

    View full-size slide

  52. @stilkov


    About

    Discussion

    lorem ipsum dolor sit amet



    $(".tabs").tabs();
    Unobtrusive JavaScript

    View full-size slide

  53. @stilkov
    Component
    Browser Platform
    Component
    Component Component
    Glue Code
    HTML
    JS
    CSS
    HTML
    JS
    CSS
    HTML
    JS
    CSS
    HTML
    JS
    CSS

    Progressive Enhancement

    View full-size slide

  54. @stilkov
    Component
    Browser Platform
    Component
    Component Component
    Glue Code
    HTML
    JS
    CSS
    HTML
    JS
    CSS
    HTML
    JS
    CSS
    HTML
    JS
    CSS

    Progressive Enhancement
    Progressive enhancement is not about dealing
    with old browsers, it's about dealing with new
    browsers.
    — Jeremy Keith (@adactio)

    View full-size slide

  55. @stilkov


    About

    Discussion

    lorem ipsum dolor sit amet



    $(".tabs").tabs();

    View full-size slide

  56. @stilkov


    About

    Discussion


    lorem ipsum dolor sit amet


    $(".tabs").tabs();

    View full-size slide

  57. @stilkov


    About

    Discussion



    lorem ipsum dolor sit amet



    $(".tabs").tabs();

    View full-size slide

  58. @stilkov


    About

    Discussion



    lorem ipsum dolor sit amet



    $(".tabs").tabs();
    Custom Elements

    View full-size slide

  59. @stilkov
    Component
    Browser Platform
    Component
    Component Component
    Glue Code

    View full-size slide

  60. Why the hate?
    @stilkov

    View full-size slide

  61. @stilkov
    General benefits

    View full-size slide

  62. @stilkov
    Classic, server-side rendered web applications
    are much simpler, use less bandwidth, scale
    better, are more resilient, and a good match
    for most user needs

    View full-size slide

  63. @stilkov
    Many single-page apps are built carelessly
    and improve developer experience (if at all) at
    the cost of decreased usability and
    architectural complexity

    View full-size slide

  64. @stilkov
    Large-scale benefits

    View full-size slide

  65. @stilkov
    Any sufficiently complicated JavaScript client
    application contains an ad hoc, informally-
    specified, bug-ridden, slow implementation of
    half a browser.
    (Me, with apologies to Phillip Greenspun)
    Why choose a monolith if you don’t
    have to?

    View full-size slide

  66. @stilkov
    In-page Cross-page
    JavaScript method calls Links & redirects
    Shared abstractions & frameworks Micro-architecture
    Common language runtime HTTP
    HTML 5 JS platform Standard Browser

    View full-size slide

  67. @stilkov
    Sometimes, JS-centric applications/SPAs are
    the right choice, but very rarely for every part
    of your system

    View full-size slide

  68. @stilkov
    If you’re a fan of single page apps,

    at least build more than one
    • Don’t reinvent browser integration features
    • Accept some inefficiency
    • Trade-off for framework independence
    • Avoid modularity à la Java EE, OSGi etc.

    View full-size slide

  69. @stilkov
    Use your favorite SPA framework – when it’s
    appropriate. Stick to basic, simpler stuff,
    when it’s sufficient – likely, most of the time.

    View full-size slide

  70. @stilkov
    Stefan Tilkov
    @stilkov

    [email protected]
    Phone: +49 170 471 2625
    innoQ Deutschland GmbH
    Krischerstr. 100
    40789 Monheim am Rhein
    Germany
    Phone: +49 2173 3366-0
    innoQ Schweiz GmbH
    Gewerbestr. 11
    CH-6330 Cham
    Switzerland
    Phone: +41 41 743 0116
    www.innoq.com
    Ohlauer Straße 43
    10999 Berlin
    Germany
    Phone: +49 2173 3366-0
    Ludwigstr. 180E
    63067 Offenbach
    Germany
    Phone: +49 2173 3366-0
    Kreuzstraße 16

    80331 München
    Germany
    Phone: +49 2173 3366-0
    @stilkov
    That’s all I have.

    Thanks for listening!

    View full-size slide

  71. @stilkov
    www.innoq.com
    OFFICES
    Monheim
    Berlin
    Offenbach
    Munich
    Hamburg
    Zurich
    FACTS
    ~150 employees
    Privately owned
    Vendor-independent
    SERVICES
    Strategy & technology consulting
    Digital business models
    Software architecture & development
    Digital platforms & infrastructures
    Knowledge transfer, coaching & trainings
    CLIENTS
    Finance
    Telecommunications
    Logistics
    E-commerce
    Fortune 500
    SMBs
    Startups

    View full-size slide