How we build web-apps professionally
Frontend engineering
Slide 2
Slide 2 text
Who am I?
Slide 3
Slide 3 text
Job-Interview at cosee
Apply at https://cosee.jobs
Developers decide on invitation
Programming exercise
Job-Interview
Talk about solution
Decision
Slide 4
Slide 4 text
Just a website
Slide 5
Slide 5 text
Just a website ?
Slide 6
Slide 6 text
Spiel.digital
International board-game fair in Essen
● Google-maps like navigation
● virtual stands
● virtual gaming tables
● media hub for actions and events
● likes / personal item list
● business-area
● backoffice for exhibitors
Code quality
Indeed, the ratio of time spent
reading versus writing is well
over 10 to 1.
Robert C. Martin
https://geek-and-poke.com/geekandpoke/2008/2/4/the-art-of-programing.html
Slide 13
Slide 13 text
Code quality - Code style
Whitespace Tabs
Semicolon No
Slide 14
Slide 14 text
2 spaces indent!
semicolons!
100 chars per line!
And no
discussions!
Configurable, more powerful
Custom rules
Not just for code style
for (var i = 0; i < 10; i--) {
}
Clean Code
Book: Robert C. Martin
“Clean Code: A Handbook of Agile Software Craftsmanship”
https://github.com/ryanmcdermott/clean-code-javascript
Function names
should say what
they do
Avoid comments,
extract functions
Keep functions/files
small
SOLID
principles
Slide 19
Slide 19 text
Clean Code is always Zen
Slide 20
Slide 20 text
Testing
??
So how did you
test your app?
I just tried it
Slide 21
Slide 21 text
Testing
Manual tests
● Manually testing 109 pages after
each deploy?
● You might forget something
● Stupid work
Automated tests
● Can be repeated easily
● Provide usage examples
● Sometimes difficult to write
● May not cover everything
Slide 22
Slide 22 text
Testing
https://geek-and-poke.com/geekandpoke/2015/10/20/moments
Functions / classes
● Very simple
● Fast and reliable
Components / Pages
● Simulate browser and user
● Mock backend, mock browser API
End to end
● Setup complete system
● Fragile and slow
Slide 23
Slide 23 text
vitest / jest
Slide 24
Slide 24 text
Secret hint
Testing library uses JSDom
● No dev-tools
● No visual hint
Use https://www.vitest-preview.com/
Slide 25
Slide 25 text
Testing components and pages
https://testing-library.com/
Slide 26
Slide 26 text
End to end testing Playwright
● Complete system
● Real browser
● Multiple browsers
● Screenshots possible
Slide 27
Slide 27 text
Automation
Slide 28
Slide 28 text
Continuous Integration / Continuous Delivery
For every push
Run tests
Build app
Deploy the app
{...}
Slide 29
Slide 29 text
Continuous delivery
Deploy fast
Revert fast
Avoid silos
Slide 30
Slide 30 text
Continuous delivery
Run actions on each push depending on branch
● Run all tests
● Build the app
● Deploy review app
If on “main” branch
● Deploy to staging environment
● Deploy to production (after button click)
Gitlab CI
GitHub Actions
Slide 31
Slide 31 text
Gitlab CI
Slide 32
Slide 32 text
Do I have to know all this?
Photo by Dipqi Ghozali on Unsplash
Slide 33
Slide 33 text
Hire for attitude…
…train for skill
Slide 34
Slide 34 text
Attitude
Curios
Communicating
Questioning
Trainers told me not to write
comments, but I did it anyway - as
a reminder for myself, and
because they didnʼt tell me why!
Responsible