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!