Rise and Fall of the Frontend Developer
- 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