THE MODERN STRUGGLE OF WEB DEVELOPMENT

I'm Alex, nice to meet you!

@alexnmoldovan

Co-Founder @ JSHeroes

medium.com/@alexnm

Hello 🇷🇴 VoxxedDays !

Open Source Engineer @ TeleportHQ

http://bit.ly/modern-stuggle

Software Quality

What other developers might like about what we are doing

Alice

Bob

USER EXPERIENCE

DEV EXPERIENCE

Alice

Bob

USER EXPERIENCE

DEV EXPERIENCE

Alice

Bob

USER EXPERIENCE

DEV EXPERIENCE

DEV Experience

Metrics

Code Coverage

Code Complexity

Cohesion and Coupling

Clean Code and Architecture

CI/CD

Before software can be reusable it first has to be usable.

 Ralph E Johnson, GoF

REUSING

WHO IS

?

User Experience

Availability and Accessibility

Safety and Privacy

Convenience and Cost

Delightful Experience

Availability and Accessibility

Safety and Privacy

Convenience and Cost

Delightful Experience

Availability and Accessibility

Safety and Privacy

Convenience and Cost

Delightful Experience

Engineer 2.0

Performance

Accessibility

Security

Accessibility

People with permanent disabilities

People with episodic or temporary disabilities

Ageing people

People in developing countries

Inclusive Design & Development

Your user is not you!

1.3 billion people live with some form of vision impairment.

217 million have moderate to severe vision impairment

36 million people are blind

8% of all men have the some form of red-green color blindness

0.5% of all women have similar problems

35% of adults aged 40 years or older in the United States have experienced some form of vestibular dysfunction

https://www.w3.org/WAI/standards-guidelines/wcag/

Practices

Test using screen readers

Respect HTML semantics

Aria should be the last resort

Understand demographics

Test color contrasts

Tooling

axe-core

lighthouse

jaws

static analysis (eslint-react-jsx-a11y)

funkify

Security

Ensure privacy and safety

Assume the worse!

The Devil is in the details

Am I doing the common sense things?

Who might be tempted to attack me?

77% of 433,000 sites use vulnerable JavaScript libraries

Security Misconfiguration causes 1 in 5 data breaches

XSS represents 18% of the reported bugs on the web

https://www.owasp.org/

Practices

Update libraries!

Don't write your own Regexes

Maintain separate e2e suite

Don't reinvent the wheel

Treat it seriously!

Tooling

Snyk

npm audit

Express Helmet

Zed Attack Proxy (ZAP)

regex101.com

Performance

Loading times and interactivity

Context and Process

Where are the users coming from?

What devices are they using?

What is meaningful and what can I prioritize?

Understand the loading and interaction phases

Avg page load times are 5.4s on desktop and 15.5s on mobile

Rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup.

We are shipping between 1200-1500Kb of data over the wire

Practices

Optimize Critical Rendering Path

Reduce the bundlesize

Ensure 60fps at all times

Eliminate 3rd parties

Optimize images

Tooling

lighthouse

gtmetrix.com

webpagetest.org

Puppeteer e2e

Speedcurve/Calibre

Be inspired by what you don't know

TEAM CULTURE

Engineer 2.0

User

Engineer 2.0

Peer

Empathic Engineering

I'm open to questions!

@alexnmoldovan

Co-Founder @ JSHeroes

medium.com/@alexnm

Thanks 🇷🇴 VoxxedDays !

Open Source Engineer @ TeleportHQ

http://bit.ly/modern-stuggle

Made with Slides.com