micro service micro service micro service micro service micro service micro service micro service erp-integration tracking recos teaser search-engine payment newsletter frontend Stefan Tilkov on Frontend Monoliths
Self Contained Systems team search cross functional team mission help customers to find the right product end-to-end-development communication is easy narrow scope doesn't have to know about payment, … doesn't reinforce specialization learning from each other -> full stack
People want component-oriented development experience, and interoperability. Currently web component is trying to solve both of them, but it turns out that it doesn’t solve the development experience issue very well on its own. IMO it is better if the spec focuses on interoperability alone, and leaves the dev experience part to frameworks. https://hacks.mozilla.org/2015/06/the-state-of-web-components/#comment-17855 The State of Web Components Evan You @youyuxi | Creator of vue.js
Browser Support Reliable Polyfill available (using Mutation Observers) https://github.com/WebReflection/document-register-element Custom Elements v1 API stabilized end of last year supported in Chrome, Opera & Safari Firefox: in development Edge: under consideration
Element Lifecycle class OrderMinicart extends HTMLElement { constructor() {...} connectedCallback() {...} attributeChangedCallback(attr, oldVal, newVal) {...} disconnectedCallback() {...} } customElements.define('order-minicart', OrderMinicart); an element instance was created element was attached to the DOM element was removed from the DOM, cleanup someone change an attribute
Child-Parent Communication document .querySelector('order-button') .addEventListener('success', () => alert('tadda!') ) parent listens for DOM event on child
Sibling Communication document.dispatchEvent(new Event('cartChanged')) broadcasting event through the body element document.addEventListener('cartChanged', refresh)
How SSI Works nginx /product/14 evaluate order /product/14 SSI include needed /minibasket user request user response Product 14 virtual="/minibasket“ --> mini cart Product 14 mini cart
Progressive Enhancement is like building a safety net. You can think of it as Technical Credit. https://www.youtube.com/watch?v=KxsCWCjEi2Q Jeremy Keith @adactio | Author of Resilient Web Design
Page Transitions team a team b inside team soft navigation client rendered between teams hard navigation server rendered single page app with router single page app with router multiple single page apps
naltatis
soudai
tomuro
line_developers_tw
huffon
_kensh
oracle4engineer
hk_shino
cyberarchitect
nagiss
mamohacy
kyonmm
junjunjunk
gr2m
addyosmani
dotmariusz
chriscoyier
eitanlees
edds
revolveconf
zakiwarfel
akosma
tanoku
lynnandtonic
marktimemedia