https://css-tricks.com/the-great-divide/

Front-of-the-front-end and

back-of-the-front-end web development - Brad Frost

https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/

https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/

Back-of-the-front-end

• Writing application business logic.
• Wiring up, integrating with, and even authoring data sources, services, and APIs.
• Consuming the UI code.
• Optimizing the performance of JS code.

• Writing end-to-end, integration, and other tests.
• Architecting and managing JS-based infra.
• Managing devops stuff.
• Working with front-of-the-front-end devs.
• Working with the product team.
• Working with other backend devs and IT

https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/

Front-of-the-front-end

• Crafting semantic HTML.
• Creating CSS code.
• Authoring JS that primarily manipulates objects in the DOM.
• Testing across browsers and devices.
• Optimizing the performance of FE code.
• Working with back-of-the-front-end devs.

• Working with designers.
• Creating a lib of presentational UI comp.
• Authoring and documenting a robust intuitive component API for each component.
• Writing unit tests for UI component library.
• Architecting the flexibility/composability of the component library.
• Maintaining the presentational components as a product.

https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/

Are you truly a

full-stack dev?

Are you truly a

full-stack-front-end dev?

Rabobank Foundation

https://www.rabobank.nl/over-ons/rabofoundation

Working with designers

Guide & Engage designers + Team Universal

Atomic design header

Layout composition

Template

Slots

Storybook

https://gs-poc-design-system.apps.pcf-t02-we.rabobank.nl

Visual Regression

Chromatic

See requirements change

Catch mistakes

Conclusion

Thanks for listening!