Web development best practices in 2021
What the data tells us
JSConf Mexico, 2021-11-30
Who is this guy?
- Currently: Data Evangelist at Netlify
- Previously:
- Co-founder at npm, Inc.
- Co-founder at awe.sm
- Web developer at Yahoo
- Web developer since 1996
What you'll learn from this talk
- The most popular choices for web developers
- "Popular" is not the same as "best"
How do I
know this stuff?
- The Jamstack Community Survey
- 10,000+ survey responses
- 3000+ in 2020
- 7500+ in 2021
- 10,000+ survey responses
- npm downloads data
- Redmonk survey data
- GitHub State of the Octoverse
- Other surveys
Sources of error
- The Jamstack Community Survey
- Probably me being dumb sometimes
Section 1:
Who we are
82% engineers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072146/job_titles.png)
Increasingly geographically diverse
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072195/regions.png)
85% EU/NA
52% EU/NA
Developer
archaeology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072195/regions.png)
85% EU/NA
52% EU/NA
Huge shift
to remote work
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072217/pandemic.png)
40% remote
in devs with > 2 years of experience
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072221/pandemic_remote_experience.png)
What does this all mean?
Section 2:
What we're doing
B2B and Consumer
are almost equally big categories
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072230/purpose.png)
E-commerce is big
but lead capture by itself is enormous
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072230/purpose.png)
Internal tools are big
Do we give them resources to match?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072230/purpose.png)
Application types
- Fully static
- Partially dynamic
- Fully dynamic
- Single page app
All sites, not just Jamstack sites
Fully static and fully dynamic are almost equally common
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072272/app_types.png)
Target devices
Are we "mobile first"?
88% of US consumer internet time
is spent on mobile devices
Mobile second
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072276/targets.png)
Development priorities
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072280/priorities.png)
Performance then uptime
So being down is okay if it's fast when it's up
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072280/priorities.png)
Move fast and break things
is apparently the industry standard
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072280/priorities.png)
Audience sizes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072330/audience_sizes.png)
What affects performance most on a site with only 1000s of users?
Section 3:
How we're doing it
Awareness, Usage and Satisfaction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072336/cms_traditional.png)
size = awareness
want to
use more
(happy)
want to
use less
(unhappy)
used more
used less
Year on year changes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072341/cms_changes.png)
happier
sadder
lost users
gained users
Figma leads design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072346/design_tools.png)
Content Management Systems
Why pay so much attention?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/8963150/apis.png)
WordPress leads traditional
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072352/cms_traditional.png)
Contentful leads headless
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072353/cms_headless.png)
Webflow leads design-led
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072355/cms_design_led.png)
WordPress leads overall
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072358/cms_overall.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072357/cms_changes.png)
CMS conclusions
- Headless CMS is the most popular type
- Contentful is the best bet in headless
- Strapi and Sanity are worth considering
- Webflow is the leader in design-led CMS
JavaScript is universal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072367/languages_usage.png)
Hey look, SQL!
TypeScript is a big deal now
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072365/Screen_Shot_2021-11-01_at_4.08.22_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072370/language_changes.png)
The JavaScript Trap
Developers writing for the web are forced into JavaScript
WebAssembly
aka WASM
Conclusions: languages
- JavaScript is inescapable (for now)
- Learning TypeScript is a good idea
- Especially at a big company
Server-side techniques
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072375/server_side.png)
Serverless functions: 46%
Frameworks are providing first-class support for functions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072375/server_side.png)
Web frameworks
are good, actually
The time before
web frameworks
It was very inefficient.
Frameworks always solve a human problem
and only sometimes a technical one
Frameworks make you go faster
because you can get other people to help
Types of frameworks
- Component libraries
- "Kitchen sink" frameworks
- Static site generators (SSGs)
- Others
React at 67% usage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072405/frameworks_components.png)
Gatsby leads SSGs
but for how long?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072407/frameworks_ssg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072412/frameworks_kitchen_sink.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072412/frameworks_kitchen_sink.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072421/frameworks_kitchen_sink_small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072426/frameworks_changes.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/136956/images/9072426/frameworks_changes.png)
On web components
Are they finally ready for prime time?
Conclusions: frameworks
No clear winner,
but some solid ideas.
- Want a component library?
- React
- Want a kitchen sink?
- Next.js (or Nuxt/Vite/SvelteKit)
- Want an SSG?
- Gatsby (or maybe 11ty)
React may be the new jQuery
but I mean that in a good way!
jQuery never died
It became part of the browser
Can React transcend?
If it keeps growing, maybe
Phew.
That was a lot of data.
What we build
- B2B and B2C are equally big
- Internal tools are big
- Lead capture is big!
- We aren't mobile-first
- Should we be?
- Totally static and totally dynamic sites are equally common
- We don't care about security or privacy
- And it shows
How we build it
- Strapi and Sanity are the CMSes to watch
- 11ty is the SSG to look out for
- React is becoming bedrock to the web
- Next.js is a clear front-runner in kitchen sink frameworks
- WASM and web components are on the horizon
Enjoy the web
The best way to reach me is Twitter:
@seldo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/seldo/images/380749/Twitter_logo_blue.png)
Web Development Best Practices: What The Data Tells Us
By seldo
Web Development Best Practices: What The Data Tells Us
- 3,212