Un breve viaje por la concepción del Desarrollo de Aplicaciones Web desde el clásico patrón de Aplicaciones Web de Servidor con renderización en servidor e interactividad limitada en cliente a la reciente era de las Single Page Applications con renderización en cliente, foco en la interactividad y desacoplamiento del backend hasta llegar a los actuales patrones híbridos de renderización en cliente y servidor en busca de la mejor performance, la mejor experiencia de usuario y el mejor SEO.

1. BY @RAFAEL_CASUSO
RISE & FALL
OFTHE
FRONTEND
DEVELOPER

2. @RAFAEL_CASUSO
CEO @SNOWSTORM
CTO @THEPOWERMBA
• +12 years Developing Software Products
• +8 years Leading Engineering Teams
• Technologist. Passion. Innovation. Agile.
• Writer @Medium. Speaker @Slideshare.
• Founder of @VueJSMadrid @BotDevelopmentMadrid
Co-Founder of @AgileDeliveryES
RISE & FALL OF THE FRONTEND DEVELOPER
@ValueApp_io

3. FRONTEND
ORIGINS
THE BEGINNING (1996-2013)
RISE & FALL OF THE FRONTEND DEVELOPER

4. • First version of HTML by Tim Berners-Lee in
late 1991
• First version of CSS by Håkon Wium Lie in late
1994
• First version of Mocha/LiveScript created in 10
days by Brendan Eich. Eventually renamed to
JavaScript.
RISE & FALL OF THE FRONTEND DEVELOPER
SOME
HISTORY
WEB DEVELOPMENT FOUNDATION

5. • Create Interactive User Interfaces was required
to go through Web 1.0 to Web 2.0
• Most browsers were not compliant with the
standardized CSS speci
fi
cations
• Browser wars impacted directly in Web
Development standards, being too slow to
catch the business needs
• CSS & JS Frameworks started to appear
RISE & FALL OF THE FRONTEND DEVELOPER
WHATWAS
FRONTEND?
WHAT PROBLEMS DID IT FACE

6. RISE & FALL OF THE FRONTEND DEVELOPER
FRONTEND EVOLUTION (1995-2019)

7. RISE & FALL OF THE FRONTEND DEVELOPER
WEB FRAMEWORKS HISTORY

8. - BRENDAN EICH (CREATOR OF JAVASCRIPT)
IF THE WEB CAN BE EVOLVED TO
INCLUDE THE MISSING APIS AND HAVE
BETTER PERFORMANCE,
DEVELOPERS WON'T NEED TO GO
BEYOND THE WEB.
RISE & FALL OF THE FRONTEND DEVELOPER

9. • HTML markup dedicated learner
• CSS crazyness victim. CSS was underestimated
• Browser Wars and Web APIs slowness survivor
• Vanilla JavaScript and JavaScript patterns for
sophisticated pros
• JQuery was the way to go, a problem and
solution at the same time
RISE & FALL OF THE FRONTEND DEVELOPER
WHATWAS A
FRONTEND DEVELOPER?
THE BEGINNING OF THE ROLE

10. THE
SINGLE-PAGE
APPLICATIONS
ERA
INTO THE HYBRIS AGE (2014-2018)
RISE & FALL OF THE FRONTEND DEVELOPER

11. • Average Size of an SPA was 4MBs in 2018
• SEO is a Severe Issue since it depends on HTML and
don’t
fi
nd JavaScript-generated content reliable
• Usage Statistics Analysis is more dif
fi
cult to track
• Low/Poor/Mobile connectivity issues
• Data Inconsistency
• Too much Logic in the Client (even Security issues)
• Overwhelming Complexity in Bundling and Tooling
RISE & FALL OF THE FRONTEND DEVELOPER
WHICH ARE
THE PROBLEMS?
HEAVY BURDEN

12. WEB PAGE LOADTIMELINE
RISE & FALL OF THE FRONTEND DEVELOPER

13. MPAVS SPA
RISE & FALL OF THE FRONTEND DEVELOPER

14. • Framework Expert
• CSS Preprocessor lover
• Only works on Modern Browsers
• Vanilla JavaScript standard user
• Blinded by the lights
RISE & FALL OF THE FRONTEND DEVELOPER
WHATWAS A
FRONTEND DEVELOPER?
THE PEAK OF THE ROLE

15. THE
HYBRID
WEB
APPLICATION
WHERE WE ARE NOW (2019-PRESENT)
RISE & FALL OF THE FRONTEND DEVELOPER

16. • Simpli
fi
cation of Developer Experience
• SEO Capabilites and Reliable URLs
• Better First Contentful Paint (FCP)
• Better Integration between Backend and Frontend Processes
• Improved Data Consistency
• Enhanced Analytics Support
• Balance Logic weight between Backend and Frontend
• Reducing Complexity in Bundling, Tooling and Serving
RISE & FALL OF THE FRONTEND DEVELOPER
CURRENT
CHALLENGES
GETTING BACK TO THE PAST

17. MOSTUSED JAVASCRIPTFLAVOURS
THE CORE OF AGILE *SOURCE: STATE OF JAVASCRIPT 2020

18. MOSTUSED FRONTED FRAMEWORKS
THE CORE OF AGILE *SOURCE: STATE OF JAVASCRIPT 2020

19. MOSTUSED BACKEND JS FRAMEWORKS
THE CORE OF AGILE *SOURCE: STATE OF JAVASCRIPT 2020

20. SERVER-SIDE RENDERING
RISE & FALL OF THE FRONTEND DEVELOPER
• Server-side sends a fully rendered page to the client; the
client's JavaScript bundle takes over which then allows the
client app to hydrate
• Hydration refers to the client-side process during which
client takes over the static HTML sent by the server and turns
it into dynamic DOM that can react to client-side data
changes
• Requires a Node server that can be controlled completely
through middlewares
• Conditional code to differentiate Server and Client execution
• During Server execution logic can access Request/Response
and Database directly
• Server-side Rendering Steps:
Step 1: Browser to Server
When a browser sends the initial request, it will hit the Node.js internal
server. Server will generate the HTML and send it back to the browser
with results from executed functions and access to data
Step 2: Server to Browser
The browser receives the rendered page from the server with the
generated HTML. The content is displayed and the hydration kicks in,
making it reactive. After this process, the page is interactive.
Step 3: Browser to Browser
Navigating between pages is done on the client side so you don't hit the
server again unless you hard refresh the browser.

21. STATIC SITE GENERATION
RISE & FALL OF THE FRONTEND DEVELOPER
• With static site generation you can render your application during the
build phase and deploy it to any static hosting services such as Netlify,
GitHub pages, Vercel etc. This means that no server is needed in order
to deploy your application.
• Huge trend on Static Site Generation including NextJS, NuxtJS, Gatsby,
Gridsome, VuePress, Hugo, etc
• Best SEO and Performance capabilities

22. INCREMENTALSTATIC REGENERATION
RISE & FALL OF THE FRONTEND DEVELOPER
• Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without
needing to rebuild the entire site. With ISR, you can retain the bene
fi
ts of static while scaling to millions
of pages.
• When a request is made to a page that was pre-rendered at build time, it will initially show the cached
page.
• Any requests to the page after the initial request and before N seconds are also cached and
instantaneous.
• After the N-second window, the next request will still show the cached (stale) page
• Server triggers a regeneration of the page in the background.
• Once the page has been successfully generated, server will invalidate the cache and show the updated
page. If the background regeneration fails, the old page will stay unaltered.
•

23. • Unstoppable Evolution towards the Fullstack
• Urgent UpSkilling and ReSkilling is needed to
work effectively on both Frontend and Backend
• Mindset and Processes Changes are required
• User Experience is #1 Priority
• Developer Experience is #2 Priority
• Let’s stay Humble and Hungry of Knowledge
RISE & FALL OF THE FRONTEND DEVELOPER
FRONTEND OR
FULLSTACK DEVELOPER?
THE MATURITY OF THE ROLE

24. THE
FUTURE
WHERE ARE WE HEADING
RISE & FALL OF THE FRONTEND DEVELOPER

25. BY @RAFAEL_CASUSO
THANK
YOU