Frontend engineering

How we build web-apps professionally Frontend engineering

Who am I?

Job-Interview at cosee Apply at https://cosee.jobs Developers decide on invitation
Programming exercise Job-Interview Talk about solution Decision

Just a website

Just a website ?

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 • backoﬀice for exhibitors

Spiel.digital frontend 298 Plain TypeScript files 413 React components 109
Diﬀerent pages (routes) Incremental releases

Expectations Photo by Brooke Cagle on Unsplash It works Done
on time Maintainable Cost control Happy user

Cross functional team We need understanding We need consensus •
Team rules? • Code style? • Quality Assurance? • Languages? • Tools?

Teamwork Sprint planning Daily Sprint review Retrospective Pair programming Code
review

Maintainability Code quality • Code style • Clean code Testing
CI/CD (Automation) https://media.giphy.com/media/ghGv942QjPotXvqYg0/giph y-downsized-large.gif

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

Code quality - Code style Whitespace Tabs Semicolon No

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--) { }

JavaScript ?

TypeScript

Clean Code https://geek-and-poke.com/geekandpoke/2008/2/4/the-art-of-programing.html

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

Clean Code is always Zen

Testing ?? So how did you test your app? I
just tried it

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 diﬀicult to write • May not cover everything

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

vitest / jest

Secret hint Testing library uses JSDom • No dev-tools •
No visual hint Use https://www.vitest-preview.com/

Testing components and pages https://testing-library.com/

End to end testing Playwright • Complete system • Real
browser • Multiple browsers • Screenshots possible

Automation

Continuous Integration / Continuous Delivery For every push Run tests
Build app Deploy the app {...}

Continuous delivery Deploy fast Revert fast Avoid silos

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

Gitlab CI

Do I have to know all this? Photo by Dipqi
Ghozali on Unsplash

Hire for attitude… …train for skill

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

T-shaped personality .css { … } <html> APIs Security Rest
CI/CD Performance Depth of knowledge Deployment UX … Testing

Conclusion Photo by AbsolutVision on Unsplash

CI/CD Have a look at Automatic testing Code quality tools

Practice Build an app for something you need… …and deploy
it. Then build it again. Photo by Olga Nayda on Unsplash

Links Clean Code Clean Code: A Handbook of Agile Software
Craftsmanship (Robert C. Martin) https://github.com/ryanmcdermott/clean-code-javascript Testing https://vitest.dev/ https://testing-library.com/ https://www.cypress.io/ https://playwright.dev/ Code quality tools https://prettier.io/ https://eslint.org/ https://www.typescriptlang.org/ Talks https://youtube.com/playlist?list=PLKfeKWitifFjmAMlOfgVs F695VcjHQJ-d https://youtube.com/playlist?list=PLKfeKWitifFjqeKI1zU3m wK0hw6wtR5vi

Thank you for listening

Frontend engineering

Frontend engineering

More Decks by Nils Knappmeier

Other Decks in Programming

Featured

Transcript