A presentation at Front-end gilde meeting by Joris Hulsbosch
Schouten & Nelissen Front-end methodes & technieken Welkom
Schouten & Nelissen Ik ga het hebben over, of, kort gezegd
SN fi Of, speci eker…
sn.nl Schouten & Nelissen Open Lijn • Opleidingen, trainingen en coaching voor professionele ontwikkeling en persoonlijke groei • In 2020 opgeleverd • Opleidingenaanbod • Bewaren en inschrijven
Snel
Meetbaar Snel • Lighthouse / Core Web Vitals • webpagetest.org Aan de ene kant, meetbaar snel
“Het voelt snel.” – Collega’s en kennissen
Wie?
Hoi Joris Hulsbosch • Front-end UI developer • Performance, accessibility • Team New Horizon, iO Den Bosch Ik doe het niet alleen
Een stukje achtergrond
Een stukje achtergrond Back-end • Umbraco CMS 8 (.NET) • Modulair (bouwblokken) • Alle content aanpasbaar • APIs met SN’s CRM Statisch? Wat hebben de back-end developers gedaan aan performance?
Caching. Magic. Index
Front-end Het gaat hier vandaag om front-end
Components en een Styleguide
Atomic design
Pattern Lab
Overzichten Via navigatie bovenin browsen Hot-reloading (uitleggen)
Ieder bestandje is een component
Waarom?
Atomic design • Snel development • Consistent • Aanpasbaar • ‘Shared vocabulary’ • Herbruikbaar
HTML
HTML Content en layout • Mustache • Content en semantiek voorop • Single purpose • HTML op 2 plaatsen • Niet component-based Ik begin met semantische elementen SP: 1 div doet 1 ding Niet helemaal ideaal
CSS
CSS Techniek • SASS (SCSS) • @import, $variables • 1 entry, 1 bundle • Dichtbij CSS Niet: sass modules: @use
CSS Methodiek • BEM • ITCSS • CSS Guidelines (cssguidelin.es) • Sass Guidelines (sass-guidelin.es) fi • Stylelint-con g-supple
CSS Framework • Supple • Typogra e, responsive • Flexbox, veelvoorkomende patronen (objects) • 8px grid system • No design fi In-house ontwikkeld Columns (Bijna) automatisch alles in balans Consistentie
CSS Waarom • Simpel, begrijpelijk • 78kb, 16kb gzipped • Render blocking • Geen critical CSS • Niet scoped
JavaScript Killer van performance
JavaScript Methodiek en vereisten • Progressive enhancement • Laden wanneer nodig • Moderne JS schrijven
Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. – MDN Web Docs Bla, maar wat betekent dat?
Te veel content
Voordat panels verborgen door JS, alles zichtbaar
JavaScript Entry points • entry.js • entry.legacy.js • Forms – jQuery, jQuery- validation, jQuery-validationunobtrusive De IE11 bundle, wil ik vanaf
Conditioner
Conditioner <h2 data-module=”/ui/component.js data-context=”@media (min-width:30em) and was @visible” … </h2
2e regel is optioneel
Conditioner + plain JS <div data-module=”ui/foldout” data-context=”@visible” <button data-module-bind=”foldout-toggle” ariacontrols=”foldout” aria-expanded=”false” toggl </button <div data-module-bind=”foldout-panel” id=”foldout” hidden .. </div </div>
e
. 2e regel is optioneel
Conditioner + Vue2 <div data-module=”ui/filter.js data-api-url=”http://localhost:4000/umbraco/Surface/ FilterView/List data-page-size=”10” <ul <li v-for=”option in checked” :key=”option.Name” “
“
2e regel is optioneel
JS Modules <head <script type=”module” src=”/static/js/bundle.js”></script </head <body .. <script nomodule src=”/static/js/bundle.legacy.js”></script </body
. Transpilen met webpack
JavaScript Waarom? • Modern JS • Legacy zit modern JS niet in de weg • Time-to-interactive • Bundle: 23KB, 10KB Gzipped • Modules, dus strict mode + security Sneller Modules zijn sneller?
Images <img src=” … ” srcset=” … ” loading=”lazy” alt=” … “> • Uploaden in hoge resolutie • WebP, indien ondersteund • Lazy
Font Variable @font-face font-family: Raleway VF font-weight: 400 800 font-style: normal font-display: swap src: url(‘../assets/fonts/Raleway/Raleway-variablev22.woff2’) format(‘woff2-variations’) } ; ; ; ; { Scheelt requests Zelf hosten scheelt request naar externe server, DNS etc Cross domain caching bestaat niet meer Font-display: swap: Tekst direct zichtbaar tijdens laden
SVG Icons Geen icon fonts
1 request SVG met <use> tag Kleuren met CSS
Snel opgestart In Umbraco Linkje naar local server, VDer op scherm
Ben ik blij? Doorontwikkeling is makkelijk A/B-tests Cypress
Ben ik blij? Twijfel, twijfel • 3rd party scripts • Pattern Lab -> Storybook • JavaScript -> TypeScript? • Conditioner -> (lazy?) Web Components • Gulp -> NPM scripts, Vite GTM, Cookiebot, tracking pixels SB: integratie met Zeplin TS? Structuur. Werkt tegen, helpt niet. Is Conditioner verouderd? Valkuilen. Is Gulp verouderd?
Zijn we blij?
Zijn we blij? • CRO blij • UX/VD blij • Klant blij • Bezoeker blij Aanpassingen zijn eenvoudig, attributen, events Doorontwikkeling gaat snel Databundel, processor, batterij
Feel good momentje om mee af te sluiten
Dank!
A presentation about the methods, tools and techniques used to create sn.nl and get really good performance scores.
for free. You
can too.