Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Solutions

Modern Solutions

B7f4f73566b6b22ad11f9e1268dfdd62?s=128

Belén Curcio

March 03, 2021
Tweet

Transcript

  1. Modern Solutions Deploy Bel Curcio - curcio.be - @okbel

  2. Director of Solutions Bel Curcio / Vercel

  3. None
  4. What to expect from this talk. • Background and Introduction

    • Overview of Modern Web Applications • What’s a Solutions Team? • Solutions Team Playbook and Work f low • Some techniques to build resilient Web Applications
  5. Director of Solutions • Software Engineer / Earlysquad.com - FoundMyFitness,

    OpenZeppelin, Pagina12 • Lead Frontend Engineer / Mozilla - Coral Project, adq. Vox Media • OSD - Software Engineer / R/GA - J&J, PwC, Equinox, RGA.com, Nike, McCormick & More • Software Engineer / PFA - Healthcare / Security Systems Bel Curcio PFA 2011 R/GA 2014 Mozilla 2016 Vercel Now / Vercel
  6. Director of Solutions Bel Curcio / Vercel PFA 2011 jQuery/Mootools

    PHP ROR Java Oracle/PLSQL R/GA 2014 Backbone Underscore Templates Meteor MEAN Stack ASP.NET (SiteCore) Drupal / Wordpress Mozilla 2016 React GraphQL Apollo/Relay Vercel Now Next.js Nuxt Svelte + Microservices and Headless
  7. PFA 2011 jQuery/Mootools PHP ROR Java Oracle/PLSQL R/GA 2014 Backbone

    Underscore Templates Meteor MEAN Stack ASP.NET (SiteCore) Drupal / Wordpress Mozilla 2016 React GraphQL Apollo/Relay Vercel Now Next.js Nuxt Svelte + Microservices and Headless 2004 Microsoft Frontpage and Dreamweaver vBulletin CPanel/Fantastico Shockwave/Flash LAMP 
 🧬
  8. 2004 Microsoft Frontpage and Dreamweaver vBulletin CPanel/Fantastico Shockwave/Flash LAMP 


    🧬
  9. WYSIWYG Editors HTML ???? CSS Server DX Static Files Save

    As … 2004 Web Development
  10. WYSIWYG Editors HTML Flash CSS Server DX Static Files Save

    As … SPA 2004 Web Development
  11. WYSIWYG Editors HTML JS CSS Server DX Static Files Save

    As … FTP 2004 Web Development
  12. The Web from the WebMaster’s Perspective.

  13. The Web from the WebMaster’s Perspective.

  14. 2004 Web Development • Apps were limiting • Multipage was

    hard to maintain • No focus on the user • The DX was incredible • Deploys were instant • Small by default • Full ownership
  15. WYSIWYG Editors Server DX HTML JS CSS Static Files Save

    As … FTP 2004 Web Development
  16. HTML JS CSS Static Files Full Server Implementation Public Folder

    DB CMS
  17. Server Traditional Web Standard Model Web Server Web Server DB

    CMS API HTML JS CSS
  18. Traditional Web Standard Model Web Server Web Server DB CMS

    API HTML JS CSS • SPoF • No separation of Concerns • CDN (not) ready • Hard to scale • Costly, idle • Longer deploys, delaying time-to-prod • Challenging testing • Impure implementation
  19. UI Data Functional Model of a Web App

  20. UI Data Transformations Static Representation + Interactivity fn ()

  21. UI Data Transformations Static Representation + Interactivity This is Jamstack*

    fn (app state/data)
  22. Jamstack APIs Markup JS CDN Ready

  23. Jamstack Microservices (Serverless Functions) Markup JS CDN Ready

  24. Traditional Web Standard Model Web Server Web Server DB CMS

    API HTML JS CSS Jamstack APIs & Microservices Markup JS CDN Ready Overview of web architectures
  25. Traditional Web Standard Model Web Server Web Server DB CMS

    API HTML JS CSS Jamstack APIs Markup JS CDN Ready ?
  26. Traditional Web Standard Model Web Server Web Server DB CMS

    API HTML JS CSS Jamstack APIs Markup JS CDN Ready Hybrid
  27. Hybrid Model Secure Available Up-to-Date Performant Fast

  28. Hybrid Frameworks

  29. No silver bullets We have a work f low.

  30. Solutions Team

  31. Solution Team Tasks • Help customers deliver rich web experiences

    • Improve Web Metrics • Decrease technical debt and shorten time-to-production. • Create Demos and PoCs • Explore complex cases of Web applications at scale. • Code Audits
  32. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
  33. Focus on the customer Solutions Team Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
  34. Cover it all. Analysis • Industry - Retail, News and

    Media, Financial • Audience - Segmented Audience • Product - Product considerations and technical aspects.
  35. Each industry is di ff erent. Solutions vary per industries.

    Analysis/ Industry • Retail - Seasonal, Cyber Monday, Black Friday, Valentines Day • News&Media - Elections, Breaking news, Reader-to-Subscriber, Ads, Paywalls, Engagement • Financial - Real-time, Black-Swans, IPOs, GamesStop, Robinhood • Travel - Pricing strategies, booking f low, personalized and relevant experiences, recommendations.
  36. The Audience dictates your product (and tech considerations). Analysis/ Audience

    • Retail • Low tolerance on price & stock changes • News & Media • Engagement through community • Ads, Paywalls, Bots • Financial • No UX queues • Real-time and optimistic updates • Target and Segmentation • From which part of the globe you get most of your visitors? • Devices
  37. Rendering Strategy By understanding our customer's Audience and Industry, we

    can predict the rendering strategy.
  38. Detailed product consideration and its technical aspects. Analysis/ Product •

    Technical Considerations • Single Page Application (SPA) • Multi-Page Application • Multi-tenant Application • Microfrontend Application
  39. Focus on the customer Solutions Team Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵
  40. What is fast? Solutions • Real Performance • Perception of

    Performance / Performance
  41. What is fast? Solutions • Check 3rd Party Tags -

    Ads and trackers • Focus on Core Web Vitals - Mostly on Time to Interactive • Lazy-load based on User Interaction • Check for usage of CPU - Avoid unnecessary re-renders. Debug. • Don’t ship to the client what the client won’t use. Don’t abuse this power. • Analyze your JS - Bloated JS. • Images and Webfonts / Performance
  42. Solutions • External APIs & Microservices • Headless Providers •

    Databases • Monitoring and Logging • Caching Strategies / Architecture Ready to go. Starters, PoCs and recipes. • https://next-store-pi.vercel.app/ • https://next-edu.vercel.app/ • https://next-microfrontend-app.vercel.app/ • https://next-new-blogger.vercel.app/posts/student-solves-knot-problem (3.1k GH Stars) PoCs & Recipes Next.js Commerce
  43. • Commit to a certain level of performance • Build

    a progressive loading experience - Not all your users will experiment your web the same way. • Use Feature Flags - Don’t blow up in prod and ship a lot. • Build Incrementally - Plan your rendering strategy. • Use Tools - Let the tools work for you and with you. Not against you. • Make yourself independent - Set it up to be restarted everywhere in no time. • Build resiliency - e.g Default to another source of data Solutions / Good Practices
  44. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Deploy
  45. Solutions Team Focus on the customer Solutions Analysis Perfomance Industry

    Audience Product Architecture Best Practices PoCs and Demos Support 👩🔬 🚢 🕵 Iterate Deploy
  46. Don’t be the team that focuses too much on the

    brick. Be the team that builds the best house (or bridge).
  47. Focus on reality Let problems guide you. Work on real

    case scenarios. (And some edge cases)
  48. Stay on track The ecosystem is constantly changing.

  49. The Web is Complex Enjoy it.