Building a Single Page Shop with Multiple Teams

Presented at commerce code.talks 2016 in Berlin

pdf version with english comments:
https://speakerd.s3.amazonaws.com/presentations/dcb3adb9eba1438e86f7445dbcef29d3/One_JS_Framework_is_not_enough_-_with_comments.pdf

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. 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