TYPO3 Developer Days 2024: Day 3 - 3rd August 2024

TYPO3 Developer Days Day 3 notes.

See other days:

• Day 1
• Day 2
• Day 3

Managing and Developing an Extranet as a TPA - A TYPO3 Page App - Rebecca Düker, Christian Keuerleber

T3DD Schedule Link / Slides / Video (tbc)

• Built a new extranet
• Started with MVP
  • Define important functions
  • Understood complexity
• Routing (routes = paths)
  • Allow bookmarking
  • Allow logging in & redirecting back to original path
  • TYPO3 & API routes sent to TYPO3, everything else to React Router
• API uses b13/slimphp-bridge
  • use Slimphp for a frontend typo3 request
• React components for frontend
• Use DTO (Data Transfer Objects) to communicate between the two
  • Variables are defined and typed early to allow FE and BE to work independently
• Tips
  • Send the data you need to the FE
  • Only send UIDs back to BE
  • Use HTTP/REST standards
• Plans can change (as you understand the brief more)
  • Creativity increases as the project progresses
• Communication & transparency is key
  • Trust as basis
  • Grants access to full potential
• Access is done in TYPO3 so even the Middleware is blocked from unauthorised requests
• Imports are CLI tasks so they can be scheduled
• They set up a middleware application between external resources & TYPO3 which prepares the data
• Tests are run with Codeception
  • API calls with Guzzle
  • Tests CLI commands
  • FE tests boot up the whole app
• Monitoring is done using Playwright on Production
  • Runs nightly
• Composer audit & NPM audits are run on deployment
• Sanity is used for error logging
• In NGINX they log the page rendering time which can be used for performance checks

Vite – TYPO3’s nimble frontend companion - Simon Praetorius

T3DD Schedule Link / Slides / Video (tbc)

• Why bundles?
  • Combine, optimise & bundle into single files
• Which bundler?
  • Results (compatibility, consistency, optimisations)
  • Developer experience (setup, speed, extensibility)
  • Maintenance (maintainers, community, release cycle)
• Vite uses esbuild & rollup under the hood
• Vite has
  • SCSS & PostCSS built in (and more)
  • Bundles references assets (e.g. fonts & images)
  • Built in TypeScript
  • Automatic code splitting
  • Output as ES Modules
• Hot module replacement
• Robust file watching & cache busting
• Lots of plugins, but if there isn't a Vite one you can use Rollup plugins
• TYPO3 Vite plugin (npm install --save-dev vite vite-plugin-typo3)
  • Configures Vite (uses composer.json to find extensions)
  • Uses Configuration/ViteEntrypoints.json for paths
• Vite TYPO3 Extension (composer req praetorius/vite-asset-collector)
  • Production/Dev context switching
  • ViewHelpers to embed assets
• manifest.json file generated by Vite which TYPO3 consumes
• Get started
  • Install extension
  • Install NPM plugin
  • Configure Vite
  • Setup entry points
  • Use ViewHelper
  • Start Vite server
• Best practices
  • Import all JS & CSS for a plugin together
  • Use glob to find all the files (set {eager: true})
  • npm add -D sass
  • Each extension gets an alias based on TYPO3 extension name (e.g. @site_package)

Responsive Images - Helmut Hummel

T3DD Schedule Link / Slides (tbc) / Video (tbc)

• Why bother?
  • Performance
  • Sustainability
  • SEO
• Features of browsers
  • Preload scanner (scans for resources before DOM is parsed)
  • Tags and attributes
    • srcset - multiple image sizes and resolutions, browser picks. Screen ration & device pixel ratio is taken into account
    • If you start small and go bigger, it will load the next bigger image
    • If you start big and go small, it will just keep the big imgae
    • srcset has sizes attribute - tells the browser how much space the image will use
  • picture and source tags - for when you need art direction
    • use srcset inside source tag
    • picture and source can't be styled, you style the img tag instead
• TYPO3 extension - Top Image
  • Declarative configuration (single source of truth)
  • Close to web platform specification
  • ViewHelper for rendering
  • Includes an API
  • Configuration is done by PHP
  • Has debug mode to put images with text information instead of your original image
  • Repo has an example extension within the tests repo
• In Chrome dev tools, if you hover over a srcset it will tell you the current source

Let's make a simpler, more accessible web - Christian Heilmann

T3DD Schedule Link / Slides / Video (tbc)

• We've made the web for developers, not users
• Why are we looking at spinners and loads and not content?
• The web is built on resilient tech (HTML CSS)
  • Things that are wrong get discarded
• But we've chosen the brittle one (JS)
• Why?
  • Lack of control feels weird
  • Impatience - the web tech evolution felt slow
  • Perceived complexity
  • IESafari
  • Market push
• 20 years ago, Chris wrote a blog post about "Unobtrusive Javascript"
• The web used to be HTML & CSS and is now super complicated
• Facts
  • Browsers are constantly updated
  • Web standards process is faster
  • We don't all need to build killer apps
  • Our goal should be satisfied users
  • Browsers are good at optimising UX
    • They can't break the web as they are the portal to the web
  • Browsers are just marketing tools to get you using the companies other tools
• The web should offer user preferences (dark mode, high contrast)
• Optimise what you can control
• You cannot break HTML - send loads of it
• Use the right formats (WebP, Avif)
• Use closer servers
• Don't put things in your machine that you don't understand
• Caching - Offline first
• Remove old libraries and polyfills
• Don't bundle things that are only used once
• Think about what you are including and why
• Don't put images in CSS - put them in HTML where they belong so they can be loaded correctly
• You can do object-fit with video
• Put lazy loading on images & defer on script tags
• When searching on a page, <details> will auto expand of the text is inside
• CSS property colour-scheme: light dark; (MDN link)
• Stop blaming browsers
• Developer tools in webkit allow you to replicate blurred vision & colour blindness

QA in TYPO3 - CI in a community-driven open-source project - Markus Klein, Christian Kuhn

T3DD Schedule Link / Slides (tbc) / Video (tbc)

• Why does QA matter?
  • CI is key for open source - if nothing is automated, your code won't get to a viable state
  • Learning
• TYPO3 has over 670k lines of code
• Aspects of CI
  • Lots of different platforms
  • Developers all over the world, but no contracts, so no "higher power"
  • There are guidelines, they can be violated, but the system needs to monitor these and catch these
• Challenges
  • Maintain stability
  • Enhance code quality
• Strategy
  • Deliver feedback as quick as possible
  • Easy reproducibility to local dev env - build an infrastructure where you can run it locally
  • Be deprecation free
  • Have each patch fully tested before merging
  • Run nightly tests which have more test permutations & edge cases (take longer to run)
  • If nightly test fails, the fix is prioritised
• What is tested
  • Unit,
  • Functional and Integration which use a real database
  • End-to-end uses headless browser
  • Static code scanning
  • Integrity checks (commit checks, exception code checks, composer integrity)
• Current process
  • Gerrit give you a linear history
  • Gerrit makes a new branch in Gitlab which runs the pipeline
  • CI load split over multiple runners
  • TYPO3 maintain their own images for running tests
• Security team creates patches privately and merges on release day - pipeline needs to be able to run CI and deploy security patches as quickly as possible
• Test often and early
• Converting to Podman improved CI performance
• CI provides a safeguard for new developers and the code

Other Talk Resources

• How to build your own cloud platform and (not) shoot yourself in the foot - Martin Helmich
  • T3DD Schedule Link
  • Slides
• Robust Testing Strategies for TYPO3 Projects - Andreas Wolf
  • T3DD Schedule Link
  • Slides