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

Building a Single Page Shop with Multiple Teams

Building a Single Page Shop with Multiple Teams

Michael Geers

April 20, 2016
Tweet

More Decks by Michael Geers

Other Decks in Technology

Transcript

  1. javascript framework
    Building a Single Page Shop with Multiple Teams
    is not enough
    Michael Geers @naltatis code.talks commerce 2016

    View Slide

  2. Michael Geers
    Frontend Entwickler
    naltatis auf Twitter & GitHub

    View Slide

  3. Performantes User Interface
    &
    Self-Contained Systems

    View Slide

  4. Struktur
    Frontend & Backend
    Was sind Self-Contained Systems?
    Warum Client Side Rendering?
    Zusammenspiel

    View Slide

  5. was bisher geschah
    «

    View Slide

  6. 2000 - HTML & CSS*
    * kann ggf. Spuren von DHTML enthalten

    View Slide

  7. my first
    e-commerce

    View Slide

  8. 2005

    View Slide

  9. http://www.thesoftwareguild.com/blog/build-your-own-technology-stack/
    Full Stack
    Developer

    View Slide

  10. Applikation

    View Slide

  11. Backend
    Frontend
    ~ 2010

    View Slide

  12. Was
    unterscheidet
    Frontend &
    Backend?

    View Slide

  13. Runtime

    View Slide

  14. Tools

    View Slide

  15. CSS
    HTML
    JS
    Frontend
    Tools
    heute
    «

    View Slide

  16. HTML
    Frontend
    Backend
    Struktur
    Daten &
    Template

    View Slide

  17. Architektur

    View Slide

  18. Monolith

    View Slide

  19. Backend
    Frontend

    View Slide

  20. Microservices

    View Slide

  21. Microservices
    Frontend
    Product
    Pay
    Reco
    User
    Stock
    Mail
    Cart
    Teaser
    ERP
    Media

    View Slide

  22. Self-Contained
    Systems

    View Slide

  23. Self-Contained Systems
    Frontend
    Product
    Pay
    Reco User
    Stock
    Mail
    Cart
    Teaser
    ERP
    Media

    View Slide

  24. Self-Contained Systems
    Product
    Pay
    Reco
    User
    Stock
    Mail
    Cart
    Teaser
    ERP
    Media

    View Slide

  25. Empfehlungen Produkt Bestellen Mein Konto
    Self-Contained Systems

    View Slide

  26. Cross Functional Team
    =
    Produkt

    View Slide

  27. Artikelname
    Foto
    Beschreibung
    In den Warenkorb
    Shopname
    Preis 19,99 €
    Team
    Produkt
    Team
    Bestellen
    Warenkorb
    3 Artikel
    Komposition

    View Slide


  28. Server Side Includes

    View Slide

  29. Reload

    View Slide

  30. User Experience

    View Slide

  31. View Slide

  32. PJAX history.pushState & ajax
    Content A
    Header
    Footer
    Content B
    1. Aufruf

    2. Aufruf
    example.com/a example.com/b
    GET /b

    X-PJAX: true

    View Slide

  33. Progressive Enhancement

    View Slide


  34. View Slide

  35. PJAX =

    Nicer
    Reloads

    View Slide

  36. Achtung!
    Leaky Memory

    View Slide

  37. Artikelname
    Foto
    Beschreibung
    In den Warenkorb
    Shopname
    Preis 19,99 €
    noch 5 verfügbar
    Team
    Produkt
    Team
    Bestellen
    Warenkorb
    3 Artikel
    blau grün
    gelb
    Reco Reco Reco Reco Reco
    Kunden kauften auch ...
    Team
    Empfehlung
    lazy loading

    View Slide

  38. $.get("/empfehlung?key=4711_blau", function (data) {
    $("#recos").html(data);
    });
    Client Side Include
    imperativ | AJAX

    View Slide

  39. Client Side Include

    deklarativ | Custom Element

    Gustaf Nilsson Kotte https://github.com/gustafnk/hinclude/tree/custom-element

    View Slide

  40. Browser
    Server
    HTML
    Netzwerk
    Template
    & Daten
    Template
    & Daten
    Klick
    HTML
    Anzeige Anzeige'

    View Slide

  41. HTML
    Frontend
    Backend
    Daten &
    Template

    View Slide

  42. Browser
    Server
    HTML
    Netzwerk
    Template
    & Daten
    Anzeige
    Die Realität
    Anzeige''
    API
    Daten
    Mini HTML
    Template
    Neue
    Ansicht
    HTML Modifikation
    Anzeige'
    UI State
    Change

    View Slide

  43. Browser
    Server
    HTML
    Netzwerk
    Template
    & Daten
    Anzeige
    Die Realität
    Anzeige''
    API
    Daten
    Mini HTML
    Template
    Neue
    Ansicht
    HTML Modifikation
    Anzeige'
    UI State
    Change
    Template
    Template
    Template

    View Slide

  44. HTML
    Frontend
    Backend
    Daten &
    Template
    HTML' Template
    Duplicate Code

    View Slide

  45. UI Performance

    View Slide

  46. The RAIL Performance Model
    https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

    View Slide

  47. Client Side Rendering

    View Slide

  48. HTML
    Frontend
    Backend
    Daten
    Template

    View Slide

  49. View Slide

  50. What's the
    fallback?

    View Slide

  51. Client Side
    Rendering
    Server
    Side
    &
    Isomorphic JavaScript

    View Slide

  52. Client Side
    Rendering
    Server
    Side
    &
    JavaScript
    Universal

    View Slide

  53. HTML
    HTML
    Frontend
    Backend
    Template
    & Daten
    Template

    View Slide

  54. Optimistic UI
    http://info.meteor.com/blog/
    optimistic-ui-with-meteor-
    latency-compensation

    View Slide

  55. Time to First Tweet
    https://blog.twitter.com/2012/improving-performance-on-twittercom

    View Slide

  56. Time to Cart?
    20 s

    View Slide

  57. Empfehlungen Produkt Bestellen Mein Konto
    Self-Contained Systems

    View Slide

  58. Single Page App

    using [framework].js components
    Gemeinsame Runtime
    Team Autonomie
    Simultane Upgrades
    Laden von Daten

    View Slide

  59. wonder.js v2.9
    wonder.js v3.0b
    snow.js
    Framework Isolation

    using Custom Elements
    product="4711"
    color="blau" />

    View Slide

  60. Custom Elements

    Lifecycle Callbacks

    http://grml.in/
    https://github.com/WebReflection/document-register-element
    gremlins.create('empfehlung-detail', {
    initialize: function() {..}

    attributeDidChange: function (attr, prev, val) {..}
    destroy: function() {..}
    });

    View Slide

  61. tiger.js
    Page/Team Transitions
    Research needed!
    arrow.js
    Team
    Produkt
    Team
    Bestellen

    https://github.com/patrick-steele-idem/morphdom
    pjax, morphdom?
    reload
    top level router?
    / ->
    /p ->
    /cart ->
    /account ->

    View Slide

  62. Zusammenfassung
    No Frontend
    Monoliths
    User Experience
    is Key

    View Slide

  63. baut Rolltreppen!

    View Slide

  64. Slides: A Simpler Web App Architecture

    Gustaf Nilsson Kotte

    http://de.slideshare.net/GustafKotte/a-simpler-web-app-architecture-jdays-2016
    Talk: Wait, what!? Our microservices have actual human users?

    Stefan Tilkov

    https://www.youtube.com/watch?v=pU1gXA0rfwc
    Blog: Transklusion in Self-Contained Systems

    Till Schulte-Coerne

    https://www.innoq.com/en/blog/transklusion/
    Mehr zum Thema

    View Slide

  65. Häufige Fragen
    zu Self-Contained Systems

    View Slide

  66. Einheitliches
    Look and Feel?

    View Slide

  67. Style Guides &
    Pattern Libraries

    View Slide

  68. Page Weight?

    View Slide

  69. be modular
    don't rely on JS

    View Slide

  70. Bring your own Assets

    View Slide

  71. But all the
    Requests!

    View Slide

  72. https://twitter.com/smithclay/status/694317112228057089

    View Slide

  73. Vielen Dank!
    Michael Geers
    Frontend Entwickler
    naltatis auf Twitter & GitHub
    speakerdeck.com/naltatis

    View Slide

  74. Deraman Auskratzt - Water - https://flic.kr/p/kEWpjb

    Dave Gingrich - Threads - https://flic.kr/p/5bwju3

    slgckgc - Hand Weights - https://flic.kr/p/9i26WN

    Georgie Pauwels - Bags - https://flic.kr/p/pFLZzE

    Thomas Hawk - Where You Headed Joe? - https://flic.kr/p/fhyGL

    Susanne Nilsson - Taking a close up - https://flic.kr/p/nppBcE

    ᦸባ - d.c. tweetin’ - https://flic.kr/p/nQeTdF

    Susanne Nilsson - People with phones ... - https://flic.kr/p/qvSsqr

    Apionid - Holiday Snap 2: Tron - https://flic.kr/p/r23SxR

    bekassine… - leaky - https://flic.kr/p/kWQwcB

    Korb - 34/365 - https://flic.kr/p/8VtBLq

    Julio Martínez - Good bread - https://flic.kr/p/fP8AMj

    Jyoti Das - rolls - https://flic.kr/p/9mchd4

    Matt Martin - Recycle - https://flic.kr/p/9hJfzP
    Matt Martin - Recycle - https://flic.kr/p/9hJfzP

    pchow98 - HP C7000 BladeSystem - https://flic.kr/p/7AVF23

    Christian Hornick - Smartphone - https://flic.kr/p/oV8kWF

    John Griffiths - Tools - https://flic.kr/p/fipdcK

    Kai C. Schwarzer - Licht aus. - https://flic.kr/p/92LANm

    Dren Pozhegu - The wall - https://flic.kr/p/rmurHW

    Anthony Citrano - one - https://flic.kr/p/6m75z2

    cocoparisienne - baguette

    https://pixabay.com/photo-246424/

    Stig Nygaard - Copenhagen Metro escalators

    https://en.wikipedia.org/wiki/File:Copenhagen_Metro_escalators.jpg

    View Slide