Schouten & Nelissen: Front-end methodes & technieken

Slide 1

Schouten & Nelissen Front-end methodes & technieken Welkom

Slide 2

Schouten & Nelissen Ik ga het hebben over, of, kort gezegd

Slide 3

SN fi Of, speci eker…

Slide 4

sn.nl Schouten & Nelissen Open Lijn • Opleidingen, trainingen en coaching voor professionele ontwikkeling en persoonlijke groei • In 2020 opgeleverd • Opleidingenaanbod • Bewaren en inschrijven

Slide 5

Snel

Slide 6

Meetbaar Snel • Lighthouse / Core Web Vitals • webpagetest.org Aan de ene kant, meetbaar snel

Slide 7

“Het voelt snel.” – Collega’s en kennissen

Slide 8

Wie?

Slide 9

Hoi Joris Hulsbosch • Front-end UI developer • Performance, accessibility • Team New Horizon, iO Den Bosch Ik doe het niet alleen

Slide 10

Een stukje achtergrond

Slide 11

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?

Slide 12

Caching. Magic. Index

Slide 13

Front-end Het gaat hier vandaag om front-end

Slide 14

Components en een Styleguide

Slide 15

Atomic design

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Pattern Lab

Slide 21

Overzichten Via navigatie bovenin browsen Hot-reloading (uitleggen)

Slide 22

Ieder bestandje is een component

Slide 23

Waarom?

Slide 24

Atomic design • Snel development • Consistent • Aanpasbaar • ‘Shared vocabulary’ • Herbruikbaar

Slide 25

HTML

Slide 26

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

Slide 27

CSS

Slide 28

CSS Techniek • SASS (SCSS) • @import, $variables • 1 entry, 1 bundle • Dichtbij CSS Niet: sass modules: @use

Slide 29

CSS Methodiek • BEM • ITCSS • CSS Guidelines (cssguidelin.es) • Sass Guidelines (sass-guidelin.es) fi • Stylelint-con g-supple

Slide 30

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

Slide 31

CSS Waarom • Simpel, begrijpelijk • 78kb, 16kb gzipped • Render blocking • Geen critical CSS • Niet scoped

Slide 32

JavaScript Killer van performance

Slide 33

JavaScript Methodiek en vereisten • Progressive enhancement • Laden wanneer nodig • Moderne JS schrijven

Slide 34

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?

Slide 35

Te veel content

Slide 36

Voordat panels verborgen door JS, alles zichtbaar

Slide 37

JavaScript Entry points • entry.js • entry.legacy.js • Forms – jQuery, jQuery- validation, jQuery-validationunobtrusive De IE11 bundle, wil ik vanaf

Slide 38

Conditioner

Slide 39

Conditioner <h2 data-module=”/ui/component.js data-context=”@media (min-width:30em) and was @visible” … </h2

2e regel is optioneel

Slide 40

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>

. 2e regel is optioneel

Slide 41

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

Slide 42

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

Slide 43

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?

Slide 44

Images <img src=” … ” srcset=” … ” loading=”lazy” alt=” … “> • Uploaden in hoge resolutie • WebP, indien ondersteund • Lazy

Slide 45

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

Slide 46

SVG Icons Geen icon fonts

Slide 47

1 request SVG met <use> tag Kleuren met CSS

Slide 48

Snel opgestart In Umbraco Linkje naar local server, VDer op scherm

Slide 49

Ben ik blij? Doorontwikkeling is makkelijk A/B-tests Cypress

Slide 50

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?

Slide 51

Zijn we blij?

Slide 52

Zijn we blij? • CRO blij • UX/VD blij • Klant blij • Bezoeker blij Aanpassingen zijn eenvoudig, attributen, events Doorontwikkeling gaat snel Databundel, processor, batterij

Slide 53

Feel good momentje om mee af te sluiten

Slide 54

Dank!