Make websites, not apps / @supersole

I work at Mozilla in London, UK

Engineering Manager @FirefoxDevTools

I'm also Spanish

English is not my first language

I wonder about things native speakers don't

"It's raining cats and dogs"

"Going against the grain"

"contrary to the natural inclination or feeling of someone or something: it goes against the grain to tell outright lies. [from the fact that wood is easier to cut along the line of the grain.]"

It's easier to cut along the grain than across it

(image source)

Wood is also stronger along the grain

(image source)

(or with spaghetti...)

(image source)

Keep in mind the grain when applying polish, or...

(image source)

The grain is intrinsic to the wood

If you work with the grain, you get smooth, robust results

If you work against the grain, you get flimsy and brittle results

This sounded very familiar... 🤔

Modern Web development goes against the grain in many ways

Developing is harder, and the results flimsy and brittle

So what is the Web's natural direction?

When you build with these principles in mind, you are 'cutting along the grain'.

You are playing to the Web's strengths.

Websites built on top of this foundation are delightful because they acknowledge the dual nature of the Web platform

Some developers build against the Web's natural direction

They also choose to ignore many aspects

Thus they often badly reimplement existing features, creating jank and accessibility issues.

All in pursuit of building a 'web' app!

Neither users neither developers of these apps will be happy

I've been here too...

The cool thing is that there's a solution...

Make websites, not apps

(I'm just slightly sorry it's so obvious)

Websites build on top of almost 30 years of experience

A properly built website will last longer than any JavaScript framework

Example: the first website ever can still be accessed with nowadays browsers

So... how?

1) Architect your content

Ask yourself: what do users need?

2) Turn the content into HTML

Use all the tools the standards give you to represent content

Examples: tel:// protocol, pattern in forms, input[type=number]...

3) Add CSS

Go bottom up

Always be learning

3.1) Feel proud to be a CSS developer

Don't let anyone tell you that you're not "a real developer" because you only write CSS

4) Add JavaScript—wisely
(with great powers...)

Watch out for...

If you must replace something a browser does with your own code, you'd better know what you're doing

5) Look server side too!


Check your server configuration

To diagnose, use the browser developer tools and online tools like Web Page Test


... but the truth is that writing software is hard.

At least, web developers don't have to build the browser first.

That would be hard.

And we get so much built-in in browsers already

And the list of features is just growing and growing

... all built on top of websites!

Exciting times to be
a Web developer

You can reach so many people already.

And the millions of upcoming new Internet users are not using fancy phones and installing apps.

They are using browsers you've never heard of!

Mozilla ❤️ the Web

Researching and exploring the future Web