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
2. Michael Geers Frontend Entwickler naltatis auf Twitter & GitHub
3. Performantes User Interface & Self-Contained Systems
4. Struktur Frontend & Backend Was sind Self-Contained Systems? Warum Client Side Rendering? Zusammenspiel
5. was bisher geschah «
6. 2000 - HTML & CSS* * kann ggf. Spuren von DHTML enthalten
7. my first e-commerce
9. http://www.thesoftwareguild.com/blog/build-your-own-technology-stack/ Full Stack Developer
10. Applikation
11. Backend Frontend ~ 2010
12. Was unterscheidet Frontend & Backend?
13. Runtime
14. Tools
15. CSS HTML JS Frontend Tools heute «
16. HTML Frontend Backend Struktur Daten & Template
17. Architektur
18. Monolith
19. Backend Frontend
20. Microservices
21. Microservices Frontend Product Pay Reco User Stock Mail Cart Teaser ERP Media
22. Self-Contained Systems
23. Self-Contained Systems Frontend Product Pay Reco User Stock Mail Cart Teaser ERP Media
24. Self-Contained Systems Product Pay Reco User Stock Mail Cart Teaser ERP Media
25. Empfehlungen Produkt Bestellen Mein Konto Self-Contained Systems
26. Cross Functional Team = Produkt
27. Artikelname Foto Beschreibung In den Warenkorb Shopname Preis 19,99 € Team Produkt Team Bestellen Warenkorb 3 Artikel Komposition
28. <!--#include virtual="/bestellen/minicart" --> Server Side Includes
29. Reload
30. User Experience
32. PJAX history.pushState & ajax Content A Header Footer Content B 1. Aufruf <a href="/b" pjax> 2. Aufruf example.com/a example.com/b GET /b
 X-PJAX: true
33. Progressive Enhancement
34. <a href="/b" pjax>
35. PJAX =
 Nicer Reloads
36. Achtung! Leaky Memory
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
38. $.get("/empfehlung?key=4711_blau", function (data) { $("#recos").html(data); }); Client Side Include imperativ | AJAX
39. Client Side Include
 deklarativ | Custom Element <h-include src="/empfehlung?key=4711_blau"/> Gustaf Nilsson Kotte https://github.com/gustafnk/hinclude/tree/custom-element
40. Browser Server HTML Netzwerk Template & Daten Template & Daten Klick HTML Anzeige Anzeige'
41. HTML Frontend Backend Daten & Template
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
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
44. HTML Frontend Backend Daten & Template HTML' Template Duplicate Code
45. UI Performance
46. The RAIL Performance Model https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
47. Client Side Rendering
48. HTML Frontend Backend Daten Template
50. What's the fallback?
51. Client Side Rendering Server Side & Isomorphic JavaScript
52. Client Side Rendering Server Side & JavaScript Universal
53. HTML HTML Frontend Backend Template & Daten Template
54. Optimistic UI http://info.meteor.com/blog/ optimistic-ui-with-meteor- latency-compensation
55. Time to First Tweet https://blog.twitter.com/2012/improving-performance-on-twittercom
56. Time to Cart? 20 s
57. Empfehlungen Produkt Bestellen Mein Konto Self-Contained Systems
58. Single Page App
 using [framework].js components Gemeinsame Runtime Team Autonomie Simultane Upgrades Laden von Daten
59. wonder.js v2.9 wonder.js v3.0b snow.js Framework Isolation
 using Custom Elements <empfehlung-detail product="4711" color="blau" /> <bestellen-minicart />
60. Custom Elements
 Lifecycle Callbacks <empfehlung-detail product="4711" color="blau" /> http://grml.in/ https://github.com/WebReflection/document-register-element gremlins.create('empfehlung-detail', { initialize: function() {..}
 attributeDidChange: function (attr, prev, val) {..} destroy: function() {..} });
61. tiger.js Page/Team Transitions Research needed! arrow.js Team Produkt Team Bestellen <produkt-detail /> <bestellen-cart /> https://github.com/patrick-steele-idem/morphdom pjax, morphdom? reload top level router? / -> <suche-homepage /> /p -> <produkt-detail /> /cart -> <bestellen-cart /> /account -> <konto-info />
62. Zusammenfassung No Frontend Monoliths User Experience is Key
63. baut Rolltreppen!
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
65. Häufige Fragen zu Self-Contained Systems
66. Einheitliches Look and Feel?
67. Style Guides & Pattern Libraries
68. Page Weight?
69. be modular don't rely on JS
70. Bring your own Assets
71. But all the Requests!
72. https://twitter.com/smithclay/status/694317112228057089
73. Vielen Dank! Michael Geers Frontend Entwickler naltatis auf Twitter & GitHub speakerdeck.com/naltatis
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