Wunder: Decoupled stack with Next.js

A presentation at Decoupled Days 2021 in July 2021 in by David Corbacho Roman

Slide 1

Slide 1

Decoupled stack with Next.js Decoupled days 2021

Slide 2

Slide 2

Customer first Our tech stack is just a tool to help the customer What incredible benefits can we give to the customers?… not starting with: Let’s sit down with the engineers and figure out what awesome technology we have and then how we are going to market that. source: https://youtu.be/oeqPrUmVz-o “Customers don’t care about your solution. They care about their problems. - Dave McClure, CEO

Slide 3

Slide 3

Welcome These views are my own Wunder has more than 100 employees in an almost flat hierarchy. Dozens of active projects with a lot of freedom for the team to take decisions. We have 7 internal guilds. Guild leads support people and growth in different ways. At the moment I’m guild lead for JS devs. Why not join us?. Ping me, or google “wunder careers”

Slide 4

Slide 4

Our decoupled stack for multiple projects

Slide 5

Slide 5

Our decoupled stack for multiple projects

Slide 6

Slide 6

Why? Why fully decoupled? Why ElasticSearch? Why React? Why Next.js?

Slide 7

Slide 7

Why? Why fully decoupled? Why ElasticSearch?

Slide 8

Slide 8

Table with and without header rows Why ElasticSearch? Super fast Aggregates data from multiple sources Search is very important Advanced cases. Ready solution for indexing Drupal content, by Wunder: https://www.drupal.org/project/elasticsearch_helper

Slide 9

Slide 9

Table with and without header rows Time for a story: Personalized daily email to 40,000 people

Slide 10

Slide 10

Our decoupled stack for multiple projects Why React? Why Next.js?

Slide 11

Slide 11

Number of developers in the world (source: slashdata) 2018 2021

Slide 12

Slide 12

Why Next.js Programming is a pop culture “Popularity rules, and fitness for purpose is secondary.” This is one of the reasons why many experienced programmers spend some time on “social” programming sites like Hacker News, Reddit, or Stack Overflow. In a pop culture, keeping up with the trends is necessary to do your job. You can’t design clothes if you spend all your time in a laboratory analyzing fabrics http://braythwayt.com/posterous/2012/11/01/programming-is-a-pop-culture.html

Slide 13

Slide 13

React

Slide 14

Slide 14

Why Next.js Next.js vs Gatsby In 2020, Next.js became hybrid

Slide 15

Slide 15

Section intro Time for a story: From Gatsby to Next.js

Slide 16

Slide 16

Table with and without header rows React Server Components React will be for the first time opinionated on the backend, requiring a JS runtime. Release estimated for 2022 This in a way, will replace the progressive decouple strategy (BigPipe) from Facebook. (my guess)

Slide 17

Slide 17

Table with and without header rows Why Next.js? Becoming the standard meta framework for doing SSR in React Hybrid Popular Innovative: introduces quickly new experimental features Mature: backwards compatibility Performant Small well thought API, like React. Easy to learn.

Slide 18

Slide 18

Customer first Our stack is just a tool to help the customer What incredible benefits can we give to the customers?… not starting with: Let’s sit down with the engineers and figure out what awesome technology we have and then how we are going to market that. source: https://youtu.be/oeqPrUmVz-o “Customers don’t care about your solution. They care about their problems. - Dave McClure, CEO, 500 Startups

Slide 19

Slide 19

Thank you :-)

Slide 20

Slide 20

Shaping the Digital Experience wunder.io