Building a Single Page Shop with Multiple Teams

Building a Single Page Shop with Multiple Teams

457365e2e75c27f3e1c3a3744f5c5e4b?s=128

Michael Geers

April 20, 2016
Tweet

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

  8. 2005

  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

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

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